1 of 22

Information Architecture

MAD9034

1

2 of 22

Information Architecture

Physical metaphor

2

Site plan

Object Design / Axonometry

Final product

Image source

Imagine an architect who is tasked to design a university campus. Before he starts designing the individual buildings, he needs to create a site plan to figure out how the buildings will be placed on site, how they will be connected with one another, create moments of interest along the way, create green spaces, sitting areas, parking lots, etc.

As a UX designer tasked with the creation of the IA, you will build a diagram to show the entire structure of the site, or app, how screens are connected to one another, levels of depth for finding information.

Some functionality has to be found immediately, at the top level, whereas other functionality can be buried deeper in the structure of the app and found once the user selected a path through you application. IA helps you determine the way the user has to discover your content.

3 of 22

UX Design Process

Information Architecture

3

Empathize
Define

Make sense of the research data

Thematic analysis
Define problems to solve
Persona
Information Architecture

Design/Ideate
Prototype
Test
Implement + Measure

Source: https://www.nngroup.com/articles/design-thinking/

4 of 22

Information Architecture

Definition and Goals

4

The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.

Goals

Findability
Discoverability

Ideation is NOT design-by-committee.

The information architecture (IA) is not visible to users, it informs the UX and UI of a product.

A good example is a site map.

https://www.nngroup.com/articles/ia-study-guide/

IA vs Navigation: https://www.nngroup.com/articles/ia-vs-navigation/

Information architecture is the art and science of organizing and labelling your product to support findability and discoverability.

Findability relates to things users know exist somewhere in the product and they have to find them. It is like looking for your keys before you leave the house.

When you test findability, you ask the user where they would go to check out the activities that they signed up for as an example. You don’t use the exact labels used in the product, you want to ask about the outcome and let them find how to get there.

Discoverability is about finding something that the user doesn’t know is there, but that enhances their experience and they can highly benefit from it. This can be a new feature, or an old one presented in a different way that suddenly people can see and use.

Testing discoverability is not as easy because you cannot prompt users to do it. You have to observe them use the product and see if they find something they didn’t know about. Analytics can also bring some insight into this.

Keep both findability and discoverability in mind when you design your information architecture.

The information architecture (IA) is not visible to users, it informs the UX and UI of a product.

5 of 22

Personas, Scenarios and IA

How they come together

5

PERSONA

Who uses the product

SCENARIO

A persona

using a product

to achieve a goal

in a specific context

IA

Organization structure

Navigation system

Labelling

Search system

Persona > Scenario > IA

6 of 22

Information Architecture

Definition and Goals

6

Information architecture is the framework for your app.

Think about IA independently of screen design

Evaluate the importance of content

Structure your screens and information to display what’s most important

Decide what content and information to disclose later

Information Architecture: 3 key models

7 of 22

Information Architecture

Benefits

7

Good information architecture will result in:

Shorter search times

Less effort required to find information

Increased customer satisfaction

Competitive advantage

8 of 22

Information Architecture

Examples

8

Hand-drawn sketch

Digital diagram

Image source

Image source: Figma Community

You can draw your IA on a piece of paper, on a white board, build it on a wall with sticky notes, or use digital tools.
No matter the tool used, don’t skip this step.

�Metaphor of the physical environment

Imagine an architect who is tasked to design a university campus. Before he starts designing the individual buildings, he needs to create a site plan to figure out how the buildings will be placed on site, how they will be connected with one another, create moments of interest along the way, create green spaces, sitting areas, parking lots, etc.
As a UX designer tasked with the creation of the IA, you will build a diagram to show the entire structure of the site, or app, how screens are connected to one another, levels of depth for finding information.
Some functionality has to be found immediately, at the top level, whereas other functionality can be buried deeper in the structure of the app and found once the user selected a path through you application. IA helps you determine the way the user has to discover your content.
If we think of a network for elderly people, as an example, finding a list of activities must be immediately accessible, whereas reading the profile of a specific care provider may be a few taps away from the main page.

9 of 22

Information Architecture

Physical metaphor

9

Site plan

Object Design / Axonometry

Final product

Image source

10 of 22

Information Architecture

Example

10

Image source: Figma Community

Example of functionality that requires multiple clicks to get to when needed.

11 of 22

Information Architecture

Information Architecture vs Solution Architecture

11

Information Architecture

Solution Architecture

Image source: Figma Community

Image source

collaboration

Software Architect

12 of 22

Information Architecture

Mobile Applications

12

In the context of mobile application design, IA is the practice of labeling and giving structure to digital content.

Content and functionality
Access and flow: search, filters

13 of 22

Information Architecture

Basic process of creating the AI

Define business goals, user needs and content - scenario

Identify all content

Card sorting > content structure

Individual screens and how they are related > IA diagram or site map

Validated IA with users > test a path through your app

13

14 of 22

Card Sorting for content structure

Information Architecture Process

Image source

