Sam Girma doesn’t care for the phrase “information architecture.” For her, it’s an unnecessarily confusing description of what it typically conveys: a site map or user flow.
“If you think of a museum, there’s the sidewalk, and then the entrance, and then the lobby, and then floor one, and the route to floor two, or whatever that experience is. So, in that sense, sure — architecture,” Girma, a designer at the UX research and design firm Blink, said. “But when you look at the document, it’s this weird mappy thing, not architecture.”
To be fair, Girma’s objection to the term may be rooted in her personal experience. She trained as an architect at University of California–Los Angeles. Still, the gauziness of information architecture — a mental model to describe the organization and sequence of tasks users perform in a website or app — appears to be more than just a semantic concern.
Naema Baskanderi, a senior product manager at the online auto marketplace Adesa, relates information architecture to a library.
“Like a librarian, [the designer] knows where everything belongs,” she said.
For Clarence Huang, a software engineer at Intuit, information architecture is a “road through the wilderness. You define the road the user takes and constrain them in some ways as you build these paths.”
[Information architecture is a] road through the wilderness. You define the road the user takes and constrain them in some ways as you build these paths.”
To Lauralee Sheehan, founder of the Toronto-based design agency Digital 55, information architecture has the quality of a musical score, “a sequence of time-based codes.”
The metaphors designers and engineers use to describe information architecture are not just fanciful descriptions. They reflect the diversity of forms a website or app can take and important differences in how designers think about organizing the flow of information within and across pages.
Opinions vary as to the best models to describe information architecture, but there is wide consensus in the design community that a thoughtful approach can make a significant difference to the performance and usability of a digital product.
“You’re not only thinking about the point-A-to-point-B experience, you’re thinking about behaviors, you’re thinking about objectives and the different modalities that go into every digital site. Without that, you’d be lost,” Sheehan said. “The frameworks aren’t sexy, but they’re super important.”
6 Benefits of Well-Designed Information Architecture
- It determines release prioritization. Sectioning off areas of a site map helps product teams prioritize and budget key aspects of a build.
- It improves user engagement and satisfaction. Research by Nielsen Norman Group shows that website visitors often leave after 10 to 20 seconds. A clear value proposition can keep users on the page — and your site — longer.
- It increases conversion. A site map can serve as a diagnostic tool to pinpoint areas of a product that are functioning well or poorly.
- It reduces the need for support documentation. When customers can find what they’re looking for quickly, it reduces customer support tickets and the need for extensive help documentation.
- It serves as a roadmap for user-interface development and software engineering. User flows can be quickly adapted into later aspects of a build.
- It future-proofs digital builds. A site map validates the information progression in a new site or redesign.
Designing a Site Plan
Typically, site map development is an iterative process led by a senior-level UX designer or product owner. The map itself can be created in programs like Figma, Invision Freehand, Adobe XD, Lucid Charts — even Microsoft Excel. The U.K. and U.S. governments offer templates, and UX research organizations like the Nielsen Norman Group offer guidance, but typically site creation happens organically.
For existing sites under redevelopment, an initial audit helps define content and layout priorities, Baskanderi said.
Many websites have the same core elements, she added — a landing page, a search bar, a menu, an account creation flow — but the arrangement of these elements and where and when users encounter them can have a major effect on a user’s experience, and, ultimately, whether they stick around.
If you’re thinking about e-commerce, hopefully, if you make it easier for them to find what they’re looking for, they’ll buy what they’re looking for.”
Colors or positions on a site map denote the hierarchy of ideas, and connecting lines plot the experience of users from page to page. Dashed lines indicate navigational possibilities — for example, the onboarding experience a new user would go through, but an existing user would not.
The shopping experience on Sears’ e-commerce site, for instance, is the product of a thoughtfully rendered site map, Baskanderi told me. A user considering buying a refrigerator will see top-level categories arranged by product type: french door, bottom freezer and so on.
“So it makes it easier for the user to find what they’re looking for faster, which increases customer satisfaction, ” she said. “And, if you’re thinking about e-commerce, hopefully if you make it easier for them to find what they’re looking for, they’ll buy what they’re looking for.”
Personas, Card Sorting and Information Scent
Before creating a site map, designers should consider the goals of the product and the environment and motivations of its users. A commuter reading a mobile screen on a subway train, for example, has a far different experience than a Kindle reader lying in bed at night. These considerations inform navigational pathways.
“This is pretty standard practice,” Girma told me. “You figure out different flows from your personas, and what their goals are and the tasks they need to perform to get to their goals.”
Customer interviews and online card-sorting exercises — in which test users group products by their relationships — help validate assumptions about user habits and inclinations. Are shoes and bags appropriately grouped together as accessories? Should the categories “men” and “women” take precedent to apparel type? Card-sorting exercises help answer these questions.
An idea known as information scent conceives of users as predators in search of food: If you give them the right cues at the right time, they will sniff out what they’re looking for, even if this requires considerable scrolling. If the path does not lead to “food,” however, they’ll give up. Good design can boost engagement by plotting the sequence of components and interactions in a way that rewards users at the right time.
You don’t just go and make a website from scratch; you start diagramming and drawing out placeholders.”
These modalities get fairly sophisticated. Intuit’s design team, for example, uses design systems, or asset libraries, to define consistent standards for motion and sound effects, common interactions and navigational patterns — even style guidelines for the tone and voice of labels and messages.
Girma compares the stepwise progression of ideas involved in information architecture — which can include tree-like flowmaps, task flows, user flows and site maps — to the iterative process of drafting an essay.
“You don’t just go and make a website from scratch; you start diagramming and drawing out placeholders and general items: ‘This is what it could be; this is what I think happens.’ And then you can start notating the scrolls or the actual user interface, the behavior of things,” she said.
Front-Loading the Design Process
Doing the front-end research to create a site map can seem like extra work, especially in a deadline-driven environment, but it is important not to rush it.
“As a designer, you’re like, ‘Oh my god, I want to pick colors and fonts.’ You want to get into the making of the thing,” Girma said. “But this is one of the easier ways to make educated decisions that inform your design efforts, ultimately. You should do this to answer the ‘for who’ and the ‘why’ before you jump into making the thing.”
In a typical scenario, as sections of a design model take shape and evolve, multiple stakeholders — including engineers, content writers, customer support teams and executives — are invited into the process. This tends to occur in phases determined by the design lead.
In addition to getting everyone on the same page, a collaborative approach to information architecture can help determine release prioritization, diagnosis problems that interfere with site performance and user satisfaction and reduce the need for support documentation.
Information Architecture in Practice
While formalized best practices in information architecture are still emerging, designers and engineers are amassing anecdotal evidence of effective information architecture strategies. Below are two examples that illustrate the value of unconventional approaches to navigation.
Depth-Based Navigation Leads to the Right Kind of Scrolling
Digital 55 recently developed a set of web-based learning experiences for Athabaskan University in Canada, including a course for leaders navigating the pandemic and a course on allyship and inclusion.
Persona research baked into the design process has helped the team discern that its audience is fairly tech savvy.
“They’ve been around; they’re on social,” Sheehan said. “They know how to navigate Google. They’re not going to get lost.”
Based on this finding, the design team steered away from a traditional menu-based navigational structure in favor of what Sheehan calls, “depth-based navigation.” While a traditional rule of thumb in UX design is to lead users to their destinations in no more than three clicks, the mantra is losing relevance as users become more accustomed to clicking through multi-layered menus on sites like Spotify and Netflix.
Depth-based scrolling allows new information to enter the user’s field of vision horizontally.
“Like how your playlist pops up on Spotify,” Sheehan explained. “You haven’t really changed where you are, but the environment has changed. That’s a really interesting thing we’re really playing around with.”
You don’t want to put a project at risk. But you do want to stay ahead of the curve in terms of how people are interacting online.”
To help visualize different elements on a site map, Digital 55 divides modalities into four main buckets: static content, interactive user actions, film and micro-animations, and branching paths. Flows are designed to structure these elements in a logical progression. A typical landing page module might have a hero image on top, followed by a story, an interactive video demo and several case studies.
Limiting scroll time is a concern, Sheehan admitted, but, in some cases, engaging storytelling can be a more important objective than navigational speed. Sheehan calls these interactive blocks the “meat” of the navigational experience.
Certain aspects of a site-map design are more or less a given — for instance, front-end copy, a navigational menu and contact details. But it’s the gray areas where designers can take liberties based on user personas — such as inviting tech-savvy users to scroll horizontally or discover hidden menus — that help differentiate high-performing sites from also-rans.
“Sometimes with information architecture, it can be a little stifling. It seems really functionary and almost clinical,” Sheehan said. “You don’t want to put a project at risk. But you do want to stay ahead of the curve in terms of how people are interacting online.”
Site Search and Navigation Provide Alternative Paths to the Same Destination
Baskanderi has been busy in recent months. In addition to her ongoing work at Adessa, where she was involved in auditing the site map, she launched her own e-commerce site Noor & Deen, where she sells hand-engraved jewelry. Created using Shopify, the site is a good illustration of how cross-referencing items in visual navigation can be a useful tool, she told me.
Beneath the hero image and a Valentine’s Day call-out, the jewelry collection is represented in six image tiles arranged in a grid. A customer looking for necklaces will find them not only in the “Necklaces” tile, but also in the tile “Inspired by Faith.”
“I put it in two places, because I want the customer to be able to find it,” Baskanderi told me. “Where they look depends on their mental model and what they’re looking for.”
Carrie Webster, a Sydney-based UX consultant writing for Smashing Magazine, cautions that too many options can lead to “choice deferral,” where a user chooses not to make a decision at all.
I put [a jewelry link] in two places, because I want the customer to be able to find it. Where they look depends on their mental model and what they’re looking for.”
But, on Noor & Deen’s site, the choices are limited, and while some people might be searching for a necklace, others might be seeking a piece of jewelry that represents their belief system or that of whomever they’re buying for. Providing both options gives customers the best experience, Baskanderi said.
The larger point may be that users are idiosyncratic in their preferences, and site design needs to be responsive to these differences. While duplication of information is generally considered a hallmark of poor design, dual navigation is often an asset.
“In order to provide the best user experience for your customers,” Webster writes, “you may need to consider integrating a site search, in conjunction with an effective and well-designed site navigation, if your website has a complex structure and large amounts of information.”
In the article, she notes several useful navigational examples: a “wizard-style” application form; a search function that uses metatags to cross-reference synonymous results too cumbersome to list; a visual-style search function akin to Pinterest’s; and the “megamenu” categorization of Politico’s top-level menu.
Ultimately, you want to keep users focused on the task at hand and lead them where they want to go. You’ve got, maybe, 10 to 20 seconds.
