Designing the information architecture of apps

As a UX designer, the information that your design presents needs to be clearly organized and sorted, so users can successfully experience and interact with the app or website. This process of organizing information is called information architecture. Think of information architecture as a map for your product.

Information architecture is made up of three pieces:

1. Organization: The organization is how different pieces of information connect in a product.
2. Hierarchy: The hierarchy is often called the “tree structure” and is where a larger category is placed at the top and specific categories related to the overall category are placed underneath. Peer information is placed side by side (or on the same level as each other).
3. Sequence: The sequence enables users to move through an app via certain orders or steps.

Understanding organization, hierarchy, and sequence helps guide the process of building a sitemap, so it’s good to familiarize yourself with these concepts.

Eight basic principles

In your role as a UX designer, you should be familiar with the eight basic principles of information architecture. These are principles created by the founder of EightShapes, Dan Brown. They were created to help UX designers understand and make decisions about their products. Here’s a list of the eight principles:

1. Object principle: You should view your content as “living” and as something that changes and grows over time.
2. Choice principle: People think they want to have many choices, but they actually need fewer choices that are well-organized.
3. Disclosure principle: Information should not be unexpected or unnecessary.
4. Exemplar principle: Humans put things into categories and group different concepts together.
5. Front door principle: People will usually arrive at a homepage from another website.
6. Multiple classification principle: People have different ways of searching for information.
7. Focused navigation principle: There must be a strategy and logic behind the way navigation menus are designed.
8. Growth principle: The amount of content in a design will grow over time.

Take a few minutes to read through this detailed article on the eight principles of IA. Then, think about how you can apply the principles to your design’s information architecture.

Information architecture principles for building a great sitemap

The final step in the information architecture process that we’ll walk through is site mapping. As you learned above, a website or app should be mapped out in a hierarchical way. This hierarchical connection between content is often referred to in the UX field as a “parent/child” connection.

Web app sitemaps

Here’s how a sitemap is organized for a web app:

1. Homepage, homescreen, or starting point: The homepage is usually the first point of entry for a user. For example, the first entry point for an app might be the welcome page. The “parent” for this page would be “welcome page.” The “child” connection might be: new user log-in, returning user log-in, or log in with Facebook or Google (these are peers and sit on the same level).
2. Other relevant screens: Other relevant pages would include all the other parent/child relationships in the app. An example of this is when a user goes to the parent screen to Settings; under that, the child connections might be Profile, Security, Help, and Policies. Another example is when a user goes to the parent screen to tap Help on an app; under Help, the child connections might be Search for a help topic, Browse topics, and Contact us.

Mobile app sitemaps

This structure is similar for a mobile app; you should include high-level entry points for users. Keep in mind that you won’t use as many categories on a sitemap for a mobile app as a sitemap for a web app. Here are a few common high-level categories that might be included in an app:

1. Homepage, Product Features, User Settings, Pricing, Contact Us, and Help (You can also reference this article from Medium.com to get a more detailed overview of how to build a web app sitemap).
2. Underneath those high-level categories are child connections. For example, Name, Email Address, and Payment Details would be included under User Profile.

Think about the dog walking app that is used as an example in many of the videos in this course. Here’s how information would be structured for that app to give you a better picture:

Remember, it’s important to know the purpose of your app and the users who will benefit from it; then you can better decide the structure. This will help guide the process of creating your sitemap.

Because mobile screens are generally smaller, the challenges that come with creating information architecture for a mobile app are to 1) consider ways to focus on the essential content and eliminate or move around less important content, 2) consider the size and spacing of any touchscreen targets, and 3) consider ways to make sure the mobile text will be large enough. Good information architecture is one of the first steps in setting up a design layout that encourages the easiest paths for users to navigate through the content, so be sure to keep these points in mind as you continue to build mobile apps.

Build on your knowledge

Now you have a better understanding about how information is structured in apps. Take these principles and apply them as you begin your own product designs. Take a look at this article to learn about the six key patterns that are frequently used to think through information architecture in mobile apps.

Also check out these articles on Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design and World IA Day 2019 — accessibility tips for Information Architects to get a better understanding of how to think about accessibility in information architecture.

Then, read through a few key psychological principles that will help you figure out how to organize information. Finally, review the articles under Additional Resources below to learn even more about information architecture in UX.

Additional Resources

• Information architecture: Basics for designers by UX Planet
• The beginners guide to information architecture in UX by Adobe
• An excellent beginner’s guide to information architecture by Career Foundry
• 5 examples of effective information architecture by Adobe

Sources: Google UX Design Professional Certificate

Coursera | Build Wireframes and Low Fidelity Prototypes