💻Sitemap

Sitemaps are one form of organizing information. They are one type of information architecture. A sitemap or navigation flowchart shows how pages or screens relate. Sitemaps capture a digital product’s organization and navigation systems, reflecting user needs and behavior.

The common sitemap structures are:

1. Hierarchical Structure

2. Squential Structure

3. Flat Structure

Hierarchical structure

Also known as a tree structure, this is the most common type of IA structure. It organizes information into main categories and subcategories, much like the branches of a tree. It’s best used when there is a clear parent-child relationship between different pieces of content. For example, an e-commerce website might use a hierarchical structure to categorize products into different departments and then into categories and subcategories within each department.

Sequential structure

Sequential Structure guides users through information in a specific order, like a step-by-step guide or a tutorial. It’s ideal for linear processes where each step depends on the previous one. For example, a sequential structure would be used for a checkout process on an e-commerce site, where users need to enter shipping information and billing information and review their order before finalizing their purchase.

Flat structure

In Flat Structure, all pages are just one click away from the homepage. This is often used for smaller websites where simplicity is key. This structure suits informational websites, akin to brochures, where every page serves a similar level of significance. For instance, it's fitting for sites featuring only essential pages like "Home," "About," and "Contact." Such a setup is particularly effective for small business websites or apps, such as those for local flower shops or restaurants, where simplicity and straightforward navigation are key. Sitemaps can be created for a new project or to map out a web app or mobile application, for example when you have to conduct a redesign.

Steps to create a Site Map:

1. Content audit: Start by listing all the content on your application This includes all pages, posts, and other types of content.

2. Content grouping: Group related content together. This will form the basis of your Sitemap’s structure.

3. Hierarchy creation: Arrange the groups of content in a hierarchy. The most important content should be at the top level of your Sitemap.

4. Linking: Show how the different groups of content are linked. This will form the paths that users can take through your site.

5. Review and refine: Review your Sitemap and refine it as necessary. Make sure it accurately represents your web/mobile app’s content and structure.

Here you have some example of sitemaps:

Useful to mention a couple of additional points:

• While flat & hierarchial structures are suited for web & desktop apps, where there is more real estate to navigate and refresh parts of the page content based on interaction with UI elements, sequential is most commonly (but not exclusively) used in mobile applications and mobile web sites. This is due to the limited real estate, encouraging users to focus on one task at a time.

• It’s better to ask yourself the question - would the user benefit from focusing on one task at a time that are sequentially ahead planned for them, or they would need to browse a catalog of information. The right structure would depend on it

Card Sorting

Sitemaps are not completely designed out of the expertise and knowledge of a designer. To perform an appropriate job, you should use a method called Card Sorting. Such a method is necessary because the way in which we categorise items and organise the structure may not be the same as our users', and well, you want to be human-centred.

Card sorting is a user research method used to understand how people categorise and organise information. In a card sort, participants group ideas or information written on cards into different categories in a way that makes sense to them. This can be done using physical cards, pieces of paper, or an online card sorting tool.

Purpose of using Card Sorting:

• Assess the information architecture (IA) of a website or homepage

• Learn how people understand different concepts or ideas, and how they feel about them

• Understand where users expect certain content to be found

• Get inspiration for labelling and grouping content or ideas

Card sorting is valuable because it allows you to better understand people’s mental models and inform your information architecture, taking into account how the people who will use your product actually think.

Here’s a quick rundown of how to conduct card sorts:

1. First, you need to pick the items you want users to organize—e.g. parts of your website or app—and write them on cards. These can be real cards for face-to-face sessions or digital ones for online card sorting.

2. Next, have participants sort the cards into groups that feel right to them. If it’s an open card sort, they’ll come up with their own group names. If it’s closed, they’ll sort cards into pre-made categories of your choosing.

3. Finally, observe how participants group the cards you’ve provided for insights into their mental models. You can then use these insights to build information architecture that feels intuitive to users from the get-go.

Card sorting is a key part of a human-centered design approach as it integrates the final product with user expectations and behaviours. It helps designers organize information and content in the most intuitive way, improving navigation and usability. It also helps identify and prioritise what content or features users consider most important so they are easily accessible.

To conduct a Card Sorting you will need the target users, in other terms the people that are going to use this product. You can try to use Optimal Workshop as they have a free trial, while here there’s a tutorial for their “Card Sorting” feature.

Further resources:

• Information Architecture vs. Sitemaps: What’s the Difference?

---

Help us improve the content 🤩

You can leave comments here.