UX Design 101- Information Architecture — Structuring & organizing content

UX Design 101: Information Architecture — Structuring & organizing content

By Prototypr

UX Design 101- Information Architecture — Structuring & organizing content
UX Design 101- Information Architecture — Structuring & organizing content

Alongside the ability to Think in (User) Flows (Session 02), Information Architecture is one of the most important, foundational components of creating impactful human-centered Interaction Design.

If a designer is not thoughtfully structuring and presenting content to a user, they are not considering a user’s context and how they will extract value from what is being designed when interacting with a product or service.

For UX Designers and Researchers, the ability to understand a user’s contextinterpret how users extract meaning, then effectively structure and present content to them in a way that is relevant to their needs is a critical skill in their toolkit.

Information Architecture defines how content will be structured and presented to a user when they are interact with your design. The structure of Content + a Users Context determines the Meaning that they extract, and subsequently their Interpretation of what it means (for them).

What are the goals of this session?

Building upon the previous session (Thinking in Flows), this session provides an understanding of the underlying principles of Information Architecture — including how to design content structures that effectively convey meaning to users within the context of their experience.

Additionally, it introduces methods for structuring and organizing content in ways that effectively support a user’s journey through a system and facilitate desirable outcomes for customers and the business.

The participatory exercises in this session encourage participant to build upon their output from past sessions. This allows participants to better understand how the the techniques being taught work together and how they can be applied to a real project that they are working or have worked on in the past.

Quick context — What is this?

This session is part of a learning curriculum that I designed to incrementally skill up and empower a team of Designers and Researchers whose skillset and ways of working needed to evolve to keep up with changes in the way we think about and execute the design.

Each session in the curriculum aims to simplify the complexities of human-centered interaction design using real-life examples from my own professional experience alongside established theories from industry experts.

The sessions are intentionally structured as short, achievable hands-on learning workshops that balance technique (hands-on, doing) with theory (readout, presentation).

I am sharing this content to help others understand the fundamentals of human-centered interaction design and the multi-dimensional skillset needed to be successful in complex, collaborative environments.

What is the focus of this session?

Context — An understanding of how to approach the work
Craft — An understanding of how to do the work
Communication — An understanding of how to interact and collaborate

Key learnings from this session.

Information Architecture enables us to make sense of complexity by effectively structuring and presenting content to users in a way that is relevant to their context and needs.

Effective Information Architecture (IA) sits at the intersection of Content, Context, and Users.

Diagram credit: “Three Circles of Information Architecture”, Peter Morville, 2004

Information Architecture = Making sense of complexity

Complexity = Content + Meaning + Interpretation

  • Content — Words, documents, images, videos, or whatever you are arranging or sequencing.
  • Data (Meaning) — Facts, observations, and questions that a user has about something.
  • Information (Interpretation) — What a person interprets and believes to be true about something from.
Example from: “How to Make Sense of Any Mess”, Abby Covert, 2014

To effectively structure content that conveys information to a user, a designer must understand and consider several factors:

  • Users — The design of content needs to consider the pre-existing beliefs, and experiences of our users.
  • Context — The design of content needs to consider the environment and situations in which a user will engage with it.
  • Interpretation — The design of content needs to be intentional, conveying meaning to a user through arrangement & sequencing.
Example from: “How to Make Sense of Any Mess”, Abby Covert, 2014

Thoughtful IA makes a design good, not just good-looking.

Effective, the user-centered design does NOT prioritize novelty over discoverability or aesthetics over usability.

Example: Marriott Bonvoy App, iOS Version, Summer 2019

User Flows & Information Architecture work in tandem

User flows structure (and depict) how a user experiences a system over time.

Information Architecture goes a level deeper and is concerned with how content is structured and presented to a user at each touchpoint within the system, as experienced over time.

As Interaction Designers, we have to continuously and iteratively evaluate what we are designing through two lenses:

  • A User’s Flow — The system and paths that we envision will guide and enable a user to achieve a goal within our product.
  • Content Layer (IA) — The structure and presentation of content to our users. (copy, functionality, affordances, etc…)

Abby Covert (Abby the IA) defines the critical components of information architecture as Ontology, Taxonomy, and Choreography.

Concept from: “How to Make Sense of Any Mess”, Abby Covert, 2014

Contextualizing the critical components of information architecture within the design process makes them easy to see and understand

We first have to understand the meaning. Once we do, we can use that understanding to develop organizational schemes. Finally, we can apply these schemes to how we present content to users.

  • Ontology = Understanding
    As designers, when considering the Ontology of content we are seeking to understand how our users interpret information: language, words, signs/symbols.
  • Taxonomy = Organizing
    As designers, when considering the Taxonomy of the content we are consciously organizing content and naming it in ways that make sense to our users.
  • Choreography = Applying
    As designers, when considering the Choreography of the content we are intentionally designing ways to apply and deliver content to our users, within a system, over time.

Ontology = Meaning

“A set of concepts and categories in a subject area or domain that shows their properties and the relations between them.”

When architecting information, why is Ontology important for us to consider?

  • Context — Things can take on different meanings based on the context in which a user interacts with them.
  • People — People Interpret meaning differently based on their own backgrounds and experiences.
  • Culture — Cultural and language differences can have a significant impact on the interpretation of content.
Meaning can be interpreted much differently based on a user’s context (Regional, cultural, etc…)

Taxonomy = Organization

“The science (and practice) of classification of things or concepts to create hierarchy and organize meaning.”

When architecting information, why is Taxonomy important for us to consider?

  • Context — Organization schemes can succeed or fail based on the context in which a user engages with them.
  • People — People have pre-conceptions of how things should be named and organized based on their backgrounds and experiences.
  • Culture — Regional or cultural differences can have a significant impact on an understanding of how things are organized.
