Information architecture (IA) is the practice of organising, structuring and labelling content so that people can find what they need and understand where they are. If personas tell you who you are designing for, IA tells you what goes where. It is mostly invisible when done well, and very obvious when done badly – think of a website where the fee details sit under “Miscellaneous”.
IA vs navigation
Information architecture is the underlying structure: the categories, the hierarchy and the names. Navigation is the UI that lets people move through that structure: menus, tabs, breadcrumbs, links and search. You design the IA first, then decide which navigation patterns expose it best.
The building blocks
| Part | Question it answers | College website example |
|---|---|---|
| Organisation | How is content grouped? | By audience (Students, Parents) or by topic (Admissions, Academics)? |
| Labelling | What do we call each group? | “Admissions” rather than “Enrolment Procedures” |
| Hierarchy | What sits inside what? | Admissions › Undergraduate › Fees |
| Search | How do people find things directly? | A search box that understands “hall ticket” |
Tip: Use the words your users use. If students say “hall ticket” and the college says “admit card”, include the users’ term in the label or at least in search. Your research notes are the best source of these words.
Sitemaps
A sitemap is a diagram of all main pages and how they nest. It helps the team see the full scope and spot pages that are too deep or duplicated. For a small college website, a first sitemap might look like this:
- Home
- About – History, Leadership, Accreditation
- Admissions – Undergraduate, Postgraduate, Fees, Important Dates, How to Apply
- Academics – Departments, Exam Timetable, Results, Academic Calendar
- Campus Life – Hostel, Library, Clubs, Events
- Contact
Try to keep the most important tasks within two or three levels of the home page. A very deep hierarchy forces people to make many choices; a very flat one gives them too many options at once. Also check that every page has exactly one clear home – if “Fees” appears under both Admissions and Students with different content, people will not know which one to trust.
User flows
A sitemap shows structure; a user flow shows the path a person takes to complete one task. For a parent checking fees, the flow might be: Home › Admissions › Undergraduate › Fees › Download fee structure. Draw flows as boxes and arrows in FigJam, including decision points (“Is the course listed?”) and error paths. Flows often reveal unnecessary steps that a sitemap hides.
Testing your structure
Card sorting
Write each content item on a card and ask participants to group them in a way that makes sense to them. In an open sort they also name the groups, which tells you their vocabulary. In a closed sort you give them the category names and they place the cards. Use open sorts early to discover groupings, closed sorts later to check them.
Tree testing
Tree testing checks whether people can find things in your proposed hierarchy, with no visual design at all. You show a text-only menu tree and give tasks such as “Where would you find the last date to pay fees?” Then you see which path they take and whether they succeed. It is the reverse of card sorting: card sorting helps you build the structure, tree testing evaluates it.
Common navigation patterns
| Pattern | Good for | Note |
|---|---|---|
| Top navigation bar | Websites with 4–7 main sections | Keep labels short and familiar |
| Bottom tab bar | Mobile apps with 3–5 key destinations | Easy to reach with the thumb |
| Hamburger menu | Secondary items on small screens | Hidden items are noticed less – do not hide key tasks |
| Breadcrumbs | Deep content sites | Shows where you are and lets you go up a level |
| Search | Large content sets | Supports, but does not replace, good structure |
Watch out: Do not organise content by your company’s internal departments. Users do not know or care which office owns the fee page; they only know what they want to do.
Information architecture and the code
Your IA later becomes real page structure. Navigation menus are built with nav and lists, and page sections use headings in a logical order – see HTML semantic elements. A clean hierarchy also helps screen-reader users and search engines understand the site.
With structure in place, you are ready to sketch screens. That is the next lesson: wireframing.