Balancing Cognitive Load and Discoverability

When we're designing an app's information architecture, whether we're aware of it or now, we're trying to draw a line between discoverability of options and cognitive load.

Intersected line charts showing the tradeoff between cognitive load and discoverability

When we’re designing an app’s information architecture, whether we’re aware of it or now, we draw a line between the discoverability of options and cognitive load.

In order words, we’re thinking about the information density of the product.

Less is usually more

I’ve spoken about reducing cognitive load in the past and how it helps user interfaces seem easier to use.

Yet, as with all things in life though, focusing exclusively on reducing the number of options comes with a tradeoff.

Keeping cognitive load to a minimum can get in the way of discoverability.

Information Architecture & Cognitive Load

An abundance of options demands higher mental effort and is traditionally regarded as bad design.

High cognitive load comes primarily from a high number of options arranged in a flat-hierarchy architecture, also commonly known as index page architecture.

It’s one of the most common information architecture patterns on the web.

A series of squares aligned horizontally, representing a flat hierarchy of information - by Ed Orozco

Taken to an extreme, can result in things like the overwhelming interfaces from the 90s and early 2000s.

A old screenshot of Internet Explorer with many nav bars active.

Low cognitive load is typically achieved by hiding away non-essential information, which results in one of the various types of staggered-hierarchy architecture.

Examples of staggered architecture are:

A lot has been written about these types of architecture. Feel free to review the links at the bottom of the article to learn more.

Squares aligned in a hierarchical manner representing a staggered information architecture —by Ed Orozco

Staggered vs Flat Information Hierarchies

Let’s take a look at the two architectural approaches and their tradeoffs more in detail.

A comparison of flat vs staggered information architecture models — by Ed Orozco

The case for a flat hierarchy

If we go for a completely flat hierarchy we risk overwhelming the user with too many options.

Hick’s law dictates that too many options will impair the user’s ability to make a choice. It induces decision paralysis.

A flat hierarchy, however, exposes the user to many features as they lay bare. To an extent, it helps with discoverability as long as the amount of information doesn’t become overwhelming.

The case for a staggered hierarchy

If we minimize the number of options — through progressive disclosure techniques, for example — we reduce cognitive load. That’s good.

But a careless application of progressive disclosure techniques comes at a cost. It increases the number of layers in the architecture, making it more complex.

Multi-layered information architectures force the user to learn and remember under which menu each option might be.

Solution — What to do instead

Know thy customer

If you’ve been designing for a while this won’t surprise you at all. Knowing your customer can help you determine a couple of key things:

  1. How your customer reacts to varying levels of information density
  2. What elements in your product are most important to them
  3. Which navigation and organization patterns are they familiar with

Conclusion — When to use which

Understanding the type of customer your serving can help you determine the best approach.

Sophisticated users —with pre-existing, compatible conceptual models— may deal well with higher levels of information density.

A broader audience might benefit from higher levels of progressive disclosure to gradually ease them into greater numbers of options.

Regardless of your approach, make sure to spend time creating a hierarchy of information based on your user's workflows. Exercises such as card sorting can be useful for this.

Lastly, it's always smart to adhere to widely common patterns when possible. E.g. Changing my password should be under either “My Account” or “Settings”. Do not reinvent the wheel unless you have a good reason.

Intersected line charts showing the tradeoff between cognitive load and discoverability- by Ed Orozco

Balancing cognitive load and information density requires a lot of skill and deep knowledge of your customer but the rewards can more than make up for the extra effort ✌️

Further reading

  1. https://www.altexsoft.com/blog/uxdesign/information-architecture/
  2. https://www.webfx.com/blog/web-design/information-architecture-101-techniques-and-best-practices/
  3. https://uxplanet.org/information-architecture-effective-techniques-for-designers-3c993956b1e1
  4. https://www.usability.gov/what-and-why/information-architecture.html
  5. https://blog.tubikstudio.com/information-architecture-basics-for-designers/
  6. https://www.nngroup.com/articles/progressive-disclosure/
  7. http://edutechwiki.unige.ch/en/Information_architecture#Hub-and-spoke_.2F_Daisy

Subscribe to Ed Orozco

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe