Cognitive Principles Driving Design

Daniel O’Neil reflects on the different kinds of cognitive approaches people use when confronted with certain kinds of information.

Optimizing User Experience with Cognitive Characteristics

Optimizing User Experience with Cognitive Characteristics

In Find Your Information Sweet Spot I talked about finding your site's information sweet spot as a way to drive the possible best user experience. I argued that an essential way to plan your IA approach is by talking about the information processing space where your site resides. The space is made up of two factors: Information density – The amount of information that users need to process. Concision – The number of elements used or needed to complete a task.

The diagram shows how these characteristics cluster, with implicit cognitive characteristics boxed in red. Basically these describe the kind of cognitive approaches people use when confronted with certain kinds of information. Concision can be seen as a continuum between Immediate and Emergent Understanding. Density covers two major topics:

  • How much needs to be remembered (Internalized vs. Externalized)

  • Whether it is process more as a collection of dense symbols or expressed through traditional language (iconic vs. linguistic).

Immediate vs. Emergent Understanding

Despite the internet's reputation for giving us "instant" access to information, in fact information is absorbed at different rates based on the issue at hand, regardless of how it's delivered. Some information allows us to grasp things immediately; others require us to look at multiple spaces or information contexts to get understanding.

Internalized vs. Externalized

This scale contrasts how much of the model the person has to carry in their mind to do the work. The internet has allowed us to "externalize" huge swaths of information because they are available as a link or a reference, but some systems require people to memorize or internalize parts of the model even when the information is digitally available. This is often the case when the user is expecting to make a decision quickly or when the problem set is based on a complex, extensive model.

Iconic vs. Linguistic

"Iconic" here refers to how far the information involved diverges from traditional use of language. By "traditional" I am not just referring to images or signifiers, but also language used in unusual ways. Very complicated ideas can be expressed linguistically, but they are not, generally speaking, high density.Consider, for example, how a three line section of code in a computer program may reference numerous packages and objects that are not immediately obvious from the use of any of the phrases or words used in the code. This high density makes the sections of code more iconic than linguistic, because the block represents a highly dense, interconnected set of information elements that are not immediately understood from the words alone.

Information Design To User Experience Design

Information Sweet Spot, by Quadrant and design principle

Information Sweet Spot, by Quadrant and design principle

If we extend the understanding of the cognitive characteristics forward into design, certain principles, boxed in blue, emerge for for each quadrant. Design principles describe major elements that will have a positive impact on interfaces that fit into any given quadrant.

Visual Design Fundamentals

A key part of the concise, high density environment is that visual design is critical to rapid information processing for experts. Other interfaces can accomodate 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 exerperience.Dashboards are interesting in this regard, because often the layout of the dashboard is managed by the user, but it remains important that visual distinctions between images be consistent and clear enough for quick differentiation. This is actually 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).

Single Node

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".

Rich, Transparent Taxonomy

If we are assuming that the primary skills a user has 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, a kind of information design.Given that the overwhelming majority of online content exists in this quadrant, getting a good understanding of information design - usually in the form of information architecture - is critical for effective design.

Reference Support

The biggest assumption we can make about expanded, high-density environments is that they will be beyond the ability of any individual to remember without referring to other information. However, this is different from discoverability by traversing pages like a wikipedia page. The questions a user will ask are IN CONTEXT, specifically about a task or activity in the immediate interface. The ways to support this can be through pop-up references via mouse-over, multi-window environments that allow different framing of work units, or interstitial contextual help.

What Does A "Good" Interface Look like?

Let's consider some examples of interfaces that are typical of each quadrant.

The Dashboard

dashboard-immediate-iconic-e1493315770451.png

Immediate - Quick-hit information

Iconic - Almost no words to speak of; information in tabular and chart form

Internalized - Based on a deep understanding of business structures that must be understood before using the data

Core Design Feature - Visual Design Fundamentals

The Landing Page

Landing Page: Immediate and Linguistic

Landing Page: Immediate and Linguistic

Immediate - Quick answer to the question of finding a hotel in Ann Arbor

Linguistic - Based on common language used for lodging and scheduling

Externalized - The interface contains almost all the information needed to make a decision, including calendars, room availability, etc.

Core Design Feature - Single Node 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.

The Wikipedia Page

Wikipedia: Emergent and Linguistic

Wikipedia: Emergent and Linguistic

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

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

Externalized - All the information is available as a link; very little informaito needs to be memorized or retained directly.

Core Design Feature - Rich, Transparent TaxonomyThe 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 product results page.

The Eclipse IDE (Integrated Development Environment)

The IDE: Iconic and Emergent

The IDE: Iconic and Emergent

Emergent - Development efforts require multiple touchpoints, review of packages, etc.

Iconic - Combination of symbols and embedded meaning in words in the code

Internalized - Understanding of the deep structures of the programming language is essential for using the IDE.

Core Design Feature - Reference Support The Eclipse IDE is probably the most aggressively reference and context-help heavy IDE, with symbolic support in the form of multi-window reference guides for libraries, contextual cues for individual methods, variables, and classes, easy links to apis, and links to the program's library structure. Speaking from personal experience, getting everything you need to get started in Eclipse can be daunting, but once you start it becomes incredibly powerful, mostly because any immediate question can be answered without leaving the development context.