« Politician Bobble Heads using Silverlight | Main | Got Old Mono? Maybe! »

Don't abuse those poor tireless pixels ...

Did you know that the original Palm Pilot had a screen resolution of only 160 x 160 pixels? That's a total pixel count of only 25,600! Every pixel used had to be carefully considered. With all of the pixels we have at our disposal today on the average computer screen (OS X, Windows, Linux, etc.), why does it appear that many pixels are wasted? As the pixel count of screens has increased (and the resolutions and sizes of our monitors), have we become increasingly lazy about software design? For example, many web sites grow slowly wider and taller as the accepted minimum screen size has increased.

Has the average web site really improved at the same rate of pixel increase? Take for example a web site that was designed for an 800x600 screen. I'll ignore for the time being that a web browser, even in full screen mode doesn't use all of those pixels.  There are 480,000 pixels available for the designer.

Now, increase the screen size to 1024 x 768 for a total of 786,432 pixels. That's 288,432 more pixels than was available at 800 x 600! So, clearly the application improved by about 60%! Except the reality of the change is less likely to be such a dramatic improvement.

I'm continuing to read Designing Interactions (previous mention here, and which I highly recommend now that I've read more of the book). The original Palm software team had these simple four design guidelines:

Less is more

Avoid adding features

Strive for fewer steps

Simplicity is better than complexity

Sweet. But, how do you decide where to put features, once you've decided that the features are important? On an 160 x 160 pixel screen, there isn't room for every feature. Many software applications have this problem. Rob Haitani, one of the primary designers of the Palm interface, provided an analogy that can be used even today in designing modern applications that have the freedom of using many more pixels than their tiny predecessor. Think about the way your desk is organized. There are things that you've put out on your desk, and things you've put away. Why is that? The things you want immediately are on top, the rest are tucked away in drawers. If you had to retrieve your mouse from a drawer every time you needed it, you'd be extremely frustrated, but if every time you needed to remove a staple you had to reach into a drawer, you'd wouldn't mind that small multi-step process (and slight delay).  The stapler however, if you use it frequently is more likely a fixture on your desk, so that you can quickly access it.

Of course, the challenge is how to hide functionality that isn't necessary, and how to maximize on the pixels that you're using. That's what makes design hard.

One key is to understand your users and how they work. What would their "desk" look like? Are they frequent staplers? If you continue with Rob's analogy -- how would they feel if you shuffle their drawers and the contents around occasionally during the day? That's what it could feel like to a user if you're moving user interface elements around the screen. Or, what if their stapler is suddenly "disabled" with no context or reason why? Again, more user confusion.

What are some of the best examples of applications that maximize their use of pixels that you've encountered? What are some of the worst?

Help support my web site by searching and buying through Amazon.com (in assocation with Amazon.com).