The best user experience is the one the user doesn’t notice.

Here’s a fundamental truth of designing apps: No one has time to spare.

If users can’t find what they’re looking for in your app quickly and intuitively, it’s likely they will abandon it and move on to something else. Worse, they will give it a nice shout-out on Twitter (with multiple screenshots showing why your app su*ks), and never come back!

UX designers avoid this nightmare by carefully structuring and organizing the information or content on their apps, keeping the user front-and-centre and making it super-intuitive for them to interact with the app. This process of organizing and labelling information is called Information Architecture (IA).

IA attempts to answer the question:

‘What’s the best way to organize content on my app so that users can find what they’re looking for quickly and easily?’

There are two core tenets of creating a good IA:

• Usability: It needs to be easy to understand and navigate around.
• Scalability: It should be flexible enough so that new features can be added to the app post release.

While improving usability is largely rooted in applying user research and cognitive psychology, scalability has more to do with technical feasibility of the IA in the long run.

IA may be one of the less flashy subjects of UX design, but it’s critical. My goal of writing this post is to break down the theoretical jargon to simple bits and make it more application-oriented, with some tangible examples. IA is a massive topic in itself and it is impossible to cover everything in one post. In this effort I am barely scratching the surface; but as always, I have added links to articles that cover the sub-topics in detail.

Why do we need IA?

A solid IA helps users understand where they are in a product (the start)and where the information they want is (the end), thus improving the ease of use. Users should spend their time and energy focusing on what they want to do, not on finding their way through it.

And although usability is the most apparent benefit of IA, it’s not the only one.

• IA provides a high-level view of the product in one snapshot. This is critical for stakeholders that work with the design team, such as product managers and developers. It helps them review the design, and align on feasibility.
• It gives an overall structure to the app. Think of it as the skeleton, or as a map for the app.
• It helps UX engineers plan how to organize data within the app.

Organization, Hierarchy and Sequence

Information Architecture has three central aspects.

1. Organization is how different pieces of information connect in a product to form the whole.
2. Hierarchy shows how information is structured or layered, typically with a major category (parent) at the top and related sub-categories (child) underneath, in a ‘tree’ or ‘sitemap’ format. A sitemap is a map of all located information & resources on the app.
3. Sequence or Navigation represents the user flow, i.e., how users move through the app via certain steps. Navigation incorporates the use of metadata to tag and categorize content, and make it searchable. Users should be able to reach just about anywhere in your app using different possible routes within the navigation system.

Want to look at a real example? Check out the sitemap for Apple’s website here.

A related concept in IA is that of Labelling and Taxonomy. Labelling shows how chunks of information are ‘labelled’ or represented. Each label should be able to convey a load of information in just a few words. For example, the label ‘Contact Us’ conveys all contact-related information: phone numbers, addresses, emails, social media accounts, etc.

That’s great, but how do I build the IA for an app?

Before we start building the IA, we need to look at the interplay of three aspects— users (who), content (what) and context (where) — and the factors we need to consider under each of these.

Users

• Who are our users?
• What kind(s) of information are they looking for?
• Where and how do they expect to find this information?
• How do they look for information on similar apps? Do they have any pre-existing beliefs about this type of content?

Mental models describe how users perceive your product and what they expect to see. The expectations that users would have from your app is often influenced by their experience with similar apps in the past. For example, the option for changing your contact number often resides under the User Profile / My Account section. Placing it somewhere else where most users can’t find it will lead to user frustration.

To understand users and how they categorize information into patterns/groups, designers leverage User Research — including observations from usability tests, card sorting sessions and interviews.

Content

• What content is relevant for our users?
• What information could be unnecessary, irrelevant or overwhelming for them and how do we limit this?
• How do we present content in groups or patterns that users can quickly relate with?

Cognitive Load represents how much information our users can process at a time. Presenting more information than this causes cognitive overload, leading to user frustration and compromised decision-making.

Information architects use multiple methods to limit information and avoid cognitive overload, including

• Filters: e.g. when looking for a t-shirt online, I can apply filters on attributes like Gender, Colour, Brand, Size, Price Range etc. to limit the choices I see on the screen.
• Sorting options: I can sort items by Price (High to Low / Low to High), Customer Rating, Release Date, etc.
• Search option (search bars)
• Comparison and Save options

