Monday, March 3, 2008

Constraints and design

It’s interesting to see what effect technical constraints have on design. Paradoxically, constraints can be liberating, freeing you from the tyranny of too many choices.

Case in point: weather information stalwart Weather Underground. For their standard presentation of current local conditions and 7-day forecast, WU provides equal-opportunity clutter with ad spaces and weather information:

Give it the “squint test”: narrow your eyes to and don't focus on any part of the page. Take it all in and decide if any part of the layout says, “look at me first!” For me — maybe the banner ad at the top, and perhaps the brownish blob of the current radar image window — but it’s pretty much a dead heat. Everything shouts for your attention and the lack of useful contrast makes this a data maze from which almost no information may ever escape.

Contrast this with the presentation of same data on an iPhone (simulated here with a narrowed Safari browser window):

Incredible. Tapping any of the Current, Radar, Forecast, and Warnings links scrolls to an anchored heading on this page, neatly dividing up the four main categories of weather information you’d be likely to find of interest. (Some may quibble that Warnings should be displayed conditionally — no current warning, no link.) The iPhone's standard 320 pixel width demands that the designer get the essentials front-and-center. (Rotating to activate the iPhone’s magical page-flip feature gives you 480 pixels to work with; still much less than today’s average desktop computer.) No ads to be found, but they could probably place one or two near the top, or in the Forecast section, and they wouldn't be nearly as detractive from the user experience.

The iPhone limits web plug-in options (no Flash) and strongly recommends an approach to visual styling that is in harmony with the characteristically simple lines of its built-in OS X applications. Its options for web developers writing iPhone-specific sites strongly encourage using CSS3 features that improve cross-site consistency, right down to the optimal font and point size for list layouts.

The next time I'm stuck on a design task, I think I'll put up some blinders and see if limiting my field of view paradoxically sets me free. Less is less, right, Jason?

Labels: ,