Write down the names of all your screens on pieces of paper
Ask the participant to group them, create subgroups if necessary
Ask the participant to name the groups

14

https://www.nngroup.com/articles/card-sorting-definition/

Video (short 3 min): https://www.nngroup.com/videos/open-vs-closed-card-sorting/�Video (long 12 min): youtube.com/watch?v=FTzHeYPB9c8

Based on your user research & analysis data and deliverables, brainstorm to identify possible content that might be necessary for your app.
Use card sorting to find out how users group things and what names they give those groups.�
For the purpose of the project that you are working on, you will do the card sorting yourselves.
You will write the individual screens on individual pieces of paper, group them and name the groups.
This way you will see what is logical for your users and what words they use to name the categories.

FYI: Optimal Workshop is a tool that enables designers to perform tree testing among other research options.

15 of 22

A good IA Diagram contains:

Information Architecture Process

Image source

Visual representation of the product’s core content structure
Primary Navigation
Secondary Navigation
Starting point/entry point
Home screen
Main section screens
Sections (may contain sub-sections)
Additional content screens
Flows/sequences
Universal content/links
Flow/direction/connector lines
Annotations / Legend

15

16 of 22

Information Architecture Process

IA vs Navigation

16

IA

How the content is organized

Navigation

How users move around the content

The Difference Between Information Architecture and Navigation

17 of 22

Information Architecture Process

Common mistakes

17

IA

No structure
Search and structure not integrated
Missing category landing screens
Extreme polyhierarchy
Subsection/microsection poorly integrated with main section

Navigation

Invisible navigation options
Uncontrollable navigation elements
Inconsistent navigation
Too many navigation techniques
Made-up menu options

Source

IA and navigation must support each other and integrate with search across features or sections. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.

https://www.nngroup.com/articles/top-10-ia-mistakes/

Common structure and navigation mistakes

No structure: Site is treated like a common swamp of content. Common on news sites and catalog-based e-commerce sites, where each item (articles and products, respectively) is treated as a stand-alone unit without connections to related items.
Search and structure not integrated: Search results that leave the user confused about where they are on the site/inside the app.
Missing category landing screens: Think of a TOC for a book with chapters/sections. Having category landing pages helps with issue #2 where breadcrumbs can help the user come out of a deep page to a higher level category.
Extreme polyhierarchy: An advantage of the virtual content over the physical one is that the same item can live in multiple places/categories. This is an advantage when used well. This is done by spending time up-front to organize the content thoroughly in a few categories instead of tagging the same item to appear in multiple places, which can lead to confusion and misunderstanding of the content and eventually mistrust.
Subsites/micro sites poorly integrated with the main site: This is usually created during a marketing campaign for a specific product. The microsites become obsolete fast and fail to provide links to the company site. As a rule of thumb, think of how what you design will look and feel in 5 years, or even 1 year.
Invisible navigation options: To avoid this, make sure your navigation consists of obvious interactive objects, that it is not confused with advertising for example.
Uncontrollable navigation elements: refer to animations, hover over effects that may be in the way of efficient navigation and make users stop and be unsure of what to do next.
Inconsistent navigation or too many navigation techniques can lead to confusion and a feeling of not knowing where you are and what to do next.
Made-up menu options refers to mislabelling of navigation elements. Remember that part of working on your IA is to figure out the best terminology and labelling to use in your product.

18 of 22

Information Architecture

Major project: Week 4 of 9

18

19 of 22

Information Architecture

Assignment Recap

Use your 2 personas (primary AND secondary) and the usage scenario to create the information architecture (IA diagram) for your app.
Review your competitor research to see what features other products have and how they are organized.
Make sure you keep your secondary persona in mind throughout the process.

19

Details on the course website: IA

20 of 22

Information Architecture

Assignment mark criteria

Conform to assignment requirements
Effective use of time in class
Effectiveness of creating the IA
Overall quality of work
Feedback from your instructor

Note: For the Major project at this stage, it is critical to choose the platform for which you want to focus your design. The final deliverable needs to be a Mobile iOS, Android or webapp. This must be defined in your information architecture.

20

21 of 22

Today, in class

Steps

21

Organize all content (15 mins)	Write down the names of all possible screens/content on sticky notes Group them, create subgroups if necessary. Name the groups.
Create the IA�(20 minutes)	Draw your IA using FigJam. Represent the hierarchy of information and the different sections and sub-sections of the product. Put thought into how you label them keeping in mind findability and discoverability.
Choose the platform �(5 minutes)	Decide what platform you would like to design for: iOS, Android or web application. �This is the platform that you will commit to for the rest of your assignments.
Navigation structure (15 mins)	Decide what navigation structure is appropriate for the content you have, and how it is organized.
Name your app (remainder of the class)	Choose a name that doesn’t already exist, that is catchy and that stands out from the other apps that offer a similar service

22 of 22

Coming up

Reading week

User Flows

22

Mandatory

Submit your information architecture assignment, including the name of the app and the platform you design for.