Designers use the principles of Visual Hierarchy and Gestalt Principles to group and organize related visual elements into intuitive patterns. Visual hierarchy guides users in recognizing patterns and building groups of elements. Click here to read more about Gestalt Principles.

To comprehensively understand the content on a content-heavy app or website, designers use Content Inventory and Content Audit. This basically involves

• listing down all the information that resides on the app (e.g. posts, pages, menus) in a spreadsheet or list — creating a Content Inventory,
• labelling of content into different groups using categories, sections or metadata to form a content hierarchy or map. This is based on the relationship between items, e.g. the relationship between different pages.
• auditing the content to identify inconsistencies and evaluate the relevance of each piece of information to users. After this, content can be rearranged content based on what users need, and irrelevant information can be removed.

A content audit forms the blueprint for a good IA. To learn more about content inventory and content audits, check out this article.

Context

• Where (in the app) is the user seeking out this content?
• When, why and how is the user engaging with this content?
• What is the environment or situation in which the user is doing so?

It is important to remember that there are different routes thorough which users can enter your website or app. They also have different motives for using it, and different ways of interpreting the same information.

IA schemes can succeed or fail based on the context in which a users engages with them, so they must account for the wide variety of contexts in which users use the product. For example, since users are just as likely to enter your app from an external link as from the homepage, every page should be independent and self-explanatory and should be able to stand on its own.

Card Sorting is an amazing technique to understand the context in which our product is used by different users.

Dan Brown’s 8 Principles of Information Architecture

As UX designers, we should understand the eight principles of IA proposed by Dan Brown, and how to apply them when designing digital products.

#1. Object principle

This is also called Object Oriented UX (OOUX), just like Object Oriented Programming. Think of each piece of content as a living, breathing object that changes and grows over time, and has its own properties, interactions and behaviours. Thinking of content in terms of objects makes it easier to keep it flexible, align it with users’s mental models and see how it relates/interacts with other objects. More details on Object Oriented UX here.

#2. Choice principle

All of us like to have a wide range of choice. But larger the number of choices shown, greater the cognitive load on users. This is the paradox of choice.

People think they want to have endless choice, but they actually need to see fewer, well-organized choices that helps them reach their goal (complete the task) quickly. Less is more!

Limit choices by discarding irrelevant information, using filters and categorizing content into manageable groups.

#3. Progressive Disclosure principle

There’s no need to bombard users with a sea of new information at once — they can’t digest it. Instead, present users with just enough information to know what to expect on the next click and to decide if they want to go further. This is why apps present information in layers, with each click acting like a ‘Learn More’ and revealing further details.

For example, the first layer on my food delivery app just shows the name of the restaurant, a thumbnail pic, average rating and estimated ETA. On clicking it, I move to the next layer, where I get further details — available discount offers, address of restaurant, number of ratings, reviews and the menu.

#4. Exemplar principle

Humans have an innate tendency to look for patterns in a sea of information. We don’t like a mess. To streamline user experience, group content into categories and patterns (e.g. images, lists, icons). This makes it easier for users to make sense of everything.

#5. Front door principle

Typically, about half of your users will enter your website through a side-entrance(a page that isn’t the homepage). This is why each page should be independent and self-explanatory, and tell the user where they are in the product. This also applies to native mobile apps (though to a lesser extent), where we can enter from notifications or from other linked apps. The home screen should only show the big picture and major functionalities, it shouldn’t try to squeeze all possible information in the app. It’s not a central shortcut repository!

#6. Multiple classification principle

People have different motives of using apps; they have different ways of classifying and searching for information. So provide multiple ways to navigate through your app. Users should be able to arrive at the same content using different routes. Tagging content and adding filters helps in categorizing it in more than one ways. For example, on a food delivery app, I might arrive at the same restaurant via multiple routes, e.g. by location (closest to me), cuisine type, price or even my order history.

#7. Focused navigation principle

Navigation menus should be simple, make sense and have a single, unambiguous purpose. Have different menus for different types of information. ‘Sony’, $100 and under’, ‘Latest Arrivals’ and ‘Speakers’ do not make sense as part of a single menu because the first one is based on brand, the second one is based on price, the third one is based on time and the last is based on product category.

