Information Architecture 101
Architecting web sites is similar to
They are complex disciplines, which
impact several areas including visual design, user experience,
navigation, visitor flow, accessibility, construction cost, and
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 images or press releases on the Home page, or you
might choose to have a separate News section. That's an Information
Taking the placement of News items as
an example, there are several considerations that you might take into
- 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
- Are news images 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.
- 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.
- 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
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.
- 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!)
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
- 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.
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: Unique Quality Website 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
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
- 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