If you missed it here is a Link to the previous article – Information Architecture
Depending on the project you’re working on Information Architecture (IA for short) can be very simple or incredibly difficult. In order to begin working on it, you will have to draw a site map. Here is an example of a sitemap for a portfolio.
This example shows a website with 4 pages: The home page and 3 sections in the main menu. The lines indicate which pages are connected by navigation (menus & buttons).
When your sitemap takes on this organizational pattern, it is called a tree. Most sites and apps are arranged like this but, as they say, there is more than one way to skin a cat.
There are no set guidelines for organizing a site map but here are some tips:
Make it simple, and easy to understand.
Keep it clear and readable.
Don’t make a Site Map “flashy”. It’s a technical document, not a runway fashion show.
Deep or Flat?
Your site will typically either be flat or deep. Flat typically includes more sections in the menu but requires fewer clicks to reach the bottom. Deep sites take more clicks or scrolls to get to your destination but have a more straightforward menu.
As you can see they are equal but distinctly different.
Websites like Amazon or Target have a lot of products so they need a deep architecture otherwise their menus would get overcrowded and out of control. Sites like YouTube only have users and videos to worry about so they adopt the flat method. Don’t try and mix flat and deep, as this can lead to headaches for everyone including developers and users. You might have heard the old saying that everything should be 3 clicks away at all times. This was the UX rule of the 90’s but much has changed since then. Make sure to focus on the user instead. Making sure the users know where they are, where they can go, and that they understand the menus is far more important than the number of times they click the mouse. If your navigation is clear, the number of clicks is irrelevant.
Check out the next article in our UX series – Contrast, Depth, and Size in UX Design