UX Crash Course: Information Architecture

Information architecture is all the organizational design decisions that make a user interface easy to use and understand. It’s why good design is much more than aesthetics.

Often, people make the mistake of referring to design as simply “window dressing” or “applying a coat of paint.” More than once, I’ve heard it suggested that the structure or function of a webpage should be built out by developers first, then designers can come in later to “make it pretty.” While a good design does make websites and applications more attractive and give them a professional finish, that’s not the only thing it does—not even close! When we’re talking about the stuff that happens “behind the scenes” in an effective design, we’re often talking about the information architecture (IA).

Information architecture refers to all the organizational and labeling design decisions that make a user interface easy to use and understand. Think about page layouts, task workflows, navigation, instructions, labels and so much more. Those aspects don’t have anything to do with color or typography, but they’re still a crucial aspect of designing a user interface. It has been said that good design is invisible: this is especially true when it comes to IA design.

Designing Interfaces: Patterns for Effective Interaction Design compares the IA of a website or application to the work of a talented customer service representative. It might feel like completing a task through an online portal removes the “human aspect” of the interaction—but in a well-designed interface that human touch is still there, ingrained in the design.

Good information architecture will:

• anticipate the user’s needs
• offer information while considering the user’s level of understanding and point of view
• clearly communicate next steps
• always keep the user appraised of what’s happening

Think about your website like a helpful hotel concierge: supporting your users throughout their stay, making sure they’re comfortable and providing anything they need in order to do their jobs well. And, of course, the best concierges are prepared to accommodate a request or solve a problem before the user even has to ask for it.

This is all feeling a little abstract and metaphorical, so let’s talk about some actual implementation. 

• Anticipating the user’s needs might look like using your user research to inform page layout, surfacing the most-used features to the top of the page or high-level menus for easy access.
• Offering information at the user’s level and POV could mean tailoring your copy to be free of industry-specific jargon and acronyms, or using infographics to communicate complex data.
• Perhaps your layout clearly communicates next steps because you’ve made use of a wizard-style form or multi-page progress stepper, ensuring the user is aware of what percentage of the current task they’ve completed—and how much is left to go.
• Keeping the user appraised of what’s happening may look like notifications, status updates, changelogs, loading indicators or progress bars.

Design is more than just how an element looks—it’s also the decision to use that element instead of a different one, where it’s placed on the page and what comes before and after it.

For example, how do you choose between a progress bar or a loading animation? Which makes the most sense for the current task? Do we have enough information to offer the user an accurate progress bar? If we display a progress bar that’s fake, we could damage our reputation and the user’s trust. On the other hand, if we display an ambiguous loading animation that takes too long, the user could worry that the application has crashed and prematurely close the page. If we choose a progress bar, do we want to also include text about which process is currently running? If we choose a loading animation, should it be lighthearted and fun or more simple and serious? What are we communicating to the user with each choice, and are we sure that’s the message we want them to take away from the design?

Each element that we put on the page, regardless of how its styled, should communicate something important to the user and help them complete their tasks more effectively. When we design a user interface, it’s our job to consider all those aspects and try our best to create a digital space that’s thoughtful, organized and intuitive.

That means starting with a strong foundation of IA—one informed by data, content and user research—before worrying about the more presentational aspects of the layout. Comparatively, it’s a lot easier to change a heading style or swap out some colors than it is to rework the website page structure, so save yourself some headache by making sure IA is in good shape first and foremost.

It’s tempting to jump ahead and start throwing some styling in there—it makes a design look a lot more finished when all the branding is applied—but it also makes it harder to focus on those core elements. Build a solid structure with information architecture, then expand from there: your users will thank you!