In his interactive presentation, Peter Morville states that “In the 1990s, the rise of the Internet produced a world-wide problem: websites without a plan.”
Morville goes on to suggest that this lack of planning on the front end leads to three fundamental problems:
- Usability and Findability Disasters
- Content Management Nightmares
- Cost Redesigns
How, then, do you ensure that the content and information you host on your website is usable, findable, well-managed, and organized thoughtfully?
We recommend prioritizing information architecture.
In creating a website or application that prioritizes user experience, you’re turning the user’s complex mental model into a live, interactive information system. It’s a complicated – even daunting – task.
We define Information Architecture as “the process of structuring a website’s information, resources, and content for usability,” but in practice, IA is both an art and a science with dozens of possible approaches. So, what are the specifics of this web design discipline? How is it best approached?
Read below for several definitions and approaches to this important craft.
Common Information Architecture Terminology
Breadcrumbs are a navigation component that displays where the user is within the site. It can help the user determine their current level in the website or the pages related to the one they are currently visiting.
Card sorting is a method for getting user feedback on a site’s architecture. Testers are given a stack of cards with the topics of different pages and content modules on them. The testers sort them into piles that make sense to them and come up with labels for these piles. This method helps determine the most intuitive arrangement of site levels and categories.
Cognitive load is a psychological principle that describes the amount of mental effort needed to complete a task. Cognitive overload occurs with the task requires too much working memory or mental effort. When site interactions, directions, or navigations are too complicated, they can create cognitive overload for the user, who then makes inefficient or incorrect decisions (or gets frustrated and leaves).
Information hierarchy outlines the relative importance of information on a page. Ideally, information hierarchy should correlate with visual hierarchy, so that more important information is more prominent on the page.
Interaction design is the design of what happens when a user interacts with a product. An “interaction” could be a click, swipe, text entry, or other gesture. Interaction design aims to create a consistent, intuitive, efficient, and pleasing response from website objects as they are interacted with.
An interaction model is the relationship behind all parts and interactions within an application. It defines how objects relate to actions, what each interaction means, and how users get from place to place within an application.
Interactive design is a design philosophy that advocates for meaningful, responsive, and personal experiences with software.
A level is a layer within the site’s architecture. The top level represents the most important funnels of information, but there are often 1-3 additional layers or “levels” of information below the top level.
Navigation refers to the structure and process of moving through the information resources on a website. A website’s navigational elements include global (site-wide), local (available in specific sections), supplemental (separate from the main navigation), and contextual (available based on the user’s path).
Object-Orient UX (OOUX) is an approach to design that considers all parts of an interface as objects the user can interact with to complete their goals.
A path is as simple as it sounds – the path a user travels to reach a specific location within the site.
Process flow considers movement through the application from the perspective of a single process or task. It starts at the point of entry and describes the intermediate steps of the process, through to completion of the process.
A sitemap is typically a diagram that shows the structure of the site. It lists the name of each webpage, with lines or arrows showing which other pages it is linked to. More from Wikipedia
Related to process flow, Swim Lines are a diagram that visualizes the aforementioned component of IA. Each process or subprocess is placed in its own lane, along with the sequential steps needed to accomplish that process. Arrows are added to show how steps in a subprocess are related to steps of other subprocesses.
A use case is a condition that is triggered by a specific set of user or system actions. The use case often defines the actions that create the condition, along with the expected software behavior when the condition is triggered.
A user flow is a set of steps (or screens) users must move through to accomplish a goal within an application. The smoother the flow, the more likely the user is to have a positive experience and complete the goal; researchers attempt to streamline movement within an application to provide better flow.
Visual hierarchy indicates the hierarchical importance of elements on the page. An element may be higher in the hierarchy if it is larger, more colorful, or placed higher on the page. Elements that include motion also catch the eye, as do images. Ideally, items with greater visual hierarchy should also be the most important elements of the page, content-wise.
Want to Learn More about Information Architecture?
UX is an incredibly broad field, and Information Architecture is one practice (among many) related to it. This is not to diminish IA, only to indicate how diverse the field of UX is.
Entire professional tracks are devoted to the craft of Information Architecture – Amazon, Microsoft, Google, and other tech giants employe Information Architects full time – so the above definitions are just a basic introduction, and further exploration is warranted.
If you’re interested in learning more about this deep, dynamic field of UX, follow this link to our whitepaper on Methods of Information Architecture.