Menus should be defined by their purpose (e.g. a Topic menu, which lists different topics) rather than location (e.g. a Sidebar menu, which can virtually list anything).

#8. Growth principle

The amount of content in a design will grow over time. Your app’s architecture should be built for scale, so that adding new content or categories does not become a nightmare.

For a more detailed read on these principles and context of usage, check out these articles

Sitemapping for Mobile Apps

Sitemaps are a handy way to represent hierarchy. UX design decisions are useless if taken without a thorough understanding of the sitemap. I recently looked at 30 job postings on LinkedIn, and ‘sitemap’ was the #19th most frequently mentioned skill. Check out the full article here.

Due to the limited screen size of mobiles, the different nature of user interactions on apps (on-the-go) vs websites, and the nature of internet connectivity, there are some subtle differences in designing IA for mobile apps vs a website. For example, we can’t use as many categories on a mobile app sitemap as on a website. Also, it needs to be highly nimble and agile, to allow for quick, commitment-free changes.

Sitemap typically have 7 key deliverables.

• High-level App Features. Key features of the app.
• Screens. Pages that are are shown to the user.
• Paths. The URLs of the pages.
• Functions. The expected functionality of pages.
• Calls to Action (CTAs). This depends on the behaviour we want to elicit from the user.
• User Flows. The user’s movement via certain steps till the completion of goal.
• Cruxes. Potential hangups or complexity.

There are many tried-and-tested sitemap patterns from which you can choose one or more patterns for your mobile app (no need to reinvent the wheel!). These are

1. Hierarchical (the typical tree format): Good for apps where you want a similar structure and navigation experience as the website. It’s not a mobile-first approach, and is not optimized for scalability.
2. Hub & Spoke / Sequential. Good for multi-functional apps, where you focus on one task at a time. Not ideal for multi-tasking. Users need to come back to hub (typically the homepage) before they can enter another spoke. It’s the default for iPhone and Android devices, where you (typically) need to return to home screen before going into another app.
3. Linear / Nested Doll. A simplified and quickly navigable scheme that provides users with an overview of the content on additional screens on the homepage; and leads them to more detailed content at each step. Good for apps that have a narrow focus on one specific type of topics or content. It’s also useful if the user base is expected to be in a distracting environment. Switching between sections would be slow, but then we don’t expect a lot of sections here.
4. Tabbed View: Here, the content is divided across tabs shown on a ribbon or toolbar, and users can access these tabs from any screen. Great for apps where users are expected to multi-task, like e-commerce apps. This is heavily used in almost all apps today.
5. Dashboard View: Good for content-heavy apps. Not an ideal choice for mobile apps due to limited screen size.
6. Filtered View: This helps users limit the amount of content by using filters. Good for content-heavy apps and used a lot on e-commerce apps.

In reality, apps often use a mixture of above patterns, or using one as the sub-section pattern within a larger parent pattern. Tabs and filters are indispensable to most modern apps, regardless of the parent pattern.

For a detailed read on sitemap patterns for mobile apps, check out this article.

Some practical tips and guidelines for IA

• Limit the number of links on a given interface to 10 or fewer.
• Minimize the number of levels in the structure
• Prioritize, prioritize, prioritize. Fewer the elements, better the experience.
• Menu options should be clear, but not lengthy. Too much text is a recipe for disaster.
• Remove pages or links with too little or no content.
• Keep the most frequented functionalities closer, i.e. within few clicks. Analyze the traffic over time to identify the key usage patterns.
• Do not stop usability testing after the app is released. How users use your product today may change in 2 years, rendering the current IA obsolete.
• Review your IA periodically so that it doesn’t become obsolete.

Enjoyed this post? If yes, please show some appreciation by clicking on the “clap” button. Fun trivia — you can hit it up to 50 times! It helps the content reach out to more like-minded people.

Please share your thoughts and feedback in the comments below. This will help me improve and also inspire me to create more.

I try to publish regularly on Medium. Follow this account to receive similar content in future, and click here to get each post directly in your email. You can find me on Linkedin and Twitter as well.