Navegação
×
Search
UX
Information Architecture: How to Organize UI Content
Download in PDF
Content list
UX

Information Architecture: How to Organize UI Content

Information Architecture: How to Organize UI Content

Information Architecture is a work that can go unnoticed by the customer, but it is a fundamental process in creating digital products.

To develop websites and applications that are easy to navigate, designers need to organize, plan and structure content so that users can easily find what they are looking for.

This is where Information Architecture comes in; those responsible for Information Architecture determine the best way to organize and classify elements.

Keep reading to learn about IA, a process allowing users to find everything they need with minimal effort!

So, what is Information Architecture?

Information Architecture (IA) is the study and representation of how to organize, categorize and present a website's content so that users can find what they are looking for. This planning should also illustrate how a product should work.

The degree of depth will depend on each designer. Still, it should cover the complete structure of the product so that anyone can visualize the plan and understand the content, steps, and navigation logic.

IA is very similar to a blueprint: just as a service blueprint details each step of a process and point of contact with the customer, Information Architecture details all website's content so that everyone involved in the project can understand it and contribute to it.

Furthermore, IA is fundamental to improving or developing new features, assisting in decision-making for future changes, and understanding delivery schedules.

The result of the Information Architecture work allows users to understand the logic of the environment they are in and find what they are looking for quickly and easily.

Reading tip: Why Is Empathy Essential For UX Design?

Information Architecture: User + Content + Context

Information Architecture user content context

First, UX designers need to know their customers and the company's business goals to find out the best way to store and make information accessible to the users of a product.

After this understanding, it will be possible to classify, index, and catalog the information in a way that makes sense to their target audience.

This way, the Information Architecture defines the necessary functions for a website or app according to the usability preferences of its target audience.

Main components: Ontology, Taxonomy, and Choreography

Information Architecture main components

Many UX professionals benefit from the processes below without realizing the theory behind each method. So if you work with UX, you have probably already used a technique from Ontology, Taxonomy, or Choreography without being aware of it.

Ontology: understand

Ontology means establishing the meaning behind what we want to say. In this phase, rules and standards are defined.

Designers or UX Writers can create a glossary that guides the team and helps them understand how users interpret information taking into account factors such as language, words, and symbols.

Pay close attention when naming your products, activities, functions, and features, as words should reflect meanings that are familiar to users, so avoid jargon or unusual terms.

Remember: People have preconceived ideas about how things should be labeled and organized based on past experiences.

Therefore, regional or cultural differences significantly impact users understanding of how things are organized.

Taxonomy: organize

Taxonomy is the practice of grouping, classifying, and labeling items according to their similarities. This activity typically follows the user search and content inventory processes.

Information Architecture can classify items using categories, sections, or metadata tags. IA will choose the most appropriate taxonomies based on your target audience's mental model.

This way, designers "tag" content with metadata so that users can search for content based on its designated taxonomies.

For example, a clothing e-commerce store might consider several taxonomies: one based on fabric type, one based on the garment, and another based on color.

The Information Architect would then tag an item with the following tags: cotton (type of fabric), shirt (a piece of clothing), and red (color). This way, a shopper with the mental model "I need a red shirt" could easily find this item.

During this process, it is essential to remember that the content and functionality of the product are continuously growing, so the way you organize must be easily scalable.

Taxonomies can be divided into two concepts:

  • Classification: used to join similar elements together;
  • Hierarchy: used to sort information – according to its importance, frequency, alphabetically, numerically, or last seen.Choreography: integrate

The choreography outlines the rules for how all these components will interact with each other. Therefore, it's the ability to find the best route to structure content according to your target audience and business objectives.

Of course, to structure the best flow, it is necessary to plan and organize data in different parts of the system, considering issues of Ontology (meaning) and Taxonomy (categorization) to create an experience that delights the user and does not distract them from what they are trying to do.

Information Architecture methods and disciplines

Information Architecture relies on several fields and disciplines to organize information within the user interface.

See below some of the most valuable elements for Information Architecture:

Cognitive Psychology

cognitive psychology information architecture

Cognitive Psychology studies human behavior and the different factors that influence human perception. So this discipline is indispensable in Information Architecture as it helps define how people structure information.

Mental models: Mental models are preconceived ideas and assumptions we already have in mind before interacting with a product. This way, when designers consider the mental models of their users, they create a way of organizing the content according to their users' language and how they expect the system to behave. So the information is located where users expect to find it. For example, when a user is looking for contact information, they will probably look for a link that says something like "Get in Touch" or "Contact Us."

Gestalt principles

The Gestalt Principles explore users' visual perception of the relationship between objects, such as similarity, continuity, proximity, symmetry, and closure. All these factors can influence how designers organize graphical information on screens. This way, Gestalt principles decide how to present and organize information in the interface.

