Information Architecture for Web Site Design 101

Information Architecture (IA) is the way you structure your stuff to make it easy to navigate and to manage.

The underlying IA influences your navigation and page layout.

What’s the right way to order and arrange information on a web site?

There isn’t a right way. There are always lots of options, and picking the best is a matter of weighing various factors including user goals, environment variables (such as bandwidth and screen resolution), technical architecture, time and effort, search engine compatibility, logic and plain old common sense.

Sometimes, simple content structure is obvious. For a simple brochureware site, you might only have Home, About Us, Services (and/or Products), and a Contact Us page. You might choose to put news snippets or press releases on the Home page, or you might choose to have a separate News section. That’s an Information Architecture decision.

Taking the placement of News items as an example, there are several considerations that you might take into account:

• Do you want all visitors to the site to be made aware of all latest news? (The site’s goals)
• Is company news of interest to all visitors to the site? (Users’ goals)
• How much news is there truthfully likely to be? Is there enough to put on its own page without looking bad?
• Are news snippets standalone, or do they link to articles or press releases?
• Is all news relevant to all users of the site, or is it more appropriate to divide it by product/service/region/user group etc.?

For a simple e-commerce site, you’d add your list of products, and a shopping/purchasing process. The products may naturally belong in separate categories.

With more content, there are more choices to make, and the way you choose becomes more important. It simply isn’t possible to describe everything on one page; you have to start splitting a site up into sections, and provide useful navigation between those sections.

Architecture mirroring real systems

The most obvious starting point (particularly to clients) can be to arrange content on the web site in the way it’s arranged in real life.

For example:

• A different section for each geographical sales region (Europe, US, Asia)
• Sections for each area of business (e.g. Sales, Service, Fulfilment, Human Resources)

Architecture based on users’ goals

An alternative approach is to follow your users’ goals and structure your pages around their likely flow through the site.

For example:

• A site that sells train tickets might have "Quick booking" from the home page, favourite journeys for registered users, and "Trip planner" that lets users book hotels and car hire at the same time.
• A software vendor might construct their site around their different audiences
  • Technology expert is offered "Technical white papers" or "Feature comparisons"
  • Business buyer is offered "Benefits of switching to us" or "Business case studies"
  • Press audience is offered "Press releases" and "Press contacts"
  • Hackers looking for clues to penetrate the software are offered nothing at all (in this case fulfilling the company’s goal, not the user’s!)

  These types of content or function don’t necessarily map to the organisation’s own structure or product range. They’re designed around the needs of the different groups that might use the site.

Multi-dimensional Architecture

Sometimes, it is appropriate to offer many views, not a single rigid hierarchy.

Taking an online bookstore for example, which shows how you can offer many routes to the same content, and show that content in many different views:

• It might let users browse by category: which will be a many-levelled tree, but one book can be in more than one category
• Users might want to search for a specific author or title
• To increase sales, the site would also advertise other titles similar to the ones the user is interested in
• Smart content management can offer plenty of other cross-selling opportunities, such promoting "people who bought this also bought", "this is recommended by 90% of the people who bought it", "Buy this together with that, and get 33% off" etc. etc. etc.

Which structure is best?

Information Architecture is a huge topic with its own text books. In general, though, it is common sense. There are lots of ways to arrange content and functions, and it’s usually a case of working out which will work best. It’s hard to get it very wrong; the goal is to let different types of user succeed.

Example: Web design from Scratch v1

The previous WDFS site used a simple Information Architecture. It’s basically a wide, flat collection of 50 articles, including the home page. Any article could be accessed from any point, because the whole structure was exposed via the side navigation.

Note: I’ve now split the site into several sections, organised by topic. The main reason for this is that my old Tutorials section was getting too big and unwieldy, and I wanted to add lots more tutorials on specific production techniques.

While this is a very straightforward model, it could take quite a lot of decoding to scan and navigate this many elements. For that reason, I’ve overlaid a pseudo-tiered structure, which arranges the articles into main sections (Home, Basics, and Principles), and sections within those (such as ‘Web design process’, ‘How people use web pages’, and ‘Other online factors’ in the Basics section). Note that this isn’t a real-life order: it doesn’t represent any particular workflow or even directory structure

In addition, some pages provide cross-reference links to others, and some pages which introduce their sections link to multiple articles within the section. The result is a rich, unstructured, web-like architecture.

This is appropriate for situations where:

• There is a small or moderate number of pages (under 100)
• Page contents are relatively independent, and can make sense in any order
• The information might be used in a number of ways