Information Architecture

Workshop Transcript

Introduction & Information Architecture Summary

What is Information Architecture?

Information Architecture (IA) is the organization of content so that it’s understandable and readily
obtainable. The end goal is to ensure that users find the information they need and complete
tasks. To accomplish this, you must have a baseline understanding of how that information is
presented through systems and accessed by your users.

Explain the differences between Information Architecture and UX

Design
Information Architecture and User Experience design. You may have heard these two terms be
used interchangeably. While they are related they have completely different end goals in mind.

Think of Information Architecture as the foundation and blueprint of a product, system, or service.
It provides a clear path for users that makes it easier for them to navigate through. It is a key
aspect of UX that prioritizes organizing information and proper structuring.

User Experience (UX) Design is the process of how users both engage and experience that same
product, system, or service. It is the finished product that information architecture has helped
build. The user’s emotions are always at the forefront and utilized with user-centered design
practices. User experience ensures that you’re having fun while navigating.

Ultimately, they go hand-in-hand. Having a good information architecture is required if you want
good ux design.
Why is Information Architecture important
I think we can all agree time is our most precious resource. For a website visitor, if finding
information becomes too complicated or too slow, there’s a risk they will simply abandon it. When
people abandon a website, it’s more difficult to bring them back. This is where information
architecture design plays a key role; it is the backbone of the user's experience.

Our job as information architects (that includes you) is to create an experience that allows the
user to focus on their tasks, not on finding their way around. This can lead to your site visitor:
1. Feeling positive about your organization/department/school
2. Users will return to your site as a trusted source of information (it also may reduce the
amount of support phone calls you get in a day).

Defining Information Architecture Objectives

Information Architecture has three main objectives that are required to accomplish its purpose.
Findability, Understandability, and Utility. These objectives are relative and closely affect one
another.

Findability, as the name suggests, is about making information easy to find. Some information is
readily obtainable, such as knowing what items you need to purchase at the grocery store
because you made a list. You use that list as your “source of truth” regarding what you have to
buy. But information can be hard to find as well. You may not know where it is, what it’s called, or
even if it exists. In this instance, you will only become closer to what you’re looking for as you
progress but it will take effort. For users, this can be discouraging so you have to make sure the
content is easily accessible.

Understandability is making sense of that information when provided with both context and its
relation to concepts you already understand. For example, a film tracking app might allow you to
view films by genre or year of release. Depending on what you’re trying to accomplish, either
option can be useful. The key here is that you have a baseline understanding of what genres and
release dates are. Without this you won’t be able to make sense of it and will be unable to choose
logically. Additionally, context matters! Things can be understood differently based on where and
how it’s encountered. You understand a film being shown in a theater differently than watching it
at home.
So you’ve made your information findable and understandable, now what? Well, does that
information have value? What is it good for? What purpose does it serve? This is where Utility
comes into play. Let’s say you started working out at the gym and are looking around at the
machines. You find one that seems relatively easy to use and you have a basic understanding
that it’s for your arms. When you look over the instructions on the machine you see that its
purpose is to target your biceps. Now that you have assigned value to the machine, you continue
to use it or move on to one that fulfills your needs. The same can be applied to your users and
ensuring the information you have provides value they can use.

With information architecture generating these three components, order is constructed. With
order, information is organized in a specific manner and even provides the means for users to do
it themselves.

3 Components (Ontology, Taxonomy, & Choreography)

There are three elements that must be present in order to achieve both good information
architecture and a satisfactory user experience:

Ontology is giving labels to individually identifiable elements so that users understand what
they’re looking at. Once the label is determined then we can decide where it needs to be placed
with the help of…

Taxonomy is when those elements are grouped, classified, and labeled together within a shared
information environment. This arrangement of elements accomplish specific goals within, or
across, contexts.

Choreography is the ‘movement’ or user flow that the user is most likely to take in order to
accomplish their task. It requires both ontology and taxonomy to work together and once
mastered, will achieve a positive user experience every time.

