No website should be without it. Is yours?

ia-2

From WAA Chosen,

What is Information Architecture?

Information Architecture is the structure of all information in a website, app or digital product. Websites that are intuitive to navigate and readily available information will naturally have a very solid information architecture.

Let’s consider a house for a moment. You would walk in through the front door, go through the hallway and enter the living room. In the living room, you would expect to see a couple of sofas, a television, some shelves, a book unit. You move on into the kitchen and everything is in its logical place; microwave, cutlery, stove etc. We can draw parallels with a website in that we expect to enter through the home page, find the main navigation and follow the signposting to the page that holds the information we require. Each piece of information should be in its logical place so it’s easy to find – just like the fixtures and fittings in a home.

An information architect will plan all the pages on a website, define the structure, categorise the content and sort it into the logical places. There is more to it, but we’ll get to that a little later.

Why is it important?

The information architecture will speed up the design phase. The designer will understand the hierarchy of content on every page. Then they can focus on important design aspects such as layout, style and user interface. It also helps to focus the design so the end-user (the user who will ultimately be using the website or app) is never forgotten during any phase of the project – This user, whomever they may be, should intuitively find the information they’re looking for without frustration caused by an overcomplicated design.

Example

Some websites are huge! The England Rugby website, for example, has over 2,800 pages of content. The information on these pages has been sorted into categories, links and text. So, let’s take a closer look. In the following example, we’ve highlighted the Club Finder section to see how we would arrive at the finished product.

In the example below, the site utilises a horizontal hierarchy of content. However, large sites with four or more levels will have to be displayed in vertical columns.

 
england-rugby
 

How do you create an Information Architecture?

Let’s deconstruct a website. A website comprises of images, videos, text, buttons, links, forms… and not much else. Yet the number of arrangements are almost limitless. So where do you start?

In the first instance, you must ascertain the main objectives for the website. We ask ourselves (and the client), what do we want to achieve? What do we want our users to do? What do we want our users to take away?

Taking the example of the Club Finder, the answers to the above are:

  1. For users to find their local rugby club for their level of ability; to either play, or to get involved
  2. To contact their local rugby club
  3. To enthuse and motivate

Now that we’ve answered those questions, we can start to develop our understanding of the types of users the website is aimed, known as ‘personas’. In this example, there are at least nine persona types:

  1. Men wanting to play rugby for fun
  2. Men wanting to play competitive rugby
  3. Men wanting to return to rugby
  4. Women wanting to play rugby for fun
  5. Women wanting to play competitive rugby
  6. Parents seeking clubs for their children
  7. People wanting to get involved in rugby (coaches, referees)
  8. Young people wanting to volunteer
  9. People wanting to watch local rugby

At this point, we begin mapping out all the areas of content we want to serve to these users, for example:

  • O2 touch
  • Finding a club
  • Local clubs
  • Clubs near me
  • How to get involved
  • How to become a rugby referee
  • Pitch Up & Play
  • Rugby for my skill level
  • Rugby for fun
  • Watch local rugby
  • Competitive rugby
  • …and so on

Then label and organise the content into categories…

  • O2 touch – (Play)
  • Finding a club – (Find a club)
  • Local clubs – (Find a club)
  • Clubs near me – (Find a club)
  • How to get involved – (FAQs)
  • How to become a rugby referee – (Get involved)
  • Pitch Up & Play – (Play)
  • Rugby for my skill level – (Play)
  • Rugby for fun – (Play)
  • Watch local rugby – (Watch)
  • Competitive rugby – (Play)

…which gives us our level one pages: Club Finder, Play, Watch, Get Involved and FAQs. Our level two pages/content will naturally follow on, giving us:

 

england-ia

Time-saving tips for creating your information architecture

  1. Ask questions
  2. The stakeholders of your company (or client) will know their business far better than you. Don’t be afraid to quiz them on the specifics of their business, their goals, and what they want to achieve

  1. Use Sketch App
  2. If you’re still using Photoshop or Illustrator to draw out your wireframes or IAs. Stop! Use Sketch, it is the perfect tool for combining wireframing and information architecture into one coherent Sketch document that saves you time.

  1. Be strict with yourself
  2. Don’t be afraid to minimise the importance of some things, this is necessary to maximise the importance of others. Contrast is critical in providing clarity. Get rid of information where you can, and minimise it when you can’t.

Wrap up

This has been a simple introduction into information architecture, what it is, why it’s important, and a few simple steps to help you create your own. There is of course more to it, such as:

  • Labelling systems: How you represent information
  • Navigation systems: How users browse or move through information
  • Search systems: How users look for information
  • Context: business goals, funding, politics, culture, technology, resources, constraints
  • Content: content objectives, document and data types, volume, existing structure, governance and ownership
  • Users: audience, tasks, needs, information-seeking behaviour, experience.

The scale of the information architecture ramps up significantly for sites with four or more levels, and more tasks will be needed, including user flows, scenarios and user cases.