Adobe Creative Cloud

January 14, 2016 /UX/UI Design /

Information Architecture: The Scaffold of Good UX

Information architecture is fundamentally about organizing information and providing structure in a way that makes sense. As a field, information architecture emerged from the earlier days of the web and enterprise software – where computer infrastructures and data layers needed wrangling into manageable shape. These days, IA is often less of it’s own specific role and discipline, and more frequently part of the work that an interaction, UX or product designer will do.

Content inventory and audit

Before you undertake the sorting of information, you need to understand what information you are dealing with. A content inventory is a method for taking stock of all the content on an existing site, or the proposed content of a new site. This commonly takes the form of a spreadsheet, which catalogs the pages and types of content of the site.

A content audit takes this process a step further, by analyzing the content. This may identify content that needs to be removed, archived, updated or added.

Conducting a content audit can be a time consuming and tedious task, particularly for large sites. However, it is an invaluable tool for understanding the raw material of the experience. In some cases, a sample or partial content audit will suffice, especially where there is lots of duplication or similar content across the site.

Analytics are helpful in supporting judgement calls regarding content. In many cases, you will find that a small percentage of the sites pages are generating the most traffic.

Open and closed card sorting are methods for gaining insight into how users categorize information. The basic methodology involves writing down content elements or topics on cards, and asking people (usually representative users) to sort them into categories or buckets. In an open card sort, there are no predefined categories, and users are asked to come up with the category names for their groupings. In a closed card sort, there are a series of defined buckets, which for example might represent navigation items. Users then sort content into these categories based on what they would expect to find.

Card sorting can be conducted on paper or digitally, and in person or remotely. Digital tools such as Optimal Sort have made card sorting readily accessible. The disadvantage of doing remote, unmoderated card sorting studies are that the research team does not have an opportunity to ask for more in depth insight into a participant’s thought process. However, the cost, time, and ease of access mean that remote digital studies are a popular option.

When conducting card sorting, it can be useful to include an ‘other’ category, or one for terms that are unclear or that participants didn’t understand. Adding this flexibility will mean participants are less inclined to slot information they don’t understand into buckets because they feel obliged to.

Card sorting provides input into a desirable and understandable structure for the site which matches user’s mental models and expectations. Look for the patterns that emerge as more people sort the information – these will inform potential navigation structures, or identify areas that need relabeling or rethinking.

Site mapping

sitemap

Sitemaps are diagrams for communicating the intended information architecture of the site or software. Sitemaps come in many formats, but commonly they include a comprehensive list of pages arranged in a hierarchical way. The site map should detail primary level navigation, and show how pages are linked together. Some site maps use a key or legend to describe how to interpret different aspects of the diagram.

A good technique is to use post-it notes and a whiteboard to rough out the sitemap before committing it to a digital format. This allows for components to be easily moved around as well as being a great way to work collaboratively.

Some common IA models

The sitemap will describe the underlying structure of the site or app. The way in which pages are linked and the navigation is grouped form the IA model.

fuschia

The Austin Centre for Design website is an example of a hierarchical tree model, using a breadcrumb to help users identify where they are in the structure.

A familiar and traditional model is the hierarchical tree. This was the standard approach to websites in the early days of the web. It is typified by horizontal primary menu bars, with secondary content. This system is suited to information heavy sites with lots of content and links. Breadcrumbs are sometimes used with this model to help the user to identify where they are. However, the rise of responsive web has meant that the hierarchical tree is no longer always fit for purpose, as it can be a challenge to design for this model on smaller screens.

communications concept: girl using a digital generated smart phone. All screen graphics are made up.

Most smartphone home screens are an example of an overarching hub and spoke information architecture.

Native mobile apps have lead to more examples of a hub and spoke model – with a central page or ‘home’ screen that links to the other sections. To move between sections the user must navigate back to the home page first. This model is well suited to apps and websites which are very task focused, and do not need to robustly support browsing or exploration.

currys

The Curry’s navigation on small screen follows a nested doll pattern.

Nested doll navigation models provide users with menus and submenus that are progressively revealed on tap or swipe. This model can support deep sitemaps with many sections, especially on mobile, however movement across sections becomes more challenging. Having navigation items off screen on smaller screens can also inhibit discoverability.

itunes

The iTunes store is an example of using filtered views to deal with large amounts of information.

When dealing with large amounts of data, filtering is often utilized as an IA technique. Filtered views are an IA model often used in conjunction with others, to allow the user to sort and filter information in a way that makes sense to them.

The dashboard or bento box models is similar to the hub and spoke model in that it usually consists of a main screen. However in this case, the data contained is dynamically pulled in, leading to a customized set of components. The user then interacts with these components to reveal more information or complete tasks.

Many sites and apps use combinations of the above IA models, creating hybrid systems. Responsive design has evolved the web beyond simple hierarchical trees. This is positive, because the hierarchical tree model can get messy and deep as you keep adding to it. The constraints of smaller screens have led to a re-thinking of messy web-spaghetti!

Good information architecture practice is fundamental to providing a good user experience. The ability to survey, manipulate and organise information in a clear way that makes sense to users is crucial to today’s UXers. While information architecture as a disciple continues to evolve in response to the new technology landscape, these underlying methods and models continue to be relevant.

UX/UI Design

Join the discussion

  • By Martin Stares (The Information Artichoke) - 9:07 PM on February 11, 2016  

    In addition to these surface structures, it is important to understand the underlying information structure, namely the types of information we are dealing with, what we say about each of them, and their interrelationships. This abstraction discards all UI considerations, making it a good starting point (together with knowledge of users) for building versions for other channels (mobile, interactive voice response, augmented reality, whatever comes next). See http://theinformationartichoke.com/experiencing-architecting-toc/ for how these views complement each other.