Information Architecture 101: Techniques and Best Practices

Oct 18 2010 by Cameron Chapman | 43 Comments

Information Architecture 101: Techniques and Best Practices

Information architecture (IA) is an often-overlooked area of website design. Too often, as designers, we just let the CMS we’re using dictate how content for a site is organized. And that works fine as long as the site fits perfectly into the narrow content formats most CMSs are designed around.

But too often, a website’s content breaks the boundaries of most CMSs. Without a clear understanding of how information architecture works, we can end up creating sites that are more confusing than they need to be or, at worst, make our content virtually inaccessible. It’s a shame, considering that the basics of good information architecture are no more difficult to learn than the basics of good web design.

This guide covers the fundamentals of information architecture for organizing website content. 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

Single Page Information Architecture (IA) pattern

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 simple personal contact info site.

Flat Structure

Flat Structure Information Architecture (IA) pattern

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

Index Page 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

Strict 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

Co-Existing Hierarchies 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

Best Practices for Information Architecture DesignImage 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

Use PersonasImage 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

Card SortingImage 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.

Card Sorting

Open card sorting lets users name the groups they’ve created for the cards, while closed 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 and Outlines Information Architecture Technique

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.

News Website Information Architecture (IA) Example

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 Information Architecture (IA) Example

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.

Single Product Website

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.

Ecommerce Website

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.

Ecommerce Website

Beyond the organization of their products, L.L. Bean also organizes their auxiliary pages in a logical manner.

Ecommerce Website

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.

Blog

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.

High-Content, User-Driven Website

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.

References

  1. Information Architecture models: Guide to web site navigation patterns. webdesignfromscratch.com.
  2. Cnn.com’s Site Profile. compete.com.
  3. Wikipedia Statistics. wikimedia.org.

Related Content

About the Author

Cameron Chapman is a professional web and graphic designer with over 6 years of experience in the industry. She’s also written for numerous blogs such as Smashing Magazine and Mashable. You can find her personal web presence at Cameron Chapman On Writing. If you’d like to connect with her, check her out on Twitter.

43 Comments

themisfit

October 18th, 2010

There is some good info here, thanks for sharing.

Ocim

October 18th, 2010

wow this article give me more information thanks

Ryan

October 18th, 2010

Great article! I think lack of organization can really kill a site. Thanks for sharing!

Julian

October 18th, 2010

Awesome article Cameron! I always thought IA was limited to how the data was arranged in the back-end, i.e. within the CMS and database.

Every good web developer should practice the basics of IA.

Young

October 18th, 2010

I think “don’t design to your preferences” should really be written above every web designer’s desk. Great article.

Edison A. Leon

October 18th, 2010

Thank you, I’ve been try to read more about it. Would you recommended this book, Information Architecture for the World Wide Web (O’Reilly Media)?

web tom

October 18th, 2010

that’s really useful resource you are sharing here, especially the different types of information architechtures are very well explained with the examples chosen.

i think CMS are simply focused to help creating, updating and organizing content. since IA dependent on the goals of the site you will need to add an appropriate theme on top of the CMS. there are many bad and few good themes in terms of IA for a given type of site.

Scott

October 18th, 2010

Very detailed and well explained thanks for sharing.

nikos lianeris

October 18th, 2010

very helpful article!I’m interested in information architecture and I found a good guidance in this article

Matthew Wehrly

October 18th, 2010

Great article, very clear, concise and effective. Thanks for all of the useful information.

BennieBoy

October 18th, 2010

I love the “card sorting” activity. I think this will really help me when dealing with executives. “Hey look! Most people though the management team page fell in the ‘almost unnecessary’ category.” :)

Brandon Cox

October 18th, 2010

I love how you’ve segmented out different needs for different site genres. This is something a lot of people miss and assume that every website needs all the same bells and whistles. Great work!

Chief Alchemist

October 18th, 2010

Thanks. Nice to see IA get some luv.

Three quick semi-random thoughts:

1) With less and less traffic coming in via the front door (aka home page) the hierarchy model almost seems somewhat broken, or at least dated, no?

2) No discussion of taxonomies? Or is that for the 201 article?

3) Re: Wireframes. There’s something to be said for being able to look at a site without being distracted by aesthetics.

Scott Dover

October 18th, 2010

Excellent Article. I’ve been struggling with choosing a CMS or creating a page from scratch. In the end, it is easier me to visualize with actual files. I’ve found card sorting to be helpful for numerous projects as of late. Again, great job.

Laura Spencer

October 18th, 2010

Thanks for including Freelance Folder in your analysis. I enjoyed reading this very thorough piece…

Arafat Ashraf

October 19th, 2010

I must salute to you for such a great and informative article. Information is very useful, i will say the famous tagline of HBO – “Simply the Best”

everlearner

October 19th, 2010

Thanks Cameron.
I feel, IA is very important for all websites, whether small or large. A good IA can bridge between the website owners’ business goals and the site visitors. Moreover a clever IA can save time for everyone.
I also like your explanations and examples.

Mat

October 19th, 2010

what a great article! I wanna print it and study it well. Thanks for sharing. You are doing an amazing job guys

Niubi

October 19th, 2010

Excellent ideas for how to simply and coherently lay out information in a multitude of different ways! Some of them remind me of the rather innovative layout which DubLi has been using lately.

