Let’s look at three emails I’ve gotten from services that have permission to contact me:

1) iTunes Receipt for $0.00 (plus my precious attention)

enlarge

No money changed hands. Why do I need a receipt? I know what apps I downloaded, they’re sitting on my iPhone home screen. Hmm, haven’t fondled the iPhone in a few minutes, better do that now… [licks touchscreen]

2) Jott’s “Everything is OK” alert

Jott has several email notification options that you can mix and match:

• Email confirmation of every Jott note I create. (too noisy)
• Daily email, whether or not I’ve done anything new.
• Weekly email, same as above. (too infrequent)

The email I need instead is “send me a daily summary email, only if I’ve created a Jott”. I sent an email to Jott requesting this, and this is what they sent back:

Hey Nathan,
Thanks for the suggestion!
Have a great day,
Brooke

Nice.

3) Sonic Living wishlist alerts (the example that rocks)

Why this wins:

• Interestingness: “Sweet! A rock show is coming to my town!”
• Relevance: “Not just a rock show, but a show by an artist with at least [x] number of songs in my iTunes library. Awesome!”
• Actionability: Especially the one that says “buy tickets”.

Great work Sonic Living. I remember when I found you a few years ago. I was thinking to myself, “why can’t iTunes tell me when bands I love are coming?” so I googled that and we’ve been in love ever since.

I hereby revoke UserVoice.com’s internet license. I can do that, right?

Previously: Modal dialogs are the new deadly sin of web design

1. My Feedburner subscriber count seems to swing without reason. What’s the deal?
2. How come I got a traffic spike from StumbleUpon but only retained a handful of subscribers?

With my client’s permission, I’m sharing my answers here. As always my advice starts with “Don’t Panic” then “Launch, Measure, Tweak, Repeat“, and finally I offer concrete advice about what metrics new bloggers should focus on:

Part of the problem is that, statistically speaking, you’ve got a small sample. As your traffic grows the numbers will be more meaningful.

FeedBurner isn’t super accurate either. You’ll notice that WordPress stats and Google stats and Feedburner stats all report different (sometimes wildly so) numbers.

StumbleUpon, Digg, social news, etc. visitors are super non sticky. Try to convert them, have good “Start here/greatest hits/other posts like this” links, but don’t worry too much.

In Steve Martin’s book Born Standing Up he talks about how he expected to get recognized after being on Johnny Carson once. Turns out, he had to be on many times for anyone to even say “Didn’t I see you on TV last night? I didn’t care for you.” He says “you have to be good consistently and repeatedly”.

Bloggers who made their bones on Digg had to be on Digg many times before they stuck. It’s like advertising repetition. Be on TV enough and people will realize you belong there and they’ll start singing your jingle.

To circle back to metrics, when you’re a new blogger pay attention to these things:

• Comments: The social media chicken and egg problem. Like an empty restaurant, a blog without comments lacks social proof, so nobody wants to go there. Meanwhile, as Yogi Berra said, “nobody goes to TechCrunch anymore because it’s too crowded”. The more comments you have the more you’ll have.
• Incoming links: Who’s linking to you? What did they like about your post? What’s their niche? Are they cool? Comment on their blogs. For someone to take the time to link to you from their blog is a big deal. Treasure those readers.
• Bounce Rate: Since I redesigned five days ago with prominent “greatest hits” and “hire me” sections my bounce rate decreased from 89% to 55%. The design also has something to do with it since it looks “professional web designer” and my old design looked like nothing. One other thing, link generously to previous and related posts.

Now I have two questions for my readers:

1. If you’re a new blogger, what blogging/social media stuff is mysterious to you?
2. If you’re a seasoned blogger, what do you know today that you wish you knew then?

Howling in triumph or horrified that Prince has finally taken over Cobra Commander’s weather machine?

We’ll never know.

To cap off one of my busiest couple of weeks ever, the big AVC.com redesign launched yesterday. I’ll do a full case study post in a few days after some well deserved downtime in Santa Barbara, but until then you can get a taste of what custom TypePad blog development requires by reading my comments on Fred’s blog (you can also see only my responses here).

