Published on | Prototyping: From UX to Front End — Medium Ben Ralph

Two different concepts with maddeningly similar initials and overlapping goals.

This is a resource guide to complement the ‘Intro to UX Design’ course run by IF Academy. Visit their website for upcoming course dates.

This week builds on topics covered in Week 1 (Intro to UXD) and Week 2 (Insight to MVP) and Week 3 (Interaction design starts on paper). View the full Table of Contents.

IA = Information Architecture
AI = Artificial Intelligence

AI is personified as you — the user — asking a machine a question, and the machine understanding what you’re asking, then finding an appropriate answer. The more socially complex the question, the more intelligent the machine will need to be to help you.

If your question is 2+2, you only need ask a calculator, but if your question is ‘What is the best way for me to lose 10kg?’, you’ll need something a little more powerful.

If you’re a designer building an AI-powered chat bot, you will be judged by how quickly and efficiently your bot can get the user to their desired answer or outcome. IA (Information Architecture) has the same function as AI, and is judged by the same standard.

It can be very tempting when faced with the excitement of a new technology to suddenly forget the fundamentals. IA as opposed to AI is a proven, but all-too-often forgotten, piece of UX Design.

Regardless of whether you are designing an app, website or futuristic chat bot, information architecture is incredibly important and pleasingly, a straightforward process.

This article is a comprehensive guide to designing your IA in a way that allows users to find what they want, and businesses to promote what’s important. No futuristic tech required ?.

Information architecture design is an essential part of any design process.

Findability precedes usability. You can’t use what you can’t find. — Peter Morville

When you have a significant amount things (that aren’t 100% the same), they need to be stored in some order. Otherwise, it is impossible to find the one you want quickly, if at all. Imagine a library’s catalogue of books just dumped in a pile. It would be hard to find a particular book, right? Websites are the same; you can’t just scatter all the website’s links on the home page and expect people to locate the one they need!

There are lots of different ways everyday things can be organised:

Phone books are organised alphabetically
Restaurant menus are organised into categories (appetisers, mains, desserts, drinks, etc.)
Libraries are organised by the Dewey decimal system
DVD rental shops are organised in a combination of new release and genre
Schools are organised by year level and then by subject
Diaries are organised by date and time

Physical vs. digital organisation

When music was predominantly shared via physical media (i.e. records, cassette tapes, CDs), we were limited in how we could organise it. You couldn’t sort individual tracks because they were grouped by album, with songs in a fixed order.

Now that music is distributed digitally there is infinitely more flexibility in how we can organise it. Single songs can appear in multiple playlists (simultaneously) alongside tracks by multiple bands.

With information, we see the same thing. As information has moved from primarily print to digital distribution, we have infinitely more flexibility in how we can choose to organise it.

This new-found flexibility can be both liberating and intimidating as a designer, who must try to categorise information in a way that is helpful and not confusing to the user.

The following process will help you make sense of your content and find the best way to organise it based on user research.

The process:

1. Content Audit

What do you need to organise?

Before we can start organising, we need to have the complete picture of what content you have (or will have). We want our final categorisation to be based on your actual content, and we can do this with a content audit.

Your content audit will help you:

Understand what your content challenges are
Evaluate your content’s quality and effectiveness
Conduct user testing
Consider metadata and SEO implications

There are a variety of online tools that can help you conduct a content audit, but in its simplest form, it’s just a large spreadsheet that contains a single row for every page on your site.

Columns

Page ID — A unique identifier for each page so you can keep track as page titles get updated or changed over time.
Page Title — This should be as it will appear to the user on the site.
Template or Category — This is a flexible column to help group related pages together, e.g. event pages, product pages, landing pages, etc.
URL — For existing sites, this should be the current live URL for the page. For new sites, this should be the intended URL (based on SEO recommendations).
Impressions, bounce rate or other relevant analytic metrics — For existing sites, it can be very handy when trying to decide what page to keep, improve or delete, to know how each is currently performing.
Quality Score — This helps you assess the ‘health’ of the page. You can start with a simple, objective one-to-five scale, or use an online content grading site for something a little more scientific.
Audience — Who is the intended audience for this page?
Page summary and metadata — This provides a little context of what the page is about and can help you review each page for better SEO.
Action — What work needs to be done to the page? Improved, deleted or kept as is?
Owner/s — Who is responsible for the content on this page and who would need to be consulted before any changes were made?

