--- title: "Information Architecture" url: "https://insideuxdesign.com/en/glossar/information-architecture" language: "en" description: "What is information architecture? A plain-language guide with an example and tips. Learn how to organize content so people find what they’re looking for." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T13:04:07+02:00" --- # Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. - **Buchstabe:** I UX glossary # Information Architecture Information architecture describes how the content of a website or app is structured and labeled. It helps people find what they’re looking for and understand where they are. Imagine you’re on your city council’s website trying to find out how to renew your passport. The menu offers “Directorate II”, “Citizen Services Division” and “Council News”. You click around, end up on the library’s opening hours and eventually give up. All the information is there. It’s just organized the way the administration thinks internally, not the way people search. ## Explained simply Information architecture (IA for short) describes how the content of a website or app is structured and labeled so people can find what they’re looking for and understand where they are. Think of a supermarket: someone decides that pasta sits next to the tomato sauce, which aisles exist and what the signs above them say. That invisible order is the information architecture. The signs themselves are closer to what navigation is. The term was coined by architect and designer Richard Saul Wurman, who says he introduced it in 1976 at the national convention of the American Institute of Architects. The field became widely known on the web mainly through the book by Louis Rosenfeld and Peter Morville, first published in 1998 and now available as “Information Architecture: For the Web and Beyond” (with Jorge Arango). ## What information architecture is made of Rosenfeld and Morville distinguish four systems that work together: the **organization system** (what logic is used for grouping, such as topic, audience or task?), the **labeling system** (which words appear on menu items and links?), the **navigation system** (how do people move through the structure?) and the **search system** (how do they find content by searching?). It’s important to tell IA apart from navigation. The Nielsen Norman Group describes IA as a foundation that isn’t visible in the interface at all. It’s documented in spreadsheets and diagrams. Menus, breadcrumbs or filters are the visible elements built on top of that structure. So the rule is: define the IA first, then design the navigation. You can read more in [An Introduction to Information Architecture](https://insideuxdesign.com/en/blog/introduction-to-information-architecture). ## An example Back to the city council. Before, the website mirrors the org chart: departments, directorates, divisions. The team runs a [card sort](https://insideuxdesign.com/en/glossar/card-sorting) with local residents. Almost everyone groups content by life events such as “Moving house”, “ID and passport” or “Family”. Afterwards, the website is organized around these needs, and the departments only appear as the responsible office on the relevant pages. A follow-up [tree test](https://insideuxdesign.com/en/glossar/tree-testing) confirms that participants now find the passport information much faster. ## Why it matters Good visual design can hardly rescue a weak IA. When labels are unclear or content sits in unexpected places, people search longer, give up or call support. Good IA follows the user’s [mental model](https://insideuxdesign.com/en/glossar/mental-model), meaning their idea of where something ought to be. ## In practice - **Think in tasks, not departments.** For every menu item, ask what someone wants to get done with it. Internal names rarely belong in the menu. - **Collect first, then organize.** Make a content inventory of all pages and features before you create categories. Otherwise you only organize what happens to come to mind. - **Test the structure without design.** Card sorting gives you ideas for the structure, tree testing checks it. Both are quick and save you from costly rework later. ## Related terms [Card Sorting](https://insideuxdesign.com/en/glossar/card-sorting), [Tree Testing](https://insideuxdesign.com/en/glossar/tree-testing), [Mental Model](https://insideuxdesign.com/en/glossar/mental-model), [Progressive Disclosure](https://insideuxdesign.com/en/glossar/progressive-disclosure) ## Sources - [Jen Cardello: The Difference Between Information Architecture (IA) and Navigation. Nielsen Norman Group, 2014](https://www.nngroup.com/articles/ia-vs-navigation/) - [Louis Rosenfeld, Peter Morville, Jorge Arango: Information Architecture: For the Web and Beyond. 4th edition, O’Reilly, 2015](https://www.oreilly.com/library/view/information-architecture-4th/9781491913529/) - [Dirk Knemeyer: Richard Saul Wurman: The InfoDesign Interview. InfoDesign, 2004](https://www.bogieland.com/specials/wurman_interview.html) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)