The Illusion of Completeness

In the early days of the web, it was vital for web designers to ensure all the important content of a web page was “above the fold” as many web users at that time were unused to the concept of scrolling and so would often times never see content not immediately viewable within their initial browser window. While it is still important to place important and eye catching content near the top portion of the page, it is no longer true that users are unable or unwilling to scroll. More recent usability studies have shown that the majority of modern users are very familiar with the concept of scrolling and are often quite willing to scroll to find information that interests them. Scrolling is thus no longer quite the barrier it once was.

Certain design issues still can cause users to be much less likely to scroll however. One of these, as first described in an article by Bruce Tognazzini in 1998, is “the illusion of completeness”. Screen graphics often look formal and complete within the initial view port and may offer no obvious visual clues within the design itself that there is any more information to be seen below. The only visual clue is often the browser scroll bar which is a fairly weak signal. This problem is being compounded by recent user interface design trends as led by Apple. In the latest version of Apple’s operating system, OS X Lion, scroll bars have completely disappeared upon first view and are only temporarily visible as subtle thin grey bars when a user actually scrolls. (So in order to find out if there is indeed more content to see, a user must actually try to scroll first!) This unfortunate design trend is reportedly being aped in Microsoft’s next OS release as well.

Design Solutions

When designing and laying out web pages you can offer more obvious visual clues to users that there is more to see.

• Purposely “break” content over the fold:
  • Stagger objects similar in appearance or familiar to users so some will appear partly off-screen and so look “broken”. (Borders around boxes of content are one way to do this.)
  • Stagger text so some will appear “broken”.

Human vision is optimized to see structure, so this approach takes advantage of the human visual bias to detect and want to heal visual shapes and structures.

• Avoid strong horizontal bars near the “fold”:
  Strong horizontal bars at the bottom of the screen present a visual barrier and may trick the user into thinking they have reached the bottom.
• Test designs at different screen sizes:
  View your page within different common screen sizes. Make adjustments to visually “break” elements at fold lines. Ensure there are no visual barriers or false indicators which users may mistake as indicating the end of the content.

Ways to Test Designs

• Install a plugin tool such as Firesizer for Firefox: https://addons.mozilla.org/en-US/firefox/addon/firesizer/
• Add bookmarklet scripts to resize your browser window: http://www.creativetechs.com/iq/resize_your_web_browser_with_bookmarklets.html
• Try an online tool such as: http://browsersize.googlelabs.com/ or http://www.anybrowser.com/ScreenSizeTest.html
• Use pieces of tape or an overlay on your monitor to indicate different common screen sizes. (low tech option)

---

Further Information:

Jacob Nielsen’s Alertbox March 22, 2010: “Scrolling and Attention” http://www.useit.com/alertbox/scrolling-attention.html

Bruce “Tog” Tognazzini’s Ask Tog July 27, 1998: “Silo Design for Web Transactions” http://www.asktog.com/columns/007silodesign.html

“Mac OS X Lion tip: How to get your missing scroll bars back” http://heresthethingblog.com/2011/07/21/mac-os-lion-tip-missing-scroll/

Slate: “Save the Scrollbar! Why are Apple, Google, and Facebook eradicating a linchpin of user interface design?” http://www.slate.com/articles/technology/technology/2011/11/computer_scrollbars_why_is_apple_eradicating_a_linchpin_of_user_interface_design_.html