Feel free to play around with the format, adding or removing columns as you feel necessary.

Once your spreadsheet is full, you need to evaluate for any content gaps and priorities for content development.

2. Card Sort

How do your users expect your site to be organised?

It is important to know how your users expect your site to be organised, because anything too radically different from what they expect is going to be confusing.

It is not enough for your site to be organised, your site needs to feel immediately familiar.

Obviously this is a very tricky challenge. Not all users think alike, and very often how users think your site should be structured is very different from how management/clients/peers think it needs to be structured.

Card sorting is a simple and flexible technique for seeing how your users would organise your content. If you do it with enough users you will start to notice trends and insights that will help you design your information architecture.

You can (and should) also conduct a card sort with your business stakeholders and/or client.

Preparation:

Go through your content audit and print (or write) the ‘title’ and ‘page ID’ of each page on a separate card.
On the back of each card, print (or write) the short summary of the page.
Shuffle the cards so that they are in a random order.

Method

Hand the stack of cards to your test subject.
Ask them to go through each card, one by one, reading the title and then placing it on a table.
As they place each card on the table, ask them to put it near other cards that seem related.
If the user is unsure what the page is about from the title, they can flip it over and read the description.
Ask them to ‘think out loud’ as they go through each card, and prompt them with an open question if a silence extends past 30 or 40 seconds.
Once all the cards are on the table in rough groupings, ask the user to review their work and to make any changes or updates they like.
Prompt them to split up large clusters of cards.
Lastly, ask the participant to label each group. Through the labelling process the user might do some further re-categorisation.

Results

At the end you should have several, labeled groups of cards that represent the user’s internal mental model for how the different pages on your site are related.

Compare the results and try and find trends and insights that will help with your categorisation.

Card Sorting Software | Optimal Workshop

3. Classification schemes

Define your Information Architecture

You should now have a solid insight into how others view and conceptualise your content. Don’t worry if not everyone you tested agrees — they won’t — the purpose of the card sort wasn’t to give you the answer but to give you information that will help inform your design.

Let’s now review some common ways for sorting and classifying information.

Methods of Exact Classification

Exact classification schemes are good because there is little room for confusion about where a particular item can be found — there isn’t any ambiguity or room for multiple interpretations. For example, if you were running a hotel comparison website, all Melbourne hotels are in Melbourne, they are never in Sydney. It would be safe and sensible to categorise hotels by location and no-one would get confused.

Examples of exact classification methods

Alphabetic: names or people, places, and other kinds of proper nouns
Location: hotels, restaurants and photos
Format: media and documents
Time: social networks, cinemas, news and events
Attribute: colour, size

The obvious issue with exact classification is that it can be a blunt instrument. Organising an online clothing store alphabetically would make it difficult to browse related items, for example. It is unlikely you’d want to browse through bikinis, bags and blouses all at the same time!

Methods of ambiguous classification

Ambiguous classification, on the other hand, is when you (the designer) creates the categories rather than using something predefined. This is by far how most websites are organised, with good reason.

For example, if you were designing an online store for selling furniture you might want dining tables and dining chairs in a category called ‘dining furniture’ and desks and desk chairs in a category called ‘office furniture’. It would make less sense to have all chairs together and all tables and desks together in this context.

Examples of ambiguous classification methods

Task — organising by task is where you group features based on the action or task the user wants to perform. A common example is Microsoft Word or other similar task-focused applications where it makes sense to group common tasks together. Inserting an image is found in the same drop down menu as inserting a video; copying a section of text is in the same dropdown menu as pasting that section of text.
Audience — organising by audience is where you group content and features by the types of people who will need them. Imagine you are designing a website for a university. It might make sense to have sections for ‘future students’, ‘current students’, ‘teachers’ and ‘researchers’, with each section containing relevant content for each audience.
Subject or topic — by far the most common and flexible, this is where you create a list of subjects or topics that best suit your content and context. As previously discussed, an online furniture store might define its categories as: living, dining, office, bedroom, outdoor, while an online hardware store might use tools, building & hardware, garden, outdoor living.
Organisational structure — although not often the ideal approach, there are instances where organising content or products by organisational structure might make sense. Intranets are often an ideal candidate for this kind of approach (but not always).

