This guide covers the fundamentals of information architecture for organizing website content from sixrevisions.com. We will look into popular IA design patterns, best practices, design techniques, and case examples.
Information Architecture Design Patterns
There are a number of different IA design patterns[1] for effective organization of website content. Understanding these IA models will help you pick the most appropriate starting point for a site’s information structure. Let us talk about five of the most common website IA patterns.
Single Page
The first pattern is the single page model. Single page sites are best suited for projects that have a very narrow focus and a limited amount of information. These could be for a single product site, such as a website for an iPhone app, or a simplepersonal contact info site.
Flat Structure
This information structure puts all the pages on the same level. Every page is just as important as every other page. This is commonly seen on brochure-style sites, where there are only a handful of pages. For larger sites with a lot more pages, the navigation flow and content findability gets unwieldy.
Index Page
A main page with subpages is probably the most commonly seen website IA pattern. This consists of a main page (we know this more commonly as a “homepage” or “front page”), which serves as a jump-off point for all the other pages. The subpages have equal importance within the hierarchy.
Strict Hierarchy Pattern
Some websites use a strict hierarchy of pages for their information design. On these sites, there will be an index page that links to subpages. Each subpage (parent page) has its own subpages (child pages). In this pattern, child pages are only linked from its parent page.
Co-Existing Hierarchies Pattern
As an alternative to the strict hierarchy, there’s also the option of co-existing hierarchies. There are still parent and child pages, but in this case, child pages may be accessible from multiple parent pages/higher-level pages. This works well if there’s a lot of overlapping information on your site.
Best Practices for Information Architecture Design
Image by Al Abut
There are a number of things you need to remember when designing the information architecture of your site. Most importantly, you need to keep the user experience at the forefront when making choices about how best to present and organize the content on your site.
Don’t Design Based on Your Own Preferences
You are not your user. As a designer, you have to remember that site visitors won’t have the same preferences as you. Think about who a “site user” really is and what they would want from the site.
Research User Needs
Researching what your users need and want is one of the most important steps in creating an effective information architecture. There are a number of ways to go about researching user needs. You could get feedback through interviews or experiment with A/B tests and other usability testing methods prior to launch (beta test phase) to see if users are able to navigate your site efficiently.
Once you know what your users actually need — rather than just your perception of what they need — you’ll be able to tailor your information architecture to best meet those needs.
Have a Clear Purpose
Every site should have a clear purpose, whether that’s to sell a product, inform people about a subject, provide entertainment and so forth. Without a clear purpose, it’s virtually impossible to create any kind of effective IA.
The way the information on a site is organized should be directly correlated to what the site’s purpose is. On a site where the end-goal is to get visitors to purchase something, the content should be set up in such a way that it funnels visitors toward that goal. On a site that’s meant to inform, the IA should lead people through the content in a way that one page builds on the last one.
You may have sub-goals within a site, requiring you to have subsets of content with different goals. That’s fine, as long as you understand how each piece of content fits in relation to the goals of a site.
Use Personas
Image by Nicolas Nova
Creating personas, a hypothetical narrative of your various website users, is another great way to figure out how best to structure the site’s content.
In its very basic form, developing personas is simply figuring out the different types of visitors to your site and then creating “real” people that fit into each of those categories. Then throughout the design process, use the people you’ve profiled as your basis for designing and testing the site’s IA. To learn more about personas, read Webcredible’s guide to personas.
Keep Site Goals in Mind
It’s important that you keep the site’s goals in mind while you’re structuring content. Pick the right IA pattern for those goals. Use goals to justify why the information structure should be the way you designed it.
Be Consistent
Consistency is central to exemplary information architectures. If eight of your nine informational pages are listed in a section, why wouldn’t you also include the ninth page there? Users expect consistency.
The same goes for how information is structured on each page. Pick a pattern and stick to it. If you deviate from that pattern, make sure you have a very good reason to do so; and make the deviation is consistent in similar cases. Inconsistencies have a tendency to confuse visitors.
Methods and Techniques for Information Architecture Design
There are a few different approaches commonly used for information architecture design. Let’s go over some of the most popular methods and techniques.
Card Sorting
Image from Manchester City Library
Card sorting is a low-cost, simple way to figure out how best to group and organize your content based on user input. Card sorting works by writing each content set or page on an index card, and then letting users sort them into groups based on how they think the content should be categorized.
There are several types of card sorting methodologies.
The basic method starts out with cards in random order and users sort them in the way they think they should be grouped. In reverse card sorting, the cards are pre-sorted into groups, and users are then given the task of rearranging them as they see fit.
Open card sorting lets users name the groups they’ve created for the cards, whileclosed card sorting will have group names in which the participant places the cards into.
Wireframes and Prototypes
Basic wireframes can do a lot more than just give us an outline of the design layout of a site. It also informs us how content will be arranged, at least on a basic level. Putting content into wireframes and prototypes gives us a good sense of how the content is arranged in relation to other content and how well our information architecture achieves our goals.
When you’re wireframing, and especially when you’re prototyping, you should be working with content that at least resembles what the final content of the site will be.
Site Maps and Outlines
Site maps are quick and easy ways to visually denote how different pages and content relate to one another. It’s an imperative step that “mocks up” how content will be arranged.
These content outlines show how all the pages on your site are grouped, what order they appear in, and the relationships between parent and child pages. This is often a simple document to prepare, and may be created after a round or two of card sorting.
For existing sites or content that must be placed in a website, a content inventory is usually the prelude to this phase.
Information Architecture Design Styles
There are two basic styles of information architecture: top-down and bottom-up. The thing that many designers must realize is that it’s useful to look at a site from both angles to devise the most effective IA. Rather than just looking at your projects from a top-down or bottom-up approach, look at it from both ends to see if there are any gaps in how things are organized.
Top-Down Architecture
Top-down architecture starts with a broad overview and understanding of the website’s strategy and goals, and creates a basic structure first. From there, content relationships are refined as the site architecture grows deeper, but it’s all viewed from the overall high-level purpose of the site.
Bottom-Up Architecture
The bottom-up architecture model looks at the detailed relationships between content first. With this kind of architecture, you might start out with user personas and how those users will be going through the site. From there, you figure out how to tie it all together, rather than looking at how it all relates first.
Information Architecture Examples
Different websites require different types of information architecture. What works best will vary based on things like how often content is updated, how much content there is, and how visitors use the site. Here are some case examples to show you how content is structured on different kinds of websites.
News Website
CNN.com is one of the biggest news sites online. They cater to over 20 million visitors a month[2]; visitors from all walks of life. Different visitors will have different goals when visiting the site and varying interests in the news they want to read.
CNN.com does a great job of highlighting the biggest and newest stories right at the top of their homepage. Considering that most people going to the website are likely wanting to see recent and breaking news to catch themselves up with the day’s events, it makes sense to give these stories prime screen real estate.
But a lot of people visiting the site will also want to see news related to a specific topic (e.g. U.S. news, technology, politics). To accommodate this, CNN has multiple content blocks lower down on the page, organized by topic. It makes it easy to find new and relevant news on the most sought-after subjects. There are also links from the top of the page for many sections, including sports, tech, health, and politics.
CNN.com manages to organize a lot of content into a relatively small space. The site’s easy to use and the information architecture is intuitive and logical.
Single Product Website
The website for Coda is one of the more elegant single-product websites out there and it’s obvious they put a lot of thought into how the information on the page is structured.
Visitors to Coda’s website are likely looking for a good web design application, and likely already know the features they want. Coda doesn’t need to educate visitors on what web design is or how IDEs work; they assume that the main persona is of a web designer who’s familiar with this type of software and how it works.
Using a tabbed slideshow UI to display content makes a lot of sense on this page, as the site’s copy isn’t particularly long. It also keeps the purchase options front and center for visitors (along with the “Get Help” link, which is likely for those who have already purchased the software or those that want more specific information)
Ecommerce Website
L.L. Bean is a huge ecommerce site, with a big inventory of products that’s aimed to a mainstream and diverse audience.
L.L. Bean breaks things down by shopper type and product category, with some overlap where it makes sense. For example, the Footwear category has its own spot on the main navigation, but it’s also included under Men’s, Women’s, and Kids’, as sub-navigation items. Doing it this way shows an understanding of how different target customers might shop. It uses hierarchies and prioritization to organize content into meaningful subsets.
Beyond the organization of their products, L.L. Bean also organizes their auxiliary pages in a logical manner.
Their site map shows just how well information is organized on the site, so be sure to check it out.
Blog
Freelance Folder is a blog aimed towards freelance workers.
The site uses the navigation tabs design pattern for the blog’s primary categories on the site (e.g. Productivity, Inspiration, How To, and so forth). There’s also a primary navigation bar for different areas of the site (e.g. forums, job board, freelancing guides, etc.).
Navigation and structure are kept simple, which enhances the usability of the site. Grouping similar content together in categories is a hallmark of blog IA design.
High-Content, User-Driven Website
Wikipedia is one of the largest websites in the world in terms of sheer number of pages. As of September 2010, there were over 3.4 million articles on the site[3]. The English-language articles alone would result in 1,439 printed volumes of 1.6 million words each. That’s seven full library stacks.
Considering the user-generated nature of Wikipedia, it’s a great feat that the site manages to have anything resembling good information architecture. But, for the most part, the site is organized in a manner that makes it easy to find content.
The difficulty of Wikipedia’s IA is that it’s organic, and thus, categories are difficult to set for such an open and malleable system. Any website with that much information will need to rely on search so that users can locate content they’re seeking. In addition to search, the interconnectedness of Wikipedia articles makes it easy to move from one article to virtually any other related article. This in itself makes Wikipedia’s information architecture one of the best online; they understand how visitors use the site and make it easier for them to do what they need to do.
Additional Resources on Information Architecture
Here are some additional resources on IA that are worth reading. Please feel free to share and discuss additional resources, tips, and techniques in the comments.
- Information Architecture is Not Usability
- A Web Designers Guide to Information Architecture
- Information Architecture: Enhancing the User Experience
- Information Architecture for Web Sites 101
- Information Architecture
- Boxes and Arrows
- Information Architecture Tutorial
- What is Information Architecture?
MAXSTUDIOTECH 