Afzaal

October 19th, 2010

found this article very helpful .. thanks for sharing ..

Joe Baz

October 19th, 2010

I am pretty much in alignment with Chief Alchemist.

Definitely some strong points in here. One additional piece that would have been nice to dive into is search. You’re only scratching the surface with search pertaining to Wikipedia. One of the most best examples of IA taxonomies, semantic classification and disambiguation can be seen with Wikipedia’s search system.

Try searching for “IS”… Do you make a common word like “is” a stop word? Does it have meaning in different industries? (e.g. “Information Services” or “Image Stabilization”) Maybe this is a 201 article too.

BTW, Wikipedia is like IA on crack. ;-)

Tom Hermans

October 20th, 2010

Very interesting ideas and nice to see the theory as well as real live examples.

Also the personas is something I want to read more about, about how to put real users (personas) to the test too. Also to match users to the personas by e.g. testing their behavior on a live or staging site.

Well written, ToM.

Joris

October 20th, 2010

Useful information. But its not always possible to do big research in how users want to see information. Are there some common practices that a lot of designers use?

Lynda

October 20th, 2010

Personas should never be hypothetical. They are empirical composites. You figure them out by conducting qualitative and quantitative research. Personas are a business intelligence tool that drives insight into attitudes, behaviour and functional and content needs. Here is some more info about personas; how to use them and how to define them : http://lyndaelliott.blogspot.com/2010/08/personas-as-business-intelligence-tool.html.

Good book to read is http://www.amazon.co.uk/Project-Guide-Design-Experience-Designers/dp/0321607376

David

October 20th, 2010

I am interested in what people think about the direction the fitness industry has taken for the selling of their ebook products. http://Www.showandgotrainin.com. They go for the one page method. But they don’t seem to care about any sort of IA. It think this must be done for seo reasons but I don’t know how well it translates into sales. I am always left with a snake oil salesman feel on these sites. I’d be curious to see what others think.

On a side note coups you make the comment box bigger for iPhones it is very tiny and hard to see you comments.

Nice article

Maria Malidaki

October 20th, 2010

Wonderful article and loved the way you presented the architectures! Thank you!

Zack

October 21st, 2010

Thank-you for writing this great intro to IA. Very thorough with lots of jumping off points.

I have a related, practical question. Has anyone got a favorite site architecture discovery tool or tools? Example: new client walks in and says, “design my new site based on the info in the old one”. Best case scenario you can point a tool at the site with login credentials and generate a complete map of every file on the server and its relation to all others. Basic research turns up some of the old dinosaurs like Visio and a couple others, but nothing in the form of an online app or newer, more capable installable app.

Side note: One very useful way to find out what’s important (or hidden and therefore in need of testing) in an existing architecture is to review the site stats for highest traffic pages and search terms.

Looking forward to your next post!

Haparanda

October 22nd, 2010

Very good article guys!

Stefan

October 22nd, 2010

Very nice, easy to read article. Especially for newbies

Sittipong

October 22nd, 2010

Awesome! Useful article, it’s very good for my next project. Best thanks.

Matthew Sullivan

October 22nd, 2010

We are using Mind Mapping tools in our Information Architecture work. FreeMind is Open Source, and provides basic enough tools for mapping a tree. Mind42 is an online Collaborative version that supports exporting. The files are XML, which has been valuable in being able to transform the maps into more visually desirable output, or more practical outputs, such as creating importing the initial site structure from the Mind Map.

Roshan

October 26th, 2010

nice list of guidelines for developers. but i don’t think Wikipedia is the best example when it comes to web architecture. so many things can be done to make it more user friendly.

Alexandre

November 9th, 2010

Great article. It is really great to remember the Informaton Architecture basics and the guidelines of site structure development. Let’s make the internet more user friendly! ;-)

Tim

December 21st, 2010

Regarding Wikipedia, if your search is great, you can get away with poor usability. If you have a bad search then you will need something to help people find things.

Marc Y.

January 31st, 2011

pretty nice article. i m teacher and i will just print it and hand it out to the stupid kids.. many thanks

katina ferrer

March 3rd, 2011

Hi,

Very very good article, Thank you.

raymond

July 24th, 2011

thanks for the articles great info

Vince

September 20th, 2011

Very helpful article on IA. Having the IA thought through before design and build can improve user experience a lot down the track.

Pankaj

September 21st, 2011

The changing norm of information architecture is – information aggregation – the context could be the user or the group. That’s why social networks are so popular.

Mehul Thakkar

September 30th, 2011

What a wonderful Article.. Thanks a ton Cameron for Sharing :)

A to Z of the world

October 17th, 2011

Tnx for the insights.

I think Navigational Schemes are playing more important role in these days’ content rich websites.

And also the SEO too has to be kept in mind while deciding the pattern for IA because it is not always the users who bring more traffic to the site but it is Search engines too.

Most of us do follow the steps without knowing the terminology used.

Once again thanks for the insights and thanks for familiarizing me with the terminology of IA.

allieu

November 7th, 2011

vital information it broaden my understanding more thanks for sharing

gerimar

November 18th, 2011

nice web design, thats what im lacking for architecture design.

Leave a Comment

Subscribe to the comments on this article.