A quick example of this process can be applied to a user interested in attending USF. With
ontology we can give them the label of a student and taxonomy further categorizes them as a
graduate student. Once that information is established then we can determine the choreography
(or user flow) they would take to apply for their Master’s degree.
Three Pillars/Principles of Information
Architecture
Much of the terminology used to describe information architecture can feel a bit technical or
jargony. Some of the best thinkers in this field helped us by simplifying it to this: IA is based on 3
pillars.

Context
Sites can have different specific goals: admissions is trying to attract new students or HR is trying
to provide all relevant employee forms and processes. But, all sites will have things that define
their context:
● Goals to be defined
● Expectations of the organization
● Resources to be used (our time)
● Technology Tools available
● Constraints
● Culture

Users
The audience that receives the content. They come with their behavioral needs to
● Seek, retrieve, and consume information
● Complete tasks

User Empathy
● Walk a mile in your users’ shoes. What are the user’s goals, needs, tasks they need to
accomplish, comfort with technology, mobile only user(?), etc?

Analytics
● Discover user behavior, most visited pages vs least visited, path they take through the
site, and more.
User Testing / Feedback
● Think aloud protocol from anyone, observe users performing a set of tasks, gather
feedback from existing users

Content
All of the things we’re trying to organize: data, documents, text/copy, images, and media.

The intersection of these 3 entities is what makes up information architecture.

Essential Aspects of Information Architecture

Organization of System
Organization of System is the distribution of information within identifiable categories so that
they’re easier to find. Within this system are two main components, structures and schemes.

Schemes are how the information is arranged and put into related groups. Here are some
popular schemes:

Alphabetical. Self-explanatory. Content is arranged in alphabetical order. This scheme works best
when the user already knows what they’re looking for.

Audience. The content is arranged for certain groups of users. An example would be, an
educational resource making sure the content is separated by skill level.

Chronological. Another self-explanatory scheme. Organized by time and date. Perfect for news
posts, blogs, event apps, timelines, and so on.

Topic. Scheme where the content is arranged by a specific subject. For instance, browsing a film
and tv show database by genre.
Structures, on the other hand, categorize information so that the user can easily navigate
through or to it. There are a few main types of structures:

Hierarchical structures distribute information under exclusive categories ranked by importance,

much like ‘taxonomy’ that I went over earlier. This type of structure can also be achieved visually
with differing alignments, colors, sizes, contrast, etc.

Sequential structures present information in a logical path that is arranged in chronological order.
Think of it as a step-by-step process when cooking a new recipe. You must complete one step
before proceeding to the next.

Lastly, matrix structures are the most complicated out of the three as the information is organized
and navigated by the individual user. How they access and find information can be done by
searching for specific topics or dates. Think of it as browsing the internet. There’s no one way they
can go about it.

Labeling Systems
Good labeling helps identify information with intuitive labels that depict the meaning or intent of a
button, an option, or an area of the site. Simplicity is key and user empathy (and hopefully some
testing) is crucial.

For example, if you label something “Information” vs “About Us”. Or, labeling something
“Services” vs “Advising” & “Mentoring”.

Most of what we will deal with are textual labeling, but this thinking extends to the use of
icons/graphics. You have to consider if the icon is intuitive when describing the information it is
meant to represent. Example: The home icon on many systems. It’s trickier if you were choosing
an icon for Press Releases.

Navigation Systems
This is probably the one Information Architecture system that you all are the most familiar with.
Navigation is the system that allows visitors to easily locate what they’re looking for. ‘Easily
locate’ is the key word here as regardless to which page they first land on they should be able to
still find what they need without issue. You may have seen Information Architecture and
Navigation being used interchangeably but they’re not the same. Navigation is, once again, a
system within IA. You should never focus primarily on navigation when building out a new site.
When in the early stages of a new website you don’t know the full scope of its content and
functionality. A navigation system might include any of the following: main navigation interface,
sub-navigation menus, breadcrumbs, and pagination.

