Saturday, August 23, 2008

The devil in the detail: small but significant interface touches

They say that God / the devil is in the details and, when it comes to user interface design, I think they may just be right. The difference between a functional but uninspiring product and a product which is a joy to use is so often in the smallest, sometime almost imperceptible, touches - something which Apple understands only too well and has built much of its recent success on. Below are five example of tiny interfaces touches which make all the difference in the user experience of a product. Anyone got any other favourites?

Dynamic iCal icon

This definitely falls into the 'so subtle you might miss it' category. So used was I to the dumb/static icons of the Windows desktop that I initially failed to notice that the Calendar icon on my iPhone was updating every day to show the correct date. Such a simple thing but once I'd spotted it, I no longer had to open the app to check the current date - a real time-saver. I then spotted that the same functionality was present in the iCal dock icon in Leopard (but not, alas, in previous versions of OS X). Microsoft take note.

iPhone real-world physics

The discrete application of real-world physics to the iPhone interface is one of the things which makes it such a joy to use; pages bounce, icons wobble, emails fold up and disappear into the trash can. It's the visual design equivalent of haptic technology (e.g. force feedback) which reassures the users that their actions are having an effect on the objects they're interacting with; something the PC desktop has historically been so terrible at (e.g. "I think I clicked on it but nothing seems to be happening. I'll click on it again. Oh shit, now two of the things have opened...")

Blippr 'characters remaining' progress bar

The 'characters remaining' countdown is, in and of itself, a neat interface innovation and has now become a standard on mobile phones and microblogging services. However, it is Blippr's visual representation of this by means of a lowly progress bar which recently caught my eye on the basis that it's easier for the brain to absorb this information in peripheral vision when it's visually represented.

Wisia image suggest from Google Images

The thing that impressed me most about new Q&A service Wisia was not the wisdom of their particular crowd (who seem about as wise as most internet communities do in aggregate - i.e. not very), but the feature which automatically pulls in images from Google Image Search for you to associate with your answer. They offer the same functionality when choosing your profile picture so, in my instance, my avatar was automatically suggested as one of the top Google Image results for my chosen username (fabricoffolly).

TripSay profile completion ranking

Incentivising users to complete profile information is a perennial challenge for site owners keen to glean as much demographic data as possible. Many opt for a progress bar which reassures users they're nearly done, others promise greater functionality for those with completed profiles. TripSay has come up with a simple but ingenious approach to this problem which is to show your profile completion status relative to other users (i.e. as a ranking), informing me that "8360 people have rated more places than you" and tempting me to rate more with the knowledge that I could "Rate just one more place to advance to #7810".


Anonymous said...

Dan, thanks so much for the compliment of blippr. Really appreciate it, especially considering we haven't had a designer help us at all (though I do like the aesthetic aspects of application design).

Keep up the great writing (and blipping)!

CEO of blippr

Anonymous said...

Excellent post - I've admired and enjoyed the two Apple examples for some time.

I'm not convinced that a status bar is > character count. When editing a message to fit the limit I suspect that precision is preferred, no?

Additional note about the calendar icon: it's also a nice example of constraint and displaying only what's necessary. They exclude the month. While people may forget the day of the week or the day of the month, I suspect that most everyone knows the current month (or can infer from the date that's presented).

I suspect that other companies, in the interest of being complete, would implement something like: Tuesday Sept 20th 2008, and the information would be so small and busy that it would be worthless

Anonymous said...

Hi Dan, great post indeed. The joy of using a product often comes from ingenious, innovative details. One of the hardest things in a designer's work is to figure out when the details seize being ingenious and become extra clutter burdening the user.

Apple seems to have been able to stay on the 'ingenious' side even though they've been pushing the limits... We at TripSay hope to do the same.

Thanks for the compliment on TripSay!

jussi / cio / tripsay

Anonymous said...

Hi Dan, I appreciate your compliment on wisia!