3. Information Architecture (IA) & Sitemapping
The Blueprint of Content
Information Architecture (IA) is the structural design of shared information environments. In simpler terms, it is the process of deciding how to arrange the parts of something to be understandable. Without a solid IA, even the most beautiful UI becomes a labyrinth that frustrates users.
🏗️ Sitemaps: The Visual Hierarchy
A sitemap is a diagram showing the relationship between pages of a website or app. It helps designers and developers understand the 'Depth' and 'Breadth' of a product before a single pixel is painted.
- L0 (Root): The Homepage.
- L1 (Primary): Main navigation sections (e.g., Shop, About, Profile).
- L2 (Secondary): Sub-sections nested under primary nodes (e.g., Shoes, Security Settings).
⚖️ The 3-Click Rule
A gold standard in UX engineering is that a user should never be more than three clicks away from the information they need. Deeply nested menus increase cognitive load and lead to 'Drop-off'—where users leave your app because they cannot find what they want.
🧩 Labeling & Navigation Systems
Clear labeling is critical. Avoid creative, vague terms like 'The Portal' when 'Dashboard' is what the user expects. Good IA relies on Mental Models—designing the navigation to match how the user naturally thinks about the category.
In the Sandbox, you will see a flat, disorganized list of pages. Your mission is to build a logical 3-level sitemap. Drag 'L0' to the root, categorize 'L1' sections (About, Products, Contact), and nest at least two 'L2' sub-pages under them. A sitemap is only valid if it follows a logical parent-child hierarchy.
Build a Site Map
Need: Home(L0) + About, Products, Contact(L1) + ≥2 sub-pages(L2)
Knowledge Check
Ready to test your understanding of 3. Information Architecture (IA) & Sitemapping?