Usability and Design News: Screen Resolution, Page Layout, Hot Spots
Jakob Nielsen and Andy King both have new articles at their sites that cover window resolution, user-friendly website design, and related issues. This important topic is also regularly discussed and debated in Web design and development discussion lists. Below I’ve highlighted their articles, but be sure to check them out in full, too (links below).
First, in Jakob Nielsen’s new article, Screen Resolution and Page Layout, I’m not at all surprised that his basic advice is to optimize to 1024x768, don’t design solely for one monitor size, and do use a liquid layout approach. He then explains why he feels that way and backs it up with his usual case studies and findings.
An important point that Nielsen also mentions is that users don’t always maximize their windows. In other words, don’t take 1024x768 literally. It’s also important to remember to allow for browser toolbars and sidebars. They are common and take up additional screen real estate that reduces the webpage views for both height and width. (Nielsen doesn’t mention this while Andy King’s new article below does.)
Nielsen also stresses the importance of user-friendly scrolling:
As the first criterion implies, scrolling is always a key consideration. Users generally don’t like to scroll (my new book discusses this in detail, giving statistics for how many users scroll various types of pages). So, when you design, you should consider how much users can see if they scroll only a screenfull or two.
Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024x768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800x600).
So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don’t assume that this is how you should deliver your company’s mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.
In addition, Andy King’s new article, Clickstream Study Reveals Dynamic Web, discusses the findings in a recent study1 that while all the study participants used 1024x768 resolutions, most of them did not use their entire screens for browsing:
Smaller windows, toolbars, and other widgets left users with about 160 horizontal pixels and 170 vertical pixels unused. For 1024 by 768 screen users, the average available document width was about 890 pixels (see Figure 6). The clickstream results confirm this, with clicks dropping off dramatically after about 880 pixels in screen width (see Figure 4). The authors recommend flexible layouts that leave at least 15% of screen width unused.
Once again, the window resolution (1024x768) usually doesn’t reflect the actual webpage window size, and flexible layouts are recommended. Why am I not surprised?!
Pictures Speak A Thousand Words (and Then Some!)
Andy’s new article also provides fantastic heatmap graphics that show that where users click the most on links is remarkably similar to the eye-tracking studies of where users look the most on a webpage. It might not surprise you to read that the top left corner is the hot spot for both the eye-tracking studies and where users click the most on a webpage. Fascinating reading, great graphic samples.
Jakob Nielsen’s new article, Screen Resolution and Page Layout, and Andy King’s new article, Clickstream Study Reveals Dynamic Web, are both important reading and provide valuable insight to help us all create more user-friendly pages. I’ve only touched on a few points here! You’ll find lots more helpful information and insight in these two new articles.
1Weinreich, H., Obendort, H., Herder, E., and M. Mayer, "Off the Beaten Tracks: Exploring Three Aspects of Web Navigation," ACM Press, May 2006.