UI Design Newsletter – March, 2001

References:

Kalbach, J., The myth of 800x600, March, 2001 (thanks to Terrence deGiere at HFI for finding the article)

Adrian Roselli (Aardvark) – note that this study reports slightly more users for the 1024x768 resolution

Resolution Studies
A – dreamink.com, March, 2001;
B – statmarket.com, February, 2001 (click on Systems tab – requires a subscription – the information for February is in Kalbach, 2001)
C – thecounter.com; January, 2001
D – websnapshot

What screen resolution are you designing for? When is it time to change?

A website is best when it is designed for a monitor resolution that matches the monitor resolution of the majority of your users. This provides a full-screen layout for those who desire to use the full width of their monitor for web pages.

For the past couple of years, most users have had their monitors set to handle 800x600 pixel resolution. However, based on the studies that are currently available to us, we may be approaching the point (in the next few months) where 800x600 will no longer be the most common resolution. The relative percent of users using each resolution could change fairly rapidly because some major computer manufacturers are now delivering their new monitors set at 1024x768.

Also, there are some smaller studies reporting that the majority of users are already using 1024x768 (seir.sei.cmu.edu - January, 2001; themes.org; September, 2000). I found these studies about two months ago. Unfortunately, when I returned to the websites to double-check the numbers, I could not find the reports on resolution again. I will leave in the references - you may have better luck finding the statistics.

There are currently at least four (ongoing) studies reporting on monitor resolution:

Designers should have a threshold ("trigger") that, when met, they would immediately start designing for higher resolution monitors. A reasonable rule might be: "When demographic studies show that the majority of people are using a resolution of 1024x768 pixels, we will immediately begin to design for the higher resolution."

Most designers would benefit by having a quick and easy way to view their pages in the different resolutions. Monitor resolution testers can be found at dreamink.com and applythis.com. These two products offer fast ways to see what your website looks like at the three most popular resolutions (640x480, 800x600, and 1024x768).

Because many designers are still using fixed width pages, they must make the "resolution" decision. Hopefully, this decision will be made using the study results shown above. If a fixed width is used, designers then must make a second decision. When the page is viewed by users with higher resolutions,

1. should the page move all the way to the left and leave white space on the right, or
2. be placed in the middle with an equal amount of white space on the left and right?

There is no research to support using either the "left" or "centered" decision, but I suspect that having the image centered may be best. The eBay website offers good examples of being in the center (the eBay "home" page), or on the left (click on "my eBay" at the top of the home page). Note that these pages are still using the older 640x480 resolution, even though only a small percentage of users have their monitors set at this resolution.

There are at least two ways to have the page size adjust to the resolution of the user's monitor. First, design pages at both of the most common resolutions (800x600 and 1024x768), have your website determine the user’s resolution, and then show the pages to that user that matches their resolution settings. A second way is to simply stretch pages to fit the higher screen resolutions used by many people (flexible pages). Unfortunately, "flexible pages" may degrade the readability and/or overall appearance of certain pages (Kalbach, 2001). Again, ebay.com provides a good example of pages that adjust to the full screen (click on "site map" at the top of the home page).

Providing the ideal monitor resolution for users will continue to be a challenge for designers. To make it even more difficult, any serious discussion of monitor resolution also should include a discussion of monitor size. Kalbach (2001) references an article written by Adrian Roselli ("aardvark" ) that seems to suggest that as monitors size get larger, offering larger viewable browsing areas, users tend to concurrently open more pages (the aardvark reference is shown below). We must consider how many users are opening websites full-screen, versus having two or more browser windows open at the same time. There is very little good research to help us answer these important questions.

What screen resolution should you design for? Like most ergonomic issues, this one involves tradeoffs.

On the one hand, classical usability work tries to accommodate not 50% but 95% of users. (Why? Imagine a door so short that only half the population could get through.) The 95% criterion would restrict you to designing for 640x480 pixels, judging by most of the studies cited by Dr. Bailey.

On the other hand, business and functional considerations often demand higher resolutions. You need them if, for example, your design has a lot of content and complexity, and the user needs to see the big picture to retain context.

The compromise we use for most public Web applications is 800x600 pixels. This resolution excludes only the 3-13% of users still stuck with 640x480 screens. However, as Dr. Bailey points out, the target is moving. As people upgrade their monitors, the most reasonable compromise may change to 1024x786.

No matter what the prevailing resolution becomes, you will always need to think through each project individually. As designers we must continually weigh the business and ergonomic imperatives that lead us to the right tradeoff.