Demystifying UX Design: Common False Beliefs and Remedies: Part 2

How to Design for High Information Density

High information density can deliver numerous benefits, but it’s success depends on how well designers execute on this design approach. Here are some guidelines for making a page with high information density both readable and engaging for users:

• Use a page layout that is easy to understand and scan. When you employ a common, well-understood page layout, you enable users to rely on their past experiences to understand a page’s basic information buckets. One example is using a horizontal area at the top of a page for a site’s primary, or global, navigation; a column at the left of a page for secondary, or local navigation. In contrast, if you get too creative—for example, placing the global navigation in a sidebar on the right—users will become confused and frustrated.
• Align similar content to enhance its scanability. By using alignment effectively, you can help users to scan large amounts of information with minimal effort. However, if content is not well aligned, the mental effort of reading that content increases dramatically. In Figure 2, a thumbnail image of equal size precedes every headline, without exception. This sets up a consistent expectation, making it very easy for users to glance over many headlines at once.

In Figure 3, on the other hand, the content is poorly aligned. Different types of visual elements and content containers are juxtaposed with one another all over the place. Perhaps the designer of this page intended to use variety as a means of creating user engagement, but users get lost when screen elements are not well aligned. You can make things look interesting without messing up the alignment and organization of the content on a page. The content of lots of highly engaging user interfaces—including those of Amazon.com, Netflix.com, and iPad and iPhone native apps—is both well aligned and engaging.

• Leverage whitespace effectively. With high information density, there is not a lot of whitespace at your disposal, which makes it even more critical for you to leverage whitespace effectively. Employ whitespace to break down a page’s content into chunks. For example, when there is abundant whitespace between paragraphs, this helps users to scan the text.
• Use graphics to break up long passages of text. Text-heavy pages are more difficult to process, and we all know that, in a Web context, users often do not read every detail in content. By using graphic elements such as pictures and font variations to break up text-heavy Web pages, you can make it easier for users to get through them.
• Use color coding to help users group information. When reading a text-heavy Web page, it is difficult for users to identify groups of information without expending lots of mental effort. By using color coding—applying the same color to all instances of the same type of content—you make it easy for users to mentally organize information into meaningful chunks and thereby reduce the amount of mental effort that information processing involves.
• Adjust information density based on users’ information needs. It should go without saying that you must make all design decisions that relate to information density according to the type of page that you’re designing. On a news site, really high information density is fine, because users expect to quickly absorb lots of information on such a site. On a corporation’s Web site, however, users usually look for key navigational elements such as Products, Support, or Jobs, then drill down from there. Having lots of information on the home page doesn’t support their use cases.

When Shouldn’t You Present Dense Information?

When designing Web pages, you should adjust their information density based on their context. While I’ve described many benefits of high information density in this column, high information density is not appropriate in certain situations, as follows:

• when accessibility is a key concern—High information density makes it very difficult for people with poor eyesight to read a Web page, regardless of how well designed the page otherwise is. Therefore, when designing Web sites for older populations—for example, a Web site for a mutual-fund company—you need to be very cognizant of this risk.
• when designing for mobile sites and apps—A screen with high information density would make it very difficult for users to tap a link or a button or even to read content on mobile devices—on smartphones in particular. Because of the space constraints that are unique to mobile devices, you should place less information on a screen.
• when a site has a heavy marketing or branding focus—On a site that focuses on branding, marketing, and visual appeal rather than delivering information, high information density would make it challenging to highlight the key marketing messages or create an elegant visual presentation. For instance, high information density simply does not suit Apple.com, a site that markets simplicity as a key brand attribute for the company. Figure 4 shows a case where low information density is appropriate: the home page of a financial company’s Web site.

In the cases I’ve just outlined, low information density better meets a Web site’s design objectives.

In Part 3 of this series, I’ll explore some other UX design myths. 

Reference

Nielsen, Jakob. Designing Web Usability. Indianapolis: New Riders Publishing, 1999.