To put it simply, Information architecture shows where you should put information that is connected with other information. You can think of it as a mind map. Info may be duplicated in some places or just be unique for one page. The key goal for you as a designer is to create a map of connections that will be convenient for the user in different situations.
Navigation on the other hand usually shows just names of different pages that a website has. It doesn’t show you what information you will find there exactly or what kind of action you may take. Some page titles are pretty obvious like “Contact” or “About Us” but even then without proper information architecture you will drown in “Lorem Ipsum“ text (I have seen websites that have empty states with lorem ipsum long after release).
How to create Information Architecture that will really help you?
The bigger the project is, the better the results you will get out of Information architecture. After so many years I created my own way of planning information architecture and navigation but we will get there. Before that let me clear something out….
If you are building a small personal blog or even slightly bigger e-commerce, doing Information architecture from scratch may be overkill. Why? Because we have thousands of shops and millions of blogs that can inspire you.
What I am trying to say here is that you can use existing information architectures from other websites and this should be your first step before creating everything by yourself. But remember without taking some time to figure out how to design a good information architecture you may be frustrated after seeing a million times how users struggle to find one obvious piece of information.
Let’s get started and see how to build information architecture.
1 of 7 — Starting point
The best starting point is by getting a sitemap of a benchmarked website that you like and feel that is nicely done and remember — you won’t design good information architecture by looking at Dribbble shots!
So if you are designing a marketplace with thousands of products — check Amazon or Etsy
If you are building a blog — look at Medium or big news websites like New York Times.
If you are building a company website —> you know how it goes…
So the real question is, do you need to do it manually?
The answer is yes and no. You can do it manually by going through the pages and the quickest way to do it is by going straight to the footer. Usually, there is a sitemap with the most important websites listed there.
The other option is by using some automated tools like octopus.do that is making a site map for you. It’s not always working and if it works you still may not have a whole sitemap since developers may “hide” some of them in the browser.
Either way what you will get will be a sitemap aka navigation, not information architecture. But it will already give you some idea of how the website was structured.
2 of 7 — Understand the structure
The structure of information architecture may be completely different than navigation.
With navigation it’s relatively simple, you need to design the breadcrumbs — which is under each page. Of course, cross-links that are shown in different sections may complicate it a bit but usually, you don’t focus on them designing navigation.
In Information architecture, you may end up with something that reminds you of mind maps and this is normal, but let’s check what you may end up with, based on different projects.
2.1 Linear diagram
This is the simplest option it occurs when you build a product or a feature with a strict sequence. You see it when you design paths where users need to make some steps to see more information. An example of such path is a shopping cart. Let’s explore this typical path:
- Add product to shopping cart
- Go to shopping cart (list of all items)
- Proceed to checkout (user sometimes now see register page — its bad UX!)
- Add shipping information
- Add payment information
- Accept payment
- You see a ‘Thank You’ page
2.2 Grid diagram
This is an information architecture that you may often see when building a data model or system roles. A good example of this kind of model is Figma members vs guests.
Figma admin may add users with different access. They will be able to edit or just view some information.
To put it really simply, I like to think of this structure as a multiplication table. You see to what data each user role has access to.
2.3 Tree diagram
The most logical of all of them. You simply build information architecture from one page to another (in Europe and the USA it’s usually from top to the bottom but I also saw from left to right and the opposite depending on different regions)
An example of such architecture was used to plan Disneyland. It’s used so that you have almost the same experience each time you visit one. There is always some Main street and different “regions” with attractions.
2.4 Web aka Mindmap diagram
This structure is also connected with hyperlinks. Usually, you start building a tree structure but you then start to understand that it can’t be that simple. An example of such information architecture is used at different marketplaces for example Amazon. You can find “iPhone” in at least 17 different categories depending on what you really want to find.
Knowing that you should be now prepared to start on your own and go to the next step which is to…
3 of 7 — Choose the right tool
Now take your blank canvas and start creating your information architecture.
I recommend 2 tools:
- FigJam (not the best but still convenient to have everything in one tool ;))
- Use mind mapping tools (my favorite is XMind but there are plenty of others)
4 of 7 — Start with something simple
At this point seeing benchmarked navigation and a blank space on your tool may be overwhelming but the hardest step is always the next one. I am sure you could design some pretty good information architecture in just a few hours if you stay focused.
Start with the first page. It can be a home page or even a login page. I always recommend starting with something simple and obvious to understand how you should structure your diagram.
5 of 7 — Find out what are the red routes
If the product is already on the market or you build something similar to what is already there I strongly recommend to discover so-called ‘red routes’. They will show you what are the key websites/ features that people should find as simply as possible. Treat it like a heatmap for information architecture.
There is one important fact — If the feature is used by many and is important It does not mean that you always have to put them in navigation because some of them (features) may be a part of some process on one page users will see it only after doing some action.
Let me give you an example: Planning a route is a crucial feature for Google Maps but to get there you first need to enter (or system needs to get) your location and final destination.
6 of 7 — Test it
We have plenty of different tools that may help you test navigation or Information architecture really quickly. I personally like to use two of them: Optimal workshop for tree testing and a usability hub if I already have some screens but not much time.
These kinds of tests will show you how people wander across your navigation and where they would expect to see certain information. Please also remember that there is also an option to teach new behaviors to people.
7 of 7 — Optimize it
Never stop optimizing your information architecture its not a one shot task. This task is more important than designing wireframes itself. Imagine having a beautifully designed system with users that don’t know about half of the features you made for them. You may end up with half the product being useless because the path to go and discover new features may be almost impossible.
At the end how many people know how to manually add your parking position to Google Maps?
And thats it. I know its a lot but if you want to build a better product you should start with better fundament.
Want to know more?
Read the full article here