The AVC redesign was a great experience, I got to do it all: cutting design noise while boosting Fred’s signal, doing my first iPhone theme, optimizing for speed while dealing with a heavy widget load, and much more.

So yeah, stay tuned for the full case study, maybe I’ll post the super simple pencil sketch I pitched with.

When I started doing web design in 1999 with nothing to guide me but a B.A. in History and 21 years of drawing Batman in the margins of class notes, well, let’s just say I muddled through. Lucky me, this was way back when the internet was spelled with a capital ‘I‘ so any warm body with a copy of Teach Yourself Photoshop in 24 Hours could get decent work.

I’ve learned a few things since then, the most important being that you don’t start with typography and color.

You start by solving a problem.

My blog had 2 big problems:

• High bounce rate/Low conversion rate
• Unclear value proposition

Suck. These are the outcomes I wanted instead:

• Visitors not bouncing, but falling in love and subscribing. If you’re not big enough to generate your own gravity with the social proof of hundreds of comments on every post, then you’ve gotta win them over the old fashioned way, valuable stuff in a slick package.
• Potential clients realizing I’m the web designer they’ve been looking for their whole lives.

To achieve those goals, I did the following:

• Added a “start here” sidebar area with “Greatest Hits” and “Hire Me” sections. I’m still refining it, but any “start here” area is better than nothing. If you do nothing else to improve your visitor retention, add a “start here”. For inspiration check out nerd rocker Jonathan Coulton’s “start here” area. Everything you need to know about him is there plus his highest value content, i.e. his greatest hits.
• Clarified my purpose. I use my name for my URL because that was the best way to ensure I’d never half ass this blog. It’s a good long term strategy because I fully intend this blog to be a catalog of my life’s work, but my name isn’t great for SEO and by itself it doesn’t say anything about what’s going on here. To fix that I pulled my name in the logo way back, and punched my new tagline way up.
• Finally established a brand beyond “high contrast readability with no branding”. The previous design was a sort of repudiation of my old consulting site’s inauthenticity, but just saying no to things isn’t enough. You have to stand for something. Everything felt right as soon as I incorporated my abstract art into the header. Even the logo looks hand drawn. As I said on Twitter, the beautiful uncertainty of improvisational art, sort of like an artistic quantum mechanics, speaks to me.
• Floating tiles for the win. I’ve got a strong urge to “chunk” designs as I did in my personal projects Newshutch and GTDTiddlyWiki. I scroll quickly and the previously non-obvious division between posts drove me nuts. Pagination used to be at the top and bottom of pages, but now you can page quickly because the click targets are always in the same place.
• Sayonara crappy browsers. Safari and Firefox have CSS rounded corners. IE and Opera get square corners, and IE6 doesn’t get the footer pagination nav. When everything is legible, accessible, and “close enough” I stop worrying about cross browser display. Readers who only use one browser won’t know the difference, and anyway putting off IE5-using potential clients is a feature, not a bug.
• Special favicon mention: Favicons should be 16×16 slices of heaven, and I love my new one as well as my iPhone “add to home screen” icon. Spotting them in the midst of other favicons should be no problem.

Comments on the new design are very welcome, I’m especially interested in advice on improving my visitor to subscriber conversion rate as well as pre-qualifying clients. What’s your opinion?

• Whitespace: Stuff needs room to breathe. Don’t pack things too tight.
• Font size: Reading on a screen hurts. Make the smallest fonts big enough to read.
• Contrast: Don’t make small fonts worse with gray on white or vice-versa.
• Contrast 2: Visited vs. Unvisited links, and headlines vs. not headlines all need to be obvious.
• Relationships matter: Stuff needs to be grouped or “chunked” so the relationships and UI actions are clear. This also means you have to make good bold/unbold and headline font size choices.
• Don’t make targets tiny: Even if a clickable area is large, don’t make the part that looks clickable too small.

I love Delicious.com. It keeps my bookmarks safe, makes them available to me and my friends, and lets me publish interesting links to my blog sidebar with one click.

Too bad they really messed up their latest redesign:

Click for large version with and without comments

I submitted these comments on their design feedback page:

