The Understanding Group (TUG)

View Original

Supercharge your UX with Information Design

Summary: User experience is made better by good information design. We describe 3 kinds of information processing and describe the best way to design for them.

Finding your site’s information sweet spot is a great a way to drive the possible best user experience. In that post, I argued that your information design approach should consider the kinds of information processing your site’s users need to do.

The information space is made up of two factors:

Information density – The amount of information that users need to process. Can be either High or Low.
Concision – The number of elements it takes to complete a task. Can be either Concise or Expanded.

Depending on where a site lives on these two continua, designers should prioritize one major information design principle over others in order to best serve that page’s intended purpose. The most common 3 principles are, in decreasing order of frequency:

  • Rich, Transparent Taxonomy

  • Single Node Planning

  • Visual Design Fundamentals

If you’re a designer, you can apply these key design principles to make decisions about what the most important elements are for a given site or page. In this blog post, we look at how these principles are applied in real life on analytics dashboards, reservation landing pages, and wikipedia.

Rich, Transparent Taxonomy (Low-density, Expanded)

The page:

  • Requires reading multiple sections or following multiple links to get a full understanding of most topics.

  • Assumes a high school reading level but little more; in situations where a term is complex of domain-specific a link exists to explain it.

  • Has all the information is available as a link; very little information needs to be memorized or retained directly.

The overwhelming majority of online content depends on this design principle. If we are assuming that the user’s primary skills are their literacy and ability to learn, it’s critical that a structure exists to support them. By “taxonomy” we mean a clear category structure, well-defined attributes for individual elements, and clear labeling of other paths from the current node. It is, in other words, heavily dependent on traditional information architecture.

Wikipedia entry for the microstate of San Marino

The wikipedia page remains the gold standard of good taxonomic organization. Any term that might need to be explained is hyperlinked. The taxonomy is transparent and exists both in a table of contents and in a reference card on the right hand side. Disambiguation and cross-linking are standard for any any entry. And the articles are subject to ongoing and serious peer review. The other gold standard, but one that is much more difficult to analyze, is an Amazon.com product results page.

Single Node (Low-density, Concise)

The page has:

  • A quick answer to the question of finding something fairly specific (e.g., a hotel)

  • Common language used in everyday life

  • Almost all the information needed to make a decision, including calendars, maps, etc.

Essentially, the design goal should be to allow a user to complete their task in a single place with the elements available either in the immediate screen or within a few scrolls. This is also the case, broadly speaking, of high-density, concise interfaces. But it’s important as a principle because it is also a stress test of the interface. If the designer is struggling to contain all the relevant information in a single node, then the interface may not be as low-density and concise as they thought, and may have to be reclassified as “expanded”. This is much more of an information design problem, although information architecture is important for figuring out whether or not the problem is actually a single-node task at all.

Hotels.com landing page

The Hotel landing page, although rich in information, allows the user to complete the task in basically two or three steps while never leaving the page. Other interactions, such as a tax form or a more complex form, might require an expanded approach.

Visual Design Fundamentals (High-density, Concise)

The page has:

  • Quick-hit information

  • Almost no words; information in tabular and chart form

  • Users with a deep understanding of structures that must be understood before using the information presented on the page.

A key part of the concise, high-density environment is that visual design is critical to rapid information processing for experts. Other interfaces can accommodate less optimized visual design, but for any designs in this quadrant, emphasis on visual field and cognitive science fundamentals will have a huge impact on the user’s experience. The reporting dashboard is the most common example of this kind of page.

The Google Analytics Dashboard

I don’t love this design, to be honest. Visual distinctions between images should be consistent and clear enough for quick differentiation, and it’s not really happening on this dashboard. This is one of the biggest weaknesses of analytics packages in general and Google Analytics in particular, that the icon mapping is often of elements that are too visually similar (i.e., two circles of slightly different shades of blue).

Find your sweet spot and choose your principle!

The biggest challenge designers often have is not figuring out what to add to a design, but what NOT to emphasize, especially when there are budgetary or time constraints. This diagnostic tool and toolkit allows you to make an argument for a specific design principle to focus in on early in the project so that you can make the most of your limited time and budget.