Information Architecture & Card Sorting

By the end of this lesson you will be able to organise the content of an app or website into a clear structure, run a simple card sort, and check your structure with a tree test.

Have you ever looked for something in a government website and given up after five clicks? The content was probably there. It was just hidden behind labels that made sense to the office, not to you. Information architecture fixes that.

What is information architecture?

Information architecture (IA) is how content is organised, grouped and labelled so people can find what they need. It is the structure under the screens.

Think of a big supermarket in Pune. Rice, dal and atta sit together. Soaps and shampoos sit together. Signs hang above each aisle. You can find salt without asking anyone. The store has good IA. Now imagine products arranged by the supplier's name. Everything is still there, but nobody can find anything.

IA has three main parts:

1. Organisation: how items are grouped (by topic, task, audience, time or A to Z).
2. Labelling: the words used for groups and links.
3. Navigation: how people move between groups (menus, tabs, search, links).

Organise by the user's mental model

A mental model is the picture a person has in their head of how something works. Good IA matches the user's mental model, not the company's org chart.

A clinic might organise its website by department: "OPD", "IPD", "Diagnostics". Patients think in tasks: "Book a visit", "Get my reports", "Find the clinic". Same content, very different experience.

Run this example to compare two navigation menus for the same clinic.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Labels compared</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1a1a2e; display: grid; gap: 24px; }
    nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
    nav a { display: block; padding: 8px 14px; border-radius: 6px; background: #eef0f4; color: #1a1a2e; text-decoration: none; }
    .user nav a { background: #f3ecff; color: #3b0d8c; font-weight: 600; }
    h2 { font-size: 15px; margin: 0; }
  </style>
</head>
<body>
  <section>
    <h2>Organised by the clinic's departments</h2>
    <nav aria-label="Department menu"><ul>
      <li><a href="#">OPD</a></li><li><a href="#">IPD</a></li><li><a href="#">Diagnostics</a></li><li><a href="#">TPA Desk</a></li>
    </ul></nav>
  </section>
  <section class="user">
    <h2>Organised by patient tasks</h2>
    <nav aria-label="Task menu"><ul>
      <li><a href="#">Book a visit</a></li><li><a href="#">Lab reports</a></li><li><a href="#">Insurance help</a></li><li><a href="#">Find us</a></li>
    </ul></nav>
  </section>
</body>
</html>

You should see two rows of menu buttons. The second row uses words patients actually say. "TPA Desk" is internal jargon; "Insurance help" is the same thing in plain words.

Sitemaps

A sitemap in design is a diagram of all the main pages or screens and how they connect. It looks like a family tree. Draw it before you design screens, so you know what exists.

Clinic app
├── Home
├── Book a visit
│   ├── Choose doctor
│   ├── Choose date and time
│   └── Confirm and pay
├── My appointments
│   ├── Upcoming
│   └── Past (with prescriptions)
├── Lab reports
└── Profile
    ├── Family members
    └── Language

Keep the tree shallow where you can. If people need to go five levels deep, they will get lost. Three levels is usually plenty for a small app.

Card sorting

How do you know which groups and labels make sense to users? You ask them to sort. Card sorting is a research method where participants group topics written on cards into categories.

Card sorting is like asking a friend to arrange your new kitchen: where would they look for the tea leaves? Where for the pressure cooker? Their choices show their mental model.

There are three types:

Run a simple open card sort

1. Write 20 to 40 content items on cards, one per card, in plain words.
2. Shuffle the cards and give them to one participant at a time.
3. Ask them to make groups that feel natural and to name each group.
4. Ask them to think aloud while sorting. Note any card they hesitate over.
5. Photograph the result and repeat with more participants.
6. Look for cards that most people put together, and labels that many people used.

Online tools make remote card sorts easy, but paper cards on a table work perfectly well.

Try a mini closed card sort in this demo. Drag each card into the group where you would expect it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mini card sort</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; color: #1a1a2e; }
    .cards, .group { min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 8px; }
    .cards { background: #f4f4f7; margin-bottom: 16px; }
    .groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .group { border: 2px dashed #a78bfa; flex-direction: column; align-items: flex-start; }
    .group h2 { font-size: 14px; margin: 0; }
    .card { background: #fff; border: 1px solid #c7c7d1; padding: 6px 10px; border-radius: 6px; cursor: grab; }
  </style>
</head>
<body>
  <p>Drag each card into a group.</p>
  <div class="cards" id="pile">
    <div class="card" draggable="true">Blood test results</div>
    <div class="card" draggable="true">Cancel appointment</div>
    <div class="card" draggable="true">Add my mother</div>
    <div class="card" draggable="true">X-ray report</div>
    <div class="card" draggable="true">Change language</div>
    <div class="card" draggable="true">Reschedule visit</div>
  </div>
  <div class="groups">
    <div class="group"><h2>My appointments</h2></div>
    <div class="group"><h2>Lab reports</h2></div>
    <div class="group"><h2>Profile</h2></div>
  </div>
  <script>
    let dragged = null;
    document.querySelectorAll('.card').forEach(card => {
      card.addEventListener('dragstart', () => { dragged = card; });
    });
    document.querySelectorAll('.group, #pile').forEach(zone => {
      zone.addEventListener('dragover', event => event.preventDefault());
      zone.addEventListener('drop', () => { if (dragged) zone.append(dragged); });
    });
  </script>
</body>
</html>

You should see six white cards in a grey pile and three dashed boxes. Dragging a card into a box moves it there. In a real study, cards that people place in different groups (perhaps "Add my mother") tell you a label or group is unclear.

Tree testing

Card sorting helps you build a structure. Tree testing checks it. You give participants a text-only version of your menu tree (no visual design) and a task, such as "Where would you find your last blood test?". You record whether they choose the right path, and how many wrong turns they take.

Because there is no visual design, tree testing tests the structure and labels alone. If people fail, you fix the IA before anyone spends time on screens.

Common mistakes

• Copying the company's departments into the menu. Users do not know your org chart.
• Clever labels. "Explore", "Discover" and "Solutions" sound nice but say nothing. Use clear words like "Lab reports".
• Deep trees. Every extra level is another chance to get lost.
• Testing structure only after visual design. Fixing IA late is slow and costly.

Key points

• Information architecture is organisation, labelling and navigation.
• Good IA follows the user's mental model, not the company's structure.
• A sitemap shows every main screen and how they connect.
• Open card sorts discover groups; closed card sorts check them.
• Tree testing checks whether people can find items in your structure, without visuals.

College website
├── Academics
│   ├── Exam timetable
│   ├── Results
│   └── Syllabus
├── Fees and payments
│   ├── Pay fees
│   └── Scholarships
├── Campus life
│   ├── Hostel rules
│   ├── Canteen menu
│   └── Clubs and events
└── Help
    ├── Contact office
    └── Lost ID card