• Overall design: All the text and clickable items are LOW CONTRAST and SMALL. Things are generally hard to see, and specifically the relative importance and grouping of things is lost.
• Overall design 2: Why is everything so small and tightly compacted? See how tight the top navigation, “signed in as” bar, and search bar are? Why? The worst offender is everything from “my name’s bookmarks” down to the first bookmark. TOO TIGHT. Open up the design, let it breathe!
• “Inbox” sucks as a label. I’ve got a million inboxes. What was it before? “Links for you”? Much more descriptive.
• Hate the “type a tag” area. Before we had a nice big target to type into. Now I struggle to find it, let alone click into that tiny area.
• Hate the default “you haven’t uploaded a picture yet” profile picture. I know there’s this theory where you make default pictures ugly so users feel compelled to change it, but that is just too awful. Use Flickr’s please. Whoa, nevermind, that’s *not* a profile picture, it’s a “you are in your personal area” icon. It looks so awkward because it’s all negative space on the right. Steal the PBS logo or something to fill it out.
• The “heat” of popularity counts sucks. You need a color besides medium blue to dark blue.
• The bookmarks are too mashed together. I can’t tell which popularity number goes with which bookmark by the time my eyes scan from left to right. The whole bookmark area is just muddy. The structure is so unclear I can’t look at it.
• The main nav is weak. What’s with the light gray “bookmarks” main nav dropdown? Super tiny white text on light gray. Seriously?
• The available sorting in the “sort my bookmarks” dropdown is almost useless. Where’s “sort my bookmarks by general popularity”? I’ll give you a pass on things you’re still implementing.
• The difference between “viewing my bookmarks” and “viewing everyone’s bookmarks” modes needs to be more obvious.
• I wish del.icio.us still existed as a URL. Yeah, it was the worst URL ever, but it reminds us of the old days when delicious was an exclusive geek hangout.
• Overall design 3: Did I mention that everything is too small and tight? Click targets are just so small and I have a hard time reading text but also “reading” the structure and relationships of everything on the page.
• Wait, there’s a difference between visited and unvisited links? Haven’t been able to notice it yet.

---

Ok, rant over. I may not have been very polite in my points above, but I love delicious and its user interface is very dear to me. From what I’ve played with so far the new features you guys added are really cool and useful. You just need to make sure that all your hard development work is “discoverable” in the UI.

I’m usually very nice when I give design feedback, especially to my clients, solo bloggers, startups, and anyone doing the best they can with limited time and budget. However, if you’ve got a team of designers, QA people, and usability engineers, and you screw up something I rely on, the gloves come off.

See also: the Delicious.com developer blog has a movie that shows the difference between the old and new designs.

They should only be used when software needs to stop the show for an emergency, but lately they’re being used for basic forms and messages. Like Flash sites that reinvent browser scrollbars and inputs (badly), modals are confusing and wildly inconsistent.

They’re on my mind because of Ryan Singer’s “maybe modals are ok” post at 37signals (see my comment there), and because I ran into the worst modal ever yesterday:

To see it for youself, go to Whrrl and click “join whrrl” in the top right corner.

Seriously? A translucent sign up form? The tiniest “X” button ever? They’ve made it hard for me to sign up and hard for me to find an escape hatch all at the same time. Good thing the browser “close tab” button never fails.

Also, I love it when CAPTCHAs read my mind.

Every web professional has their own list of “deadly sins” and “10 commandments”, these are the best ones:

• Dwight’s Deadly Sins of Web Design (funny)
• 456 Berea St.’s list of 10 deadly sins (more serious)
• 101 Heinous Website Sins To Really Freakin’ Annoy Your Visitors

Which one of these favicons could you pick out of a lineup? Whether they’re in your dock, taskbar, bookmark list, feed reader, or browser tab, the whole point of icons is to differentiate themselves. For sadistic bonus points, the new Google favicon is translucent, so in an unselected browser tab it’s even harder to see:

It’s disturbing to see Google attempting to “prettify” their favicon. Google has always been about applications that are homely but powerful and easy to use. The old favicon was hideous‡ but it did its job better than the new glossy, drop shadowed, translucent one.

* Alternate post title: “I am altering the favicon. Pray I don’t alter it any further.”

‡ “Let he who is without sin” etc. I’m no Susan Kare so I usually take the easy way out and use a high contrast letter form instead of sweating over a hot 16×16 pixel grid. This approach is inspired by the contrasty-est favicon of all time.