It is important to experiment and user test different methods or combinations of methods. Don’t forget to keep revisiting your card sort results and content audit to keep you on track.

Once you’re happy you have a solid solution, it is time to validate it with users.

Classification Schemes (and When to Use Them) | UX Booth

4. Site map

Visualise your Information Architecture

Creating a site map is a great way of visualising and sharing your newly-designed IA. It clearly shows the various dependencies and hierarchy of your content.

There are many great tools and templates for creating a site map but the two I use and recommend are:

XMind (~$99)

XMind: The Most Popular Mind Mapping Software on The Planet.

Draw.io (Free)

Flowchart Maker & Online Diagram Software

Tips

Always start with your home page at the top and work down
Show how each page is connected with an arrow
Group very similar pages together to save on room, e.g. you can represent all product pages as a single node or page
Don’t forget to include important but low trafficked pages like your T&C’s

5. Treejack User Test

Test your Information Architecture

Remember at the beginning we discussed how the purpose of all of this was to make it easy for users to find the information they needed as quickly and directly as possible? A Treejack activity tests just that. Stripping away all visual design, users are presented just your information hierarchy as a list of text labels and then provided common user tasks to complete.

A Treejack test can help you identify:

What content is hard to find in your IA?
What labels are unclear or have alternative interpretations?
Where in your IA do users get lost or confused?

In my opinion, the best tool by far for this kind of testing is made by Optimal Workshop. They have a great step-by-step article here that goes through how to create and conduct a successful Treejack test.

Getting started with Treejack | Optimal Workshop

Once you have completed your test and analysed the results, you can then review your proposed IA structure and optimise it by:

Reducing the amount of clicks it takes users to find the information they are looking for.
Reducing the time it takes users to find relevant information.
Reduce the amount of false starts or mis-clicks made by users as they move toward their goal.

Depending on your results, you may need to repeat steps 2, 3, 4 and 5 of this article until you find the right organisational method that works for the most users. You might find that you can’t always please everyone; remember that browsing your site’s navigation is only one way of navigating the site.

6. Navigation

Place your Information Architecture into a navigation system

Our content is now organised into a basic hierarchical structure, job half done! We now need to design how we will present this structure to users. We don’t have room or time in this article dig deep into the the ins and outs of navigation design but here are some great articles that do:

Remember your navigation design will affect your Information Architecture. You might need to reduce the size of labels, create additional visual hierarchy and split up the structure between the header and footer. It is obviously a given that you will need to make changes, but don’t throw out or compromise too much of your hard work. Always remember to re-test with users to make sure the integrity of the IA stays intact.

7. Consider how users look for information

Support how different kinds of users prefer to use your site.

There are 2 kinds of people in this world, those who believe there are 2 kinds of people and then those that don’t.

There are though, different ways of looking for content on your site and it often comes down to personal preference:

People who know exactly what they are looking for
People who want to browse and view their options
People who don’t know what they need to know or how to find it
People who have already found what they wanted on a previous visit and are now just coming back for it

It is important that your IA and navigation system support each type of person. The following article provides a detailed look at each, and the design strategies to support each kind of person.

Four Modes of Seeking Information and How to Design for Them

After following the steps in this article you should have a strong navigational system that supports all kinds of user behaviour. ?Congratulations?

It is now important to again user test your work.

Continue on to Week 5 (Usability Testing) for a complete guide to planning, building and running a successful user test.

This post is part of a series covering UX Design. Check out the full course here.

If you’re interested in some context on me as a UX designer, check out my LinkedIn account. Also feel free to get in contact through the regular channels (Twitter/Email) with any questions or suggestions.

IA not AI was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

IA not AI

Cool stuff, every week

More Articles