Web Design Strategy Part 3: Information Architecture
Intro to information architecture
People visit a website to accomplish a goal. Whether they want to read the news, find the right product, or buy a ticket to an upcoming show, they expect to find what they need with minimal effort. When a site's information architecture (IA) has been skillfully constructed, it's easier to create such an experience. In the same way that design depends on the end user and the client's objectives, the layout and content of a site are shaped by who it’s meant for, why they’re there, and what you’re working with.
Strategy
Any time we put pixels to the page, we need to consider who the site is for. Understanding who the audience is and what drives them—in the moment and at their core—can be the difference between helping them get what they need and losing them to a competitor.
For more in-depth information on research and strategy, check out this guide on strategic design.
Raw materials
Once you know who you’re designing for and what they need, take stock of everything you’re working with. If you're redesigning a site, you may have a wealth of information to draw from. Otherwise, discuss content creation with your client and factor this into the project timeline.
When you have all of the content, it’s helpful to break everything out into lists—from titles, tags, keywords, and descriptions, to images, audio, and video. While this process takes time, it will save you from spinning your wheels in the long run. It’s easier to iterate on a list than on a design.
Tools and techniques
Now that we’ve established the IA building blocks, let’s look at how information architects organize a site to build a meaningful experience.
Organization
Raw information, such as long chunks of text, weighs on the mind. To reduce cognitive load, information needs to be sorted. Organization systems divvy up the information on a page to help people orient themselves on a site. This helps them know where to go next.
There are three primary organization systems: hierarchical, sequential, and matrix.
Hierarchical
Creating a visual hierarchy helps people understand the importance of every element they see. Size, color, contrast, and alignment affect the way they perceive the page. Most sites use some form of hierarchy to separate content.
Sequential
Organizing information sequentially creates a path through content. The person on the site goes through a process, step-by-step, to accomplish what brought them to the site in the first place. For instance, the sequential system of a retail website will lead people from product discovery to checkout.
Matrix
In contrast to the relatively guided experience of a sequential system, matrices let people choose how they want to see content. Examples of matrices include filtering by date, topic, or author.
Other systems
Hierarchical, sequential, and matrix systems are the most common organization systems, but content can be structured in many ways. For instance, it can be organized alphabetically, chronologically, by topic, or by audience. The best way to organize a site will depend on who's visiting and why they're there.
Navigation
Navigation is how people explore a site. Once you have the content mapped, it's time to give people the tools they need to get to their destination. These consist of visual cues and search elements.
Labeling
In many situations, less content is more effective than a deluge. That's why labels exist. They're shorthand for an understanding that doesn't need to be explicitly stated.
To continue with the metaphor of a map, think of elements on a page as landmarks. A contact button represents a state. Its cities and towns are forms, phone numbers, and a customer support email address. Since the user understands this, those bits of information don't have to be on the page.
Some clients may prefer to add more information instead of simplifying. Whenever possible, help clients trim the fat and walk them through your logic. They'll thank you when they see the design and ensuing conversion metrics.
Searching systems
No map can display every part of the landscape. Think of search elements as the locals who can point people in the right direction. Search systems are great ways to manage a high volume of information.
An empty search bar can be as intimidating as a blank page. A search that draws a blank can be very frustrating. Filters and suggestions are excellent ways to nudge people towards their destination.
It’s also increasingly important to optimize sites for SEO and voice search. Check out our guide on SEO for voice devices.
Wireframes
At this stage, everything is labeled and organized. We see several ways to help move through the site. It’s time to see how the pieces fit together. Create a narrative that moves people on the site towards a solution they came for. Wireframe and iterate through different flows until you have a blueprint of your UX.
What’s the difference between IA and UX?
It may seem like IA is just another term for user experience (UX) design. While there is overlap, IA and UX are two distinct practices.
IA is about organization. It's a structure for UX designers to build with and refine. Where IA excludes everything but the user’s goals, UX focuses on their behavior and takes a more psychological approach to optimize the interaction model.
IA in practice
Squarespace
Quickly after landing on Squarespace.com, people know they can build, manage, and scale their presence on the web. This is because the message is built into the structure of the site.
Organization and navigation
The most prominent element on the page is a headline: Make it. This transitions into a carousel that takes an image from the page to demonstrate the platform in action. Copy succinctly describes the offering and leads to an action-driving button. The content is structured for the audience and the context in which they visit the site.
Next, they need to find a template. Squarespace offers two sequential paths there, and gives the option of search (with suggestions and guidance through layout, pages, fonts and images) and a structured option to jump straight to templates. The result is that, in a few simple steps, a person goes from looking for a solution to experiencing one directly.
People come to Squarespace when they want a platform that gives them the same abilities as larger companies with teams of designers and developers. Clean IA helps Squarespace guide new users to their goals.
Acuity Scheduling
Compare Squarespace’s site with Acuity Scheduling’s. There’s overlap in the audience, but the sites are completely different.
Organization and navigation
When people visit Squarespace’s site, they're at the beginning of a journey. They may only have an awesome idea, but the site shows them how they can take it to the next level.
When people visit Acuity Scheduling, they've taken the leap. Their idea has become a reality and they're juggling a dozen competing interests. They're running a business and they need to stay organized. The Acuity homepage doesn’t skip a beat.
The most prominent element on the page is a headline that resonates with anyone busy running a company: All you need to do is show up at the right time. Since time is of the essence, the explanatory content quickly explains what Acuity Scheduling is and drives to a fast experience.
Once logged in, the site gets people up and running. Where Squarespace incorporates search into its structure, Acuity Scheduling leans into sequencing. The experience revolves around efficiency, so the site offers guidance with setting up calendar availability, creating appointment types, customizing a client’s scheduling page, and syncing with other calendars. The result is a quick basic setup.
Bringing it all together
IA is an integral part of the design process. Incorporating it into your practice can help you think about who your visitors are, why they’re there, and what matters to them. When a site is structured for its audience, it's easier to solve their problems and turn templates into turnkey builds.
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