∴ Bonus links: Create your own favicon uploader and Tons of great favicon examples.

I complain to the internets a lot because I live in a parallel universe where the wrong font choice is a crime against humanity. One of my tweets was about Dwell architecture magazine:

A week later a rep from a self described guerrilla marketing firm emailed (not DM’ed) me at my blog email address with an offer of free entry to a Dwell exhibition in L.A. He also offered a free entry promotion code for you, dear reader. Go to the registration site, select “Discount Exhibition”, and use this code: BDODEC

What have we learned here? Complaining on Twitter (and having a loyal cadre of blog readers to rival the mighty KISS army) gets you free* stuff!

* Yes, I’m aware that TANSTAAFL, and that I’m doing the marketer’s bidding, but FREE!

No Rackspace, I wouldn’t like a chat window crammed down my throat before I’ve even looked around.

“To view this you need to install Microsoft Silverlight by clicking the button below.” Also: “before reading this atrocious dialog box you’ll need a microscope…and legal counsel.”

Ah, classic Windows helper mascots. I bet in the computer world “Rover” looks like this:

I have never selected “Add to Google homepage” and I never ever will. RSS sucks enough without you adding another smidge of friction.

You can do it. You have the technology.

Hugs and kisses,

Nathan

You can see that I had difficulty fitting everything on a 3×5 card. Any system that be can’t comfortably diagrammed on an index card is too complicated to be user friendly, so I’ve taken about 5 minutes out of my busy day to solve the problem for the whole world.

Step1: The entire table surface needs to be a wireless charging pad. We’ll need some magic and/or fairy dust to make monitors, laptops, and external hard drives draw enough juice wirelessly without frying our nether regions.

Step 2: Every device pictured needs to communicate via secure, terabit fast, tiny wireless transponders. Also everything needs to work as easily as today’s USB. The “easy use” part will probably require more fairy dust than the actual wireless technology.

Step 3: Magic happens

Step 4: Profit!

No…more…hanging…wires! Also, no more unplugging a million things just to take my laptop off a desk. Of course any desk at a coffee shop, hotel, or office should have the same technology to complete the circle. What do you say Apple? Can you have this for me by July?

Previous desk schematic: Budget KVM solution

Anyway, the real reason Twitter is 100000X better than Facebook is that:

Facebook is work. Twitter is play.

• After the friend-adding honeymoon frenzy, Facebook gets boring fast. It becomes yet another inbox. Even worse, it’s like a noisy corporate Outlook inbox full of insipid HR newsletters and “CC: EVERYONE” abuse.
• Twitter however, is like an awesome never ending cocktail party. Even better, it’s a party full of people you love because they’re smart, helpful, hilarious, or famous. My brain knows that Hugh MacLeod and Jonathan Coulton don’t know me from Adam, but look! They’re right next to my real life friends so I’m popular by proximity!
• At cocktail parties you’re there to meet new people, not build a wall around your existing clique. I’ve met some fantastic people on Twitter, some of whom are now business contacts and clients.¹ Facebook was founded by an introverted seeming college student² and I suspect that has a lot to do with its rigid, inward facing rules.
• If someone at a cocktail party is being a bore, you can excuse yourself, or “unfollow” them, without a fuss. With Twitter everyone understands that attention is limited and conversation is ephemeral. With Facebook’s cliquey assumptions however, it’s an insult to “unfriend” or “block” someone, even if you love them but not their “zombie schoolgirl bite” updates. So they stay on your friends list, and you end up resenting them. This may be why social network users are so fickle. Eventually noise drowns out signal and it’s easier to start over elsewhere than risk upsetting people.³

To sum up: Facebook serves Facebook. Twitter serves me.

1. Meanwhile LinkedIn has had no discernible impact on my career.
2. I wonder if there’s been a study about how a founder’s temperament manifests in their company. Also, shower sandals are not appropriate public speaking attire.
3. See How Your Creepy Ex-Co-Workers Will Kill Facebook.

You can just drop these pots made of pressed grass into soil: no re-potting required, no plastic pot to throw away. It’s great when eco-friendly products outperform plastic alternatives.