Google UX Design

Explore

Wireframes and prototypes

Creating paper and digital wireframes.

Information Arquitecture

⁠

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:

Organization: The organization is how different pieces of information connect in a product.

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).

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:

Object principle: You should view your content as “living” and as something that changes and grows over time.

Choice principle: People think they want to have many choices, but they actually need fewer choices that are well-organized.

Disclosure principle: Information should not be unexpected or unnecessary.

Exemplar principle: Humans put things into categories and group different concepts together.

Front door principle: People will usually arrive at a homepage from another website.

Multiple classification principle: People have different ways of searching for information.

Focused navigation principle: There must be a strategy and logic behind the way navigation menus are designed.

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:

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).

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:

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⁠

Underneath those high-level categories are child connections. For example, Name, Email Address, and Payment Details would be included under User Profile.

⁠

Create paper wireframes

⁠

Gestalt Principles

Gestalt Principles describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects. These principles guide how humans view the designs around them in everyday life. We can apply Gestalt Principles to organize content so it is visually pleasing and easier to understand.

Similarity means that elements that look alike (in shape, size, or color, for instance) are perceived to have the same function.

Proximity means that elements that are close together appear to be more related than things that are spaced farther apart.

Common region means that elements located within the same closed area are perceived to be grouped together.

⁠

Course 3 Week 2 - Glossary of terms and definitions - Google Docs⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.