Organization schemes should be directly correlated to a user’s context (needs/goals, understanding, etc…)

Choreography = Presentation

“The art (and practice) of designing and arranging choreographic sequences that guide the movements of dancers for a performance.”

Choreography brings content together in a way that is meaningful to our users! It enables us to:

  • Design with Intent… For our users
    Choreography is the act of designing how content is presented to our users… In ways that align to their needs, goals, and behaviors while considering their context.

Choreography is designing with intent.

It is achieved when we truly understand our users, the context of their interaction with our product, and how they extract information and value from the content during their interaction.

Example: Choreography in action. For additional details, see the facilitation deck in section “D” below.👇👇🏼👇🏾

How is this session structured & facilitated?

This session is a mix of theory and short, hands-on activities that enable participants to apply concepts in real-time.

Participants are walked through the underlying principles of Information Architecture, the interconnected relationship of a user flows and the structure of content, and provided real-world examples of how these principles and relationships can be utilized to effectively shape design decisions. Throughout the session, several exercises are used to reinforce theory.

The facilitator deck & exercise structure can be reviewed below. 👇👇🏼👇🏾


How can you execute the exercises in this lesson?

There are two short, participatory exercises intertwined within the content of this session. Exercise 1 is a standalone activity, Exercise 2 builds upon it.

Exercise 1: Candy Sorting (Card Sort)

The goal of this exercise is to demonstrate how Context (Ontology) can have a distinct influence on Organization (Taxonomy).

In this exercise participants are provided with an assortment of different types of wrapped candy. They are then given a user scenario and tasked with determining how to sort the candy in ways that are relevant and useful to the user(s) within the scenario.

Cheers to General Assembly for the inspiration for this exercise!

Using candy is a fun, approachable way to get participants engaged with the subject matter. However, if you want to keep it low-fi/low-cost, as an alternative you can make a simple list of items, print them out, and cut them into cards for sorting. List categories that work well for this exercise include Toys/Games, Consumer Electronics, or Fruits/Vegetables.

Exercise 1: Format

Walk participants through two different user scenarios, one at a time, then have them develop organizational schemes that could serve user needs within the context of the scenario provided.

  • This will be a collaborative exercise. Have participants break-up into small groups of 2–4.
  • Introduce them to the format and goals of the exercise and provide them with the materials they will be sorting (candy, cards, etc…) as well as post-it notes and sharpies so that they can label their categories.
  • Walk participants through the first user scenario (See example scenarios below), then give them 5–8 minutes to sort/organize their candy (or cards) in ways that are relevant to the user in the scenario provided.
  • Instruct them to create labels for their sorting categories using the post-it notes and sharpies provided.
  • Encourage participants to consider the user and their context to define meaningful sorting categories. If a group finishes quickly, prompt them to reframe their assumptions and create additional organizational schemes or have them sort their items another level deeper within the top-level categories they have defined.
Example: Activity prompts (Exercise 1)

Exercise 1: Wrapping-up

After each scenario, have participants spend a few minutes sharing and discussing their ideas and reflecting on what was unexpected or challenging about the exercise.

  • After sorting, ask 1–2 groups to quickly talk about the organizational schemes they have created and why they believe they serve the needs of the user within the context of the scenario provided. If no one steps up, ask directly.
  • As they are discussing their ideas, ask them what they learned and what, if anything, was challenging or unexpected about the exercise.
Sorted candy (Exercise 1)

Exercise 2: Mind Mapping (Candy Mind Map)

The goal of this exercise is to demonstrate how Mind Mapping can be utilized as a simple, low-fidelity approach for visually organizing content and identifying relationships and connections.

In this exercise participants are introduced to the basics of Mind Mapping, then asked to practice creating a Mind Map Diagram using the output of their candy sort. Their mind map sketch should articulate the sorting patterns that they generated and highlight the connectivity between items and groups.

Example: Mind Map Diagram depicting relationships & connectivity within a system

Exercise 2: Format

Walk participants through the basics of Mind Mapping and provide examples (see the facilitation deck in section “D” above), then have them quickly sketch their own mind map using the organizational schemes that they created during the Candy Sort (Exercise 1).

  • Provide participants with a worksheet or a lager sheet of blank paper (11×17/tabloid size works best) as well as a Sharpie.
  • Using the worksheet, give participants 3-5 minutes to sketch a mind map for one or more of the sorting patterns that they created during the previous candy sorting exercise.
  • If a participant finishes quickly, challenge them to further consider the context (user scenario from the candy sort exercise) to think beyond what they previously defined and develop an even more meaningful organizational scheme.
Example: Activity prompt + blank participant worksheet (Exercise 2)

Exercise 2: Wrapping-up

At the end of the exercise, have participants share what they have created with other participants. Then spend a few minutes reflecting on what was useful, unexpected, or challenging about the exercise.

  • Have participants hang up their mind maps or arrange them on the table so that their peers can see and interact with them.
  • Ask participants what was useful, unexpected, or challenging about the exercise. If no one steps up, ask directly.
  • During the discussion, ask participants if they can think of any situations in their day-to-day work where Mind Mapping would be useful. If the group cannot produce any examples, provide a few examples of your own.

Leave a Comment

Leave a Reply

Your email address will not be published.

InVision + Figma: A perfect match

How much money does a Senior Product Designer make?

12 Months in an Advertising Agency: A UXer’s Guide

9 Inspiring UX Portfolios

Wireframing for beginners

How To Get Started In UX Design

Save time on your next project with these 50 free UX/UI icons

UI/UX spotlight: 5 apps from Latin America