There are four main types of navigation that you’ve all seen multiple times across USF’s web
domain.

Hierarchical - The flow of navigation starts from top to bottom. There is a clear information
hierarchy of elements within their respective category. This can be commonly seen with
drop-down menus.

Global, or site-wide - The navigation is always present no matter what page you’re on. It can be
in the header, on the sides, in the footer, as a sticky menu, or a hamburger menu.

Local - Shown within a specific area, such as a section within a page. This is normally a
navigation system that only contains sub-navigation content that is exclusive to that department.

Contextual - Navigation elements that are in relation to the content it shares a page with. This is
common with sites that have a blog or news feature. If there are similar articles to the one the user
is currently reading then they’ll be able to access it.

Search Systems
Search is a very effective way to find information on sites. 62% of the traffic to usf.edu comes via
search. Part of IA is making sure your content is searchable. A good exercise is to pretend you’re
a user and try searching for information on your site.
● USF Search
● Google Search

To help these search engines find and index your content effectively, makes sure to:
● Update Metadata: Titles & Descriptions, these are used in the actual search results! Don’t
worry about keywords; Google has evolved to disregard this data.
● Quality & Concise, Clear Content is the best way to a search engine’s heart.
● Accessibility Matters (ALWAYS): alt text for images, well structured headers
Implementing Information Architecture

Preface
I wanted to give a quick preface on some terminology before jumping into our own examples.

Sitemap
Presents the entire structure of a website. Usually shown in a hierarchical manner with the
homepage at the top. It does not offer details on the links between the pages or the external
pages a website leads to.

Card Sorting
A method used to help design or evaluate the information architecture of a site. Normally done in
sessions where participants logically organize topics into categories and it’s also helpful with
labeling. Can be done using actual cards, pieces of paper, or digital software.

Wireframes
A two-dimensional illustration of a page’s interface structure. Typically in black & white as the
focus is on space allocation, placement of content, available functionalities, and intended
behaviors.

HR Example

Structure and Site Map

The existing HR site had all its pages in a section called “HR Services”. After going through many
exercises, interviews, and testing we ended up with a bit more balance and way better structure.

Card Sorting and Labeling

We put every page of necessary content on slips which we asked our content experts to group
into “buckets” of information. This helped create the structure we used to test against users.
Wireframes
We created wireframe representations of the site using sketches, then graphical mock-ups, then
built a test site. Each of these iterations were put in front of beta testers for feedback.

FoodBinge Example
For my example, I chose my junior year project ‘FoodBinge’. Foodbinge is an app that allows
users to store ingredients they already own, find recipes that use those ingredients, and shop at
grocery stores from the comfort of their home. The project’s goals were separated into three
categories. A search feature for recipes that a user wants to try. The ability to browse recipes after
filtering dietary preferences, rating, and difficulty. After choosing a recipe, the user can order the
necessary ingredients within the app. For the sake of this workshop I will only focus on two
aspects within the project that went towards building its information architecture.

Search, Sort, and Retrieval

The user can search for specific recipes by stating their name in a standard search, or use the
categories provided to find something that fits within those parameters.

Categories fall under large groups like Food Types for specific ingredients involved, Meal Types
to limit the search to specific foods appropriate for that time of day/ meal, and then individualized
categories demonstrated in the list below, such as lunches for kids, date nights, etc.

Once inside the category, the user can either search through the shown recipes or filter through
content even more with more categories available. They will then be able to select from a
specifically curated list to find a recipe that suits them.

Wireframes
Wireframes were created through rough sketches and Figma. They helped tremendously with
keeping user experience in mind with focusing on the actions of the application (such as selecting
a store, adding an item to cart, and checking out).

My team wanted to focus on the main feature of the app, which is browsing groceries and recipes.
We made sure to include a search + filter system, navigation system, proper labeling, and
organized information under appropriate categories. When asked after some user testing if there
were any critiques the users stated that it was structured in a relatively straight-forward manner,
making it easy to navigate and understand.

