Beauty in the Details

The design process is about whittling away distractions, making the obscure feel obvious, making the obvious feel implicit, and doing it without anyone noticing. To the untrained eye, your best work looks like you’ve done no work at all. If you’ve done a stellar job, then your design will feel utterly obvious. —Neil Mix from Paradox of Elegance blog post.

Neil goes on to say that "it’s easier to see the flaws than it is to see the elegance." That may be true, but a careful look at the best interfaces reveals the little and beautiful elements that make all the difference. These small features might not determine whether someone uses a piece of software, but they will determine if the user enjoys their stay:

Designer Bret Victor, who we first wrote about here, has developed a desktop widget for the SF-area train schedules. He allows users to change their query right in the description of an object—notice the red text.

Magic Ink widget

While we are fawning over Bret’s handiwork, here’s another cool feature he built into his Click-Shirt site for customized design of t-shirts. This bar at the bottom of the screen tracks the history of changes as the user designs a shirt. Each time I make an edit, I get a visual breadcrumb trail to easily see my history and backtrack.

Click Shirt

Google Finance stock charts have a nifty little device that lets you change the time range you are looking at. You can change both the size and the start of the time window using one adjustable object. Not to mention the embedded alert markers.

Google Finance stock chart

Some elegant touches are more subtle. Check out the search toolbar in Firefox. When I start typing, it fills out search terms both from my history (above the line) and from common searches (below the line).

SearchToolbar

The Safari browser for Windows offers a new approach for finding words in a web page. The browser greys the screen and highlights the target word. And you can to tab through the various instances of the word with the orange highlighting.

Safari Finder

And while we are on the subject of Apple: sometimes the difference between clunky and good is simply about the quality of the images. A while back I wrote a break-up letter to PowerPoint—one reason was that the Mac-alternative called Keynote does a much job with the look of default charts. The chart on the right feels more professional, in part due to the anti-aliasing of the image. (Joel on Software has an interesting post about anti-aliased fonts here.)

PPT chart
Keynotechart

Finally an infographic from the New York Times called the Sector Snapshot. The beauty of this presentation of information is in the careful use of contrast and skill at keeping the focus on the numbers.

NYT sector