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: ,

2 Comments:

Blogger thelonious said...

Having worked on both pages, I agree with your post completely. Creating the iPhone version was much easier because I was able to start completely from scratch.

A problem with the main site's page (and the site overall) is all of the inherited content, some of which has been there since the mid-to-late 90s. Once you give visitors any speck of content it's very difficult to take it away, or even move it very far, without inviting a firestorm of angry emails. We're getting it there in small incriments though and have some new updates in the works that will move it in the right direction.

April 15, 2008 6:10 PM  
Blogger Matt Shobe said...

Thanks for providing the insider perspective! I completely sympathize with the "legacy content requirements = rage against any change in the machine" dilemma, so I can see why things are the way they are on the website.

The iPhone-specific design has proven durable and reliable; I always turn to it first when I want the detailed skinny on weather anywhere. As a pilot I further appreciate the plain-English METAR data decodes and cloud ceilings, which some might consider noise. Consider this an additional "more like this, please" vote.

April 16, 2008 7:55 PM  

Post a Comment

<< Home