Biblioteconomy

Biblioteconomy studies how to archive, catalog, and locate resources. And one of the most valuable fields for Architecture Information resides in cataloging and archiving.

  • Catalog: is the process of creating metadata and linking them to content so it can be easily searched later.
  • Archive: is the process of building and curating archives that are full of documents and data (content). To create and curate an archive, you need to evaluate information and be able to access it later. This way, archival science seeks to improve methods of evaluating, storing, preserving, and cataloging content.

Both elements are directly translatable to the user experience. The goal is to create an Information Architecture with appropriate and usable metadata, with content available in well-structured files.

This categorization process is what makes it easy for you to find movies on Netflix, for example. In addition, the platform makes suggestions for you based on similar movies you might enjoy because they are categorized and stored in the same genre category.

Navigation systems

navigation system

A good navigation system should clearly indicate the user's current location; this is especially important in a complex system.

According to Nielsen, a navigation system should always be answering three questions:

  • Where am I now?
  • What was I doing before?
  • Where can I go?

A well-designed system helps users build a mental model of the information hierarchy so they can quickly understand the logic behind a website.

There are three main types of embedded navigation:

  • Global;
  • Local;
  • Contextual.

1) Global Navigation: featured on every page and commonly referred to as the "site-wide navigation bar." It typically sits at the top of the page and has a set of links that allow users to access the top-level pages of a site and a link to the home page (presented as the logo).

2) Local Navigation: helps users explore what's nearby. It is also known as sub-navigation or page navigation. It's like an extension of global navigation. There are three common ways to organize global and local navigation: Inverted L, Horizontal, and Embedded Vertical.

3) Contextual Navigation: if the information doesn't fit into the global or local navigation structure, we can use contextual navigation to direct users to related pages, supporting associative learning. In e-commerce, this could be "related products" or "you might also like" links, typically used for cross-selling.

Other types of navigation can be: social, by tags, or supplementary.

Information Architecture menu navigation
Sketches | Inis Leahy's portfolio, Bootcamp MID student

Labeling systems

The name we give to page and website links ensures that navigation and hierarchy are correctly labeled. With the information grouped and organized, it is possible to build a navigation system that facilitates information recognition.

Information Architecture principles

Information Architecture principles

Dan Brown, the founder of EightShape, defined eight principles to guide Information Architecture:

Principle of objects

Your website content should be seen as something alive. Even content has a life cycle, and it is constantly changing. Objects are like templates, so their characteristics and behavior provide a framework for thinking about all the circumstances of a particular object.

When Dan Brown speaks about objects, he refers to:

  • a consistent and recognizable internal structure;
  • a set of behaviors.

So when starting a new project, map and identify all types of content: common structures that will be used throughout the site.

Brown uses the example of a cooking website; we can already imagine the information that should appear on recipes like ingredients, quantity, preparation time, etc.

This structure can be organized, presented, and connected to other content in various ways. For example, there can be a relationship with recipes with the same main ingredients. Recipes can also have behaviors, such as Christmas recipes having higher priority at the end of the year.

Principle of choices

Your pages should only offer options that are relevant to your users. Too many alternatives can confuse, cause anxiety or overwhelm the user — a paradox of choices.

So at the top of the hierarchy, try to keep the options as narrow as possible. Stick to choices that give users exactly what they need at that point in their journey and nothing more.

Principle of disclosure

Keep users interested. This principle comes from a design concept called progressive disclosure which refers to our ability to process new information. Since we have a limit of information that we can absorb at a time, use this strategically so users can anticipate what's to come.

Therefore, spread the information gradually. Organize your content so users can have enough time to absorb the information before more content is presented. For example, think of fashion e-commerce; on the main page, you won't have access to every piece of information, such as fabric, skirt length, and fit.

Principle of exemplars

Show examples of the types of content your users will have in each category you submit. If it is a corporate organizational site, it may have categories such as:

  • Forms (application for equipment, expense report);
  • Policies and Regulations (holidays, working from home, maternity leave).

You can also make quick links for the most searched items. Additionally, the examples help tell users about how the website is organized.

Principle of front doors

The user will not always arrive at your website from the home page. Thus, prepare all pages to welcome visitors.

Always tell your users where they are; if they have "landed" on a product page through an Instagram ad, the site must indicate which page the user is on, giving tips on how to return to the home and browse similar products. This is important to provide new users with a sense of logic in navigating your website.

The principle of multiple classifications

People look for information differently. So, your website should allow visitors different options to search for something.

If we take the cooking website as an example, some people might type in a general topic like pasta, while others will search for the exact recipe they want, such as fettuccine alfredo.

It is essential to take this into account in your search system. However, be careful not to provide too many options for finding information, as this could end up overwhelming users.

Principle of focused navigation

Brown noticed that many teams referred to the navigation menu as global navigation or left menu bar. However, the location where the menu appears should not be the defining factor.

This way, designing the navigation means establishing a strategy to find content on the site according to the focus you want. This strategy may involve various forms of navigation.

On a website that focuses on content, for example, navigation can take different forms:

  • Topics: a main navigation website menu with the main thematic areas.
  • Timely: a small menu providing links to specifically relevant or seasonal subtopics.
  • Signposting: a menu that appears on internal pages to show how the article has been classified, allowing users to explore these categories.
  • Marketing: a small menu that appears alongside the topic navigation providing links to services offered by the organization.

Principle of growth

The content of your website will constantly be growing, so your Information Architecture must be prepared for this.

Designing a structure that can accommodate twice as much content in the future as it does today is challenging. And despite the appearance that digital space is unlimited, access and content presentation must correspond with the limitations imposed by a physical space.

This is because the cognitive processes we use to look for books in a library are the same as those for looking for content in a digital space.

This way, a website can grow in several ways simultaneously:

  • Adding content to existing categories: more articles within a topic;
  • More content formats in existing categories: videos on topics that were dominated by text-only content;
  • Adding categories: a new topic.

Reading tip: UX Writing: How Words Can Help User Experience

Deliverables: what can IA specialists offer?

Site Maps

information architecture deliverables: sitemap
Site map created by Daiane Thomé, Bootcamp MID student.

The sitemap is a visual organization model showing all the components and information a digital product contains. For example, with a sitemap, you can see how designers structured and organized content through a website.

Along with wireframes, this is one of the most important deliverables in UX Design.

The sitemap helps define Information Architecture — the art and science of organizing and labeling a product's components — that will support navigation, localization, and usability.

It's also a way for developers to get information about the website's structure and how the backend needs to be configured.

Moreover, sitemaps are valuable references to have as a resource, which your team will adjust as the product evolves based on iterative prototyping and user testing.

During the design workflow, a numbering system is often employed to keep everyone on the same page when discussing product content.

Wireframes

wireframes
Amanda Menoti portfolio, Bootcamp MID student.

Wireframes show a website design without worrying about aesthetics. Instead, the goal is to show how to distribute information and present the navigation according to the specifications of the sitemap, using the defined taxonomy and metadata to extract data.

Personas provide input on what content should be displayed and where it should be displayed. Moreover, including examples of content in your wireframes is good to ensure that the design can accommodate the necessary information.

wireframe
Wireframes of a Wikipedia project | Jonathan Andrade Portfolio

Visual hierarchy

The visual hierarchy of a website tells the order, focus, and size of elements across a design. And as in any hierarchy, the elements should be organized according to their order of importance.

Therefore, content gains prominence according to the hierarchy established by IA professionals – which must be aligned with the company's or product's objectives.

For example, most westerners read from top to bottom, from left to right. For this reason, F- or Z-shaped website layouts tend to be highly popular.

Reading tip: Visual Hierarchy: How To Prioritize and Highlight Information

Content Inventory and Audit

IA professionals need to have a throughout understanding of the content a product is offering. Content inventories allow architects—and everyone involved in the project— to have a macro perspective of the content.

Therefore, the content inventory (typically a spreadsheet or list) should show all of the product's information and where to find them.

At the same time, content audits provide a view of how valuable, accurate, and effective the content is (the specialists will classify content based on these metrics).

UX Research

The person in charge of Information Architecture can also lead or participate in user interviews. Thus, the IA professional joins other team members to ask questions related to product design.

Through tools such as Card Sorting and Tree Testing, it is possible to see how users group information into categories, allowing designers to understand users' mental models.

Ultimately, usability tests determine whether the created structure works for users.

Tools that will make your job easier

The Information Architecture Institute is a non-profit organization that promotes the concept of IA and the exchange of knowledge among professionals in the field. You can find tools and a glossary on IA terms on their website.

Check out below the most common apps and tools used in IA that will surely help you organize content:

Don't forget to like and share if you enjoyed this content! This small gesture helps us a lot! Feel free to continue browsing, and if you'd like to stay up-to-date, sign up for our newsletter!


We are proud to have new students hired by great companies every month in countries like
Brazil, the United States, Ireland, Germany, Spain, Portugal, Austria, Czech Republic, New Zealand, and Canada.

Bootcamp MID - Inscrições AbertasCurso completo de Product Design (UX, Research e UI)

Qualidade internacional, teoria, muita prática e acompanhamento de mentores. O MID é o resultado de anos de experiência na profissão e o mercado de UX.