Link to Case Study: https://medium.com/@jessicagray_ui/case-study-foodbinge-3bcb1ec2e03e

Link to Prototype:
https://www.figma.com/proto/Tueaezz5r2Z8NWqgPQgUgE/FoodBinge?node-id=6-55&starting-
point-node-id=6%3A55

Additional Topics
As mentioned, there are many ways to dig deeper into your users. Here are some exercises that
can be effective and the subject of future workshops.

User Empathy
● Personas, Empathy Maps, Interviews

Analytics
● User Funnels, Conversions, Event Tracking

User Testing / Feedback

● A/B Testing, Analytics callback, Prototyping, Eye Tracking / Heat Maps, Usability Tests
References
● What is Information Architecture?
○ https://www.usability.gov/what-and-why/information-architecture.html
● Explain the differences between Information Architecture and UX Design
○ https://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/
○ https://www.geeksforgeeks.org/difference-between-information-architecture-and-
ux-design/
○ https://pritishs.medium.com/the-difference-between-information-architecture-and
-user-experience-93171840f704
○ https://www.ideatheorem.com/insights/complete-guide-to-information-architectur
e-in-ux-design/
● Why is Information Architecture important
○ https://www.netsolutions.com/insights/information-architecture/#why-is-informati
on-architecture-important
○ https://xd.adobe.com/ideas/process/information-architecture/information-ux-arch
itect/
● Defining Information Architecture Objectives
○ https://jarango.com/2022/07/28/the-ultimate-goal-of-information-architecture/
● 3 Components (Ontology, Taxonomy, & Choreography)
○ Information Architecture — Secret to Converting Complexity into Clarity
○ https://blog.optimalworkshop.com/how-to-develop-a-taxonomy-for-your-informati
on-architecture/#:~:text=In%20information%20architecture%2C%20taxonomy
%20refers,an%20IA%20as%20a%20house.
○ https://understandinggroup.com/ia-theory/understanding-information-architectur
e
● Three Pillars/Principles of Information Architecture
○ https://medium.com/@josephhorseradishhren/a-brief-look-into-the-definition-of-i
nformation-architecture-f64bdc99cb3b
● Organization of System (Structures & Schemes)
○ https://www.galaxyconsulting.net/7-blog/167-information-architecture-component
s-organization-systems#:~:text=of%20multiple%20schemes.-,Organization%20
Structures,well%20designed%20hierarchy%20or%20taxonomy
○ https://www.computerworld.com/article/2549487/organizing-web-sites-and-intran
ets.html?page=3#:~:text=Ambiguous%20or%20%E2%80%9Csubjective%E2%
 80%9D%20organization%20schemes,difficult%20to%20design%20and%20ma
intain
○ https://blog.hubspot.com/website/information-architecture
○ https://uxplanet.org/information-architecture-effective-techniques-for-designers-
3c993956b1e1#:~:text=It%20helps%20users%20to%20predict,Hierarchical
● Navigation Systems
○ https://blog.hubspot.com/website/information-architecture
● Labeling & Search Systems
○ (Labeling)
https://www.netsolutions.com/insights/information-architecture/#information-arch
itecture-best-practices
○ (Taxonomies and Labeling)
https://xd.adobe.com/ideas/process/information-architecture/information-ux-arch
itect/
○ (Labeling Systems)
https://www.galaxyconsulting.net/blog/information-architecture-components-labe
ling-systems
○ (Labeling) https://usability.yale.edu/best-practices/organization-and-labeling-0
○ (Search Systems)
https://uxplanet.org/information-architecture-basics-for-designers-b5d43df62e20
○ (Accessibility: Alt Text)
https://www.usf.edu/ucm/web/cms-user-guide/general-website-info/accessibility.
aspx#Images
● Preface
○ https://bootcamp.uxdesign.cc/sitemap-information-architecture-difference-ad7a6
6345f3
○ https://www.usability.gov/how-to-and-tools/methods/card-sorting.html
○ https://www.usability.gov/how-to-and-tools/methods/wireframing.html