Information architecture

Information architecture ensures that content fits its context.

Bring order to chaos

Label and organize information environments to help users find and recall their content with ease.

Four outlined circles building in, the top left circle filling in with orange, the bottom right circle filling in with black, and a black line connecting them all in a “z” pattern Four outlined circles building in, the top left circle filling in with orange, the bottom right circle filling in with black, and a black line connecting them all in a “z” pattern

Clarity

Make information easy to find and understand. Creating clarity involves structuring and sequencing data with controlled vocabularies. Each node in our digital places has a logical location, just as each book in a library has a designated space. Appreciation of the logic, combined with the understanding that humans are driven by emotion, enables the information architecture to frame a design solution and make the complex obvious.

Information architects work with users’ existing mental models to adapt and clarify the structures of digital information systems so that content is more findable. Because humans process concepts with fuzzy logic, their mental models are not always based on fact. Clear association to an existing mental model helps a user feel like a new experience is familiar.

By anticipating what users will want to do, information architects focus on what to reveal and conceal. They determine the categorization and presentation of information. They consider the ways in which people engage with their content on a granular level, asking how users search, skim, browse, sort and filter data.

Structure

Structure organizes information into major categories and grouping mechanisms that reflect the elastic nature of living content. Design for flexibility through site maps, navigation flows and content inventories.

Avoid structures that are too shallow or too deep. Hierarchy is a primary mechanism for helping users find detailed content. Provide distinct choices in your primary structures to help users feel confident in their progress finding deeper content.

The five cardinal organization schemes can be remembered by using the mnemonic LATCH: location, alphanumeric, time, category and hierarchy. Use the scheme that makes the most sense for your users, their goals and the domain.

Abstract graphic of matrix-like information structure Abstract graphic of matrix-like information structure

Matrix-like structure (i.e. messages, people)

Abstract graphic of sequential information structure Abstract graphic of sequential information structure

Sequential structure (i.e. checkout flow)

Wayfinding

Wayfinding is a navigation system to provide direction and orient a user in place. Within places, we make our users feel comfortable and supply them with landmarks and breadcrumbs to guide them on their journey. Using the metaphor of physical space within a hierarchy is powerful when designing digital navigation. Use terminology in the navigation that makes sense to users and aligns with their mental models.

Animation of a mock-up of a mobile screen to showing Landmarks, Breadcrumbs, and Placemaking Animation of a mock-up of a mobile screen to showing Landmarks, Breadcrumbs, and Placemaking

The navigation menu is a landmark that helps orient people. It serves as a beacon to help people find their way no matter their current location.

Breadcrumbs confirm where users are located within the application hierarchy.

Placemaking establishes how people live inside the system: what they can control, what they have done and what they can do later.

Consistency

When creating wayfinding models, consistency drive familiarity for the user. Taxonomies and ontologies help to frame classifications, dependent on who is talking, where they are talking, when they are talking and what they are talking about. Words mean different things to different people, so it’s important that we speak the same language. Consider users’ mental models when creating labels, tags and indices, and keep that terminology uniform. The best way to figure out what type of language to use is through research and testing.

Depending on the audience, the way users think about community, security or recognition can differ.

For example, the word “people” might refer to a specific group of individuals, humanity as a whole, or an individual person.

Three icons, a heart, a star, and a ribbon, all of which might signify approval Three icons, a heart, a star, and a ribbon, all of which might signify approval
Three icons, all showing people, all of which might signify community Three icons, all showing people, all of which might signify community
Three icons, a key and two locks, all of which might signify security Three icons, a key and two locks, all of which might signify security

Reduction

Reduction helps users make sense of lots of information by clearing the clutter. Layout principles such as alignment, placement and hierarchy can help you display content in a digestible format. Our brains can process only a handful of items at once, so that handful of information must be meaningful to the user. Reduction can also build trust. When users are presented with a catalog of options, they must feel confident that the choice they make is the correct choice for the task at hand.

An accordion drop-down with the top portion opened and the bottom two closed An accordion drop-down with the top portion opened and the bottom two closed

An accordion structure helps users quickly scan options in a list and access more information at their convenience. The content has not been deleted but reduced to prevent cognitive overload.

Correlation

Correlation is a type of relationship that recommends parallel information to users. Help people by showing them what products exist in a platform ensures product awareness and discoverability. Coupling information in meaningful ways outside the traditional parent-child classification enables users to pleasantly experience guided serendipity.

Three shapes, a square, a triangle, and a circle, all of which are the same shade of orange Three shapes, a square, a triangle, and a circle, all of which are the same shade of orange
Four squares, all in different shades of orange Four squares, all in different shades of orange

In the first example, color is the correlating factor that unites the differing shapes. In the second illustration, shape supports the horizontal grouping.

Back to top