The first step in designing a real solution is the general structure of the thing. This is where Information Architecture comes in.

Information Architecture

Information Architecture (IA) can be relatively simple with a small project, and incredibly complicated with a large project.

IA is invisible. To work with it, we need to draw a Site Map. Here is a simple example:

This example shows a website with 6 pages: The home page, 2 sections in the main menu, and 3 subsections. The lines indicate which pages are connected by navigation (menus & buttons). Remember that a million users doesn’t mean you have a million profile pages. You have one profile page which can display any user’s profile.

When pages are organized this way — like a family tree — it is called a “hierarchy” or “tree”. Most sites and apps are organized like this (but it’s not the only way).

Deep or Flat, not both.

Generally speaking, your site map will either be very “flat” — which includes more Sections in the menu and requires less clicks to reach the bottom — or your site map will be “deep” — simpler menus, but more clicks to get where you’re going.

Notice that both of the structures in this example have the same number of pages. Equal, but different.

Sites with a lot of products, like Walmart, often need a deep architecture, otherwise the menus get ridiculous. Sites like YouTube, which only has users and videos to deal with, are usually more “flat”.

If your site is deep and flat, that’s bad. You might want to simplify your goals or design a good search as a core feature.

User Stories / User Flows

A User Story describes one possible path a user can take on your site or app. It should be short, but complete. You will need many user stories to describe your whole design.

A basic user story for Google.com might look like this:

• The user arrives on the main search page.
• The user can enter any search query and submit with the mouse or keyboard.
• The next page displays a list of search results with the most relevant results on top.
• The user can click the link to go to the appropriate site, or they can navigate through more pages of results until they find something useful.

Notice that nothing in the story tells me specifically how to solve or design those actions; just that they are possible. The purpose of these stories is to describe flows. Sequences of user choices. Not the final UI.

If the flows are simple and effective, you are doing a good job (so far).

Types of Information Architecture

The structure of your pages determines the steps in your user stories. And to structure your pages you have to pick a type of Information Architecture to work with (or a couple types, but let’s keep it simple for now). Types of IA include:

1. Categories: When you think of a retail store like H&M, you probably imagine their menu as a set of categories: “Men, Women, Kids, Sale” and so on. Types of content. When you click those categories you expect to see content that fits in that category. This is the most common type of Information Architecture. However, if the categories are complex, like banking products, or industrial chemicals, then you and your users might not have the same expectations about what is in those categories, and that can get confusing.
2. Tasks: Another way to organize your site or app is by the goals the users need to achieve. If you are a bank, perhaps something like “Save, Loan, Invest, Get Help, Open an Account” would make a simpler menu. If the user knows what they want, this is a great way to structure your design. But be careful — users don’t always know enough to choose their own adventure. If you think about it, you will realize that a Task-based site and a Category-based site for the same company could look very different. It’s an important choice.
3. Search: If your site is very complex, or if it is mostly full of user-generated content, a search-based Architecture might make more sense, like YouTube. If YouTube only had categories (Funny, Sad, Ads, Movies, etc.) it would actually be hard to use, and a lot of work to keep the categories correct!
4. Time: The simplest example of this would be your inbox, where messages are displayed in the order they arrived. That is “Time-Based” IA design. On a site you would have pages for things like “hot right now, archived, later, new” etc. Reddit or the Facebook Newsfeed are also an examples of time-based design.
5. People: Facebook — or any social network — is Information Architecture based on people. All the pages are designed around who the information is about, and the relationships between them. Once you are on someone’s profile, Facebook uses categories (Photos, Friends, Places) to organize different types of content.