Editorial
The Gist
- Key difference. UI involves the visual elements users interact with, while IA focuses on content organization and labeling.
- Process order. IA comes before UI in UX design, acting as 'the design before the design.'
- Testing importance. Early IA evaluation helps avoid underperforming UI design, saving time and money.
User interface (UI) design is a very well-known term, but information architecture (IA) is not. Yet, both are indispensable components of user experience (UX) design, and they are intertwined. This article explains both terms, the role each plays, how each is being created and tested, in what sequence they must happen, and where in the UX process they fit.
What Is User Interface Design? What Is Information Architecture?
- User interface (UI) design refers to the presentation layer of software or websites. This includes the layout, typography, color scheme and other visual elements that are presented to the users. It also includes the design of the interactions and flows that users take when engaging with the product.
- Information architecture is the organization and labeling of the content, leading to software or websites that make it easy and intuitive for users to navigate and find the content they are seeking.
Comparison Between UI and IA
How do UI and IA relate to each other? At the most basic level, a user interface consists of data elements and functional elements:
- Data elements are the various pieces of content or objects. For example, the data elements on Amazon.com are the various products and related product information.
- Functional elements are the actions that can be executed on the data elements, e.g., create, edit, copy, delete. On Amazon.com that would be adding a product to the cart or magnifying a product image.
Hence, UI design is about creating a solution that incorporates all data and functional elements in such a way that users can utilize them to accomplish objectives with ease and joy. This is not to say that there are no other elements on screen. In addition to data and functional elements, there are also non-functional elements, for example visual design treatments portraying aesthetics and branding.
IA is specifically focusing on the data elements: What content and objects belong together? Maybe they have an affinity in all cases. Maybe they have a closeness only in certain workflows. What should a category be named that hosts related data elements? Imagine a company’s intranet site. There may be companywide information, department-specific information, location-specific information and more.
Let’s say the company likes to incorporate company news and the weather forecast. Should both items be clumped into a new category on the site that would be called “News”? Or should the company news go to the companywide information section while the weather forecast goes to the location-specific section? Note that these kinds of decisions are not about the functionality as much as the placement and naming of content — both of which should align with the users’ mental models.
IA can be considered user-centered design, because the right (i.e., usable) organization and labeling is an iterative process considering the characteristics and needs of users. Unlike UI design, however, the outcome (the information architecture) itself is not something that shows directly and in full on the UI. Rather, it’s a taxonomy that informs UI design: what data elements need to be shown together, e.g., on one screen, and what that screen, screen areas and individual items should be named.
Related Article: Let Experience Design Be Your Competitive Advantage in 2022
Anchoring in UX Process
The three main phases of the user experience (UX) process are user research, design and evaluation.
It is an iterative process where any phase may be gone through several times as needed — based on end user feedback gathered during the evaluation phase.
IA and UI design reside both within the design phase and as such are oftentimes not considered separate. If we do look at them separately, however, two things become apparent:
- IA happens before the UI design because the taxonomy of data elements dictates the structure, layout and navigation of the product’s presentation layer. Because of this, IA is essentially “the design before the design.”
- Both need to be validated in their own evaluation step. While it is feasible to test only after both IA and UI Design have been created, one mantra of UX applies: Test as early as possible to fix deficiencies as quickly as possible to save time and money. If the IA is underperforming, the subsequent UI design will, too. On the other side, UI design may depict a high-quality IA in a suboptimal way that does not work for target users.
Based on these considerations, the UX design process emphasizing the different roles of IA and UI design looks something like this:
Researching for IA and UI
Since both IA and UI Design are part of a UX design process that is user-centered, IA and UI design must be based on user research that elicits knowledge about the target audience, their characteristics and their needs. There is a concept that helps to determine what information and insights are needed; it is called the "context of use" and is comprised of the following elements:
- Users – Who are the people who engage with the product?
- Goals – What outcomes do users try to achieve?
- Tasks – What activities do users undertake to reach certain goals?
- Resources – What equipment and tools do users have at their disposal when carrying out their tasks?
- Environment – Where are the users situated when carrying out their tasks? This can be the physical, social, cultural and organizational environment.
The answers to these questions inform both the IA and the UI Design.
Related Article: UX Research vs. UX Design: Exploring Key Differences
Designing IA and UI
The crafting of a UI involves sketching, wireframing and composing pixel-perfect screens hosting data elements, functional elements, as well as aesthetic and brand elements. UI design further specifies screen and component states, interactions within screens, as well as navigation within and between screens. This work can be done with a pencil on paper, quick mockup tools like Balsamiq, or full-feature design products like Figma.
IA entails the categorization and naming of data elements/content. A prominent method to do so in a collaborative setting with target users is "card sorting":
- Open card sorting: The information architect prepares cards that each feature the name of a data element. The target users are then asked to review the cards and put those together into piles that they feel belong together. Then, the target users name each pile.
- Closed card sorting: The information architect prepares cards that each feature the name of a data element. The target users are then asked to review the cards and sort them into categories that the information architect has defined and named beforehand.
Card sorting can be done in person with paper cards or — especially in remote settings — through software like optimal workshop or maze.
Evaluating IA and UI
A good UI is one that allows users to accomplish their goals effectively, efficiently and comfortably. The premier way to test this is through usability testing, where test users from the target audience are being asked to carry out real world tasks on concepts, prototypes or actual products. They then provide feedback based on the experience they gained from these tests.
When is an IA a good IA? As mentioned above, a good IA facilitates the efficient navigation and finding of content. We can test that through usability testing and analytics. But usability testing implies that there is at least a low-fidelity concept that is experienceable for test users, so to some degree a UI design must be already there. Doing analytics means that not only is there a UI design, but it is already implemented and deployed.
If we want to test as early as possible, i.e., before UI design starts, is there a way to test the IA when it has not been translated into a UI design yet? An effective method is tree testing. Target users are shown an abstract representation of the product’s content structure or site map, e.g., as a simple diagram or a hierarchical list of content items. The target users are then tasked to find a certain data element in the diagram or item list. Tools supporting interactive tree testing include those mentioned above for card sorting: Optimal Workshop and Maze.
Diverse Backgrounds Fueling IA and UI Roles in UX Design
UX professionals have always come from diverse academic backgrounds. Over the years, the discipline has become even more diverse. Also, the demand in the job market for skilled professionals has increased over the years. Consequently, you will find people with almost any kind of background and degree working in UX. To name just a few: graphic design, multimedia design, product design, fine arts, HCI (human-computer interaction), UXD (UX Design), architecture, psychology, computer science and engineering.
The obvious job title for those designing the UI is UI designer, but there are countless other titles including interaction designer, UX designer, UX architect, product designer, web designer and more.
So who is doing IA? In a lot of cases, it is the same professionals who design the UI. However, information architect is a job title on its own and typically attracts people with a degree in information science, library science or related other fields.
Due to the level of specialization, there are much fewer information architects than UI designers, and they are typically employed in larger companies that can afford a role so highly focused.
Webinar
Sep
25
CMS Briefing: A Live Look at What’s Next in AI-Driven Platforms
Learn how leading organizations are using AI‑driven tools to publish faster, personalize smarter and stay secure.
Register
Webinar
Sep
25
Call Spoofing Trends Financial Institutions Can't Afford to Ignore
Don't let robocalls sabotage your customer relationships. Learn how to secure your voice channel.
Register
Webinar
On demand
Ready or Not: How Data-First Organizations Are Unlocking Agentforce Potential
Learn how to cut through the noise, activate Agentforce and build a Salesforce AI strategy that actually delivers.
Watch Now
Webinar
On demand
CX Reality Check: What Your Customers Are Really Thinking
Register now and get the insights you need to not just meet rising expectations, but exceed them.
Watch Now
Webinar
On demand
Content Leaders Collective: What a Good CCMS Actually Looks Like
Discover how content leaders transform clunky systems into growth engines — and why your competitors are ahead.
Watch Now
Webinar
On demand
From Hype to High-Impact CX Strategies That Actually Scale
Turn buzzworthy AI and outsourcing trends into measurable CX wins with fresh 2025 data.
Watch Now
No matter the size of the company, both IA and UI professionals heavily collaborate with other functions, mainly product management, marketing and development — and with each other.
Conclusion on IA vs UI: Distinct yet Connected
While oftentimes no differentiation is being made between IA and UI, it is worthwhile to understand in what ways they are distinct yet connected. Not only does this explain the elements that constitute the UX process, it also makes it apparent why it is advisable not to start screen-level design until a robust content taxonomy has been established.
Learn how you can join our contributor community.
