Building a website architecture is one of the first steps of the website creation process. It’s essential to have a good architecture designed before you even start drawing the wireframes of your screens.
It’s important to know how your visitors think and act. Identifying and solving possible issues in the initial phases of your website development can save you plenty of time and resources.
Editing a spreadsheet or a diagram with your website’s architecture is quick and budget-friendly. Especially when compared to recreating prototypes or the website itself – all because you made a fatal mistake early on. By creating an architecture the right way, you hopefully won’t need to reorganize your website later in the process.
Before we move to speak about website architecture in more detail, we should first explain the related and often discussed term of information architecture.
What is Information Architecture?
Information architecture is a system by which information (which can represent basically anything) is organized. Not only on the internet but also in the real world. In a store or library, the system by which the librarian or the store manager places books or goods on a shelf is also a non-digital form of IA.
Stuff has to be well organized, otherwise, people will face several problems with finding what they need. IA should be based on the real human mental models and be aimed at a certain target audience to be the most effective.
Here’s a quick explanation video on the Basics of Information Architecture:
What is Website Architecture?
Website architecture is a branch of IA specific to the web. It determines the way visitors can access all the contents of a website or a web app. Website architecture defines the hierarchy of relationships between the site’s content and functionality. It’s independent of the User Interface (UI) as it’s more abstract and can actually be stored in diagrams and spreadsheets.
It’s one of the foundations that the UI is built on when creating “physical” systems of pages and menus. This makes the website architecture a crucial part of the User Experience (UX).
If the information on your website isn’t organized in a way your users expect it to be, the users will tend to get lost and struggle to find what they’re looking for. Once this happens, they’ll get frustrated, leave and look for which of your competitors will help them satisfy their needs better. If you take good care of your website architecture, however, it creates loyal customers and improves your company’s image.
Having your content organized in a clear, user-friendly way is also crucial to keeping your bounce rate as low as possible.
An especially essential part of website architecture is to have your top level content well-organized. The study FirstClick Usability Testing by Bob Bailey and Cari Wolfson says there is only a 46% chance to find what you want on a website when you miss your first click. The success rate is almost twice as high with the correct first click, reaching 87%.
It’s also crucial to provide a straightforward route to the primary content of your website.
How to create information architecture
1. Figure out your customer’s thoughts/wants/needs
To create a good website, you need to know your customer. After all, you’ll first need to define what kind of content your target audience is looking for. You can’t do it without knowing what problems you are trying to solve and for whom.
Survey or a live interview are the tools you can use to ask users anything you want to know. You can also observe users interacting with existing solutions to discover more about their behavior, preferences, expectations, the issues they face, or anything else.
Being prepared like this will let you create the best user personas, identify the top tasks to start tailoring your content, and design the way to fulfill the wants and needs of your potential visitors. Don’t forget to keep it consistent. Make sure it corresponds with the intention of your website. Prioritize your tasks to identify the top content you need to focus on.
2. Organize topics into categories
Unless the website you’re designing is quite small and simple, your goal with website architecture is likely to organize your content into a multilayered hierarchy. This will allow your users to find even specific information by gradually narrowing down what they’re looking for by navigating the site.
When it comes to designing your website architecture, you’ll want to know where people expect to find content. Card sorting is a great and simple exercise where you ask participants to sort cards (which represent information) into categories in a way they find intuitive. Your users aren’t UX designers – you can’t simply ask them where everything should be – but card sorting is the best possible alternative.
Before organizing your topics into categories, you should label them correctly. Try to think the same way your customer/visitor would. You’ll make labels most effective and easy to understand. Avoid using unnecessary words – for example, using “Food” instead of “Buy food” is sufficient and keeps it as simple as possible. As long as the labels capture the concept they’re supposed to represent, they don’t need to copy the labels on your site exactly.
You should also think about the level of abstraction in your study – it may be possible to merge similar categories into one to reduce the number of cards. For example “Men’s shoes” and “Women’s shoes” can be grouped into “Shoes” in case the connections of those cards are clear.
Once you have names for your topics, you’ll want to have them categorized to find out which content belongs together. The best online tool for this is Card Sorting.
First, use open Card Sorting where you let your respondents decide the names of the categories and sort all the cards you provide them. In the next step, you can analyze the results to see which cards were often placed together and what were the popular ways of thinking for creating categories.
If the consensus is too small, we recommend running a hybrid and closed Card Sorting (depending on the analysis of the results of your studies) until you get results you’re satisfied with. Once you have everything grouped and named correctly, you can move on to testing your architecture.
3. Test your website information architecture
The best method to test your website IA is with Tree Testing. Get your potential or actual users to attempt to solve tasks which they should be able to complete within the IA. Tree testing got its name from how the IA structure looks like a branching tree. This kind of test will show you how users access information by clicking through the tree.
We firstly recommend creating tasks for the user’s primary goals on your website, since these actions will be performed most often in real use and are a core part of your business. After each task, you can ask extra questions, ie., how sure they were about their solutions.
Based on statistics found in the study analysis, you can decide if the architecture is good enough or if the participants look for solutions in unexpected places. Since trees are so easy to change and test, you can iterate your information architecture very quickly. You can also return to the card sorting phase if necessary.
If there are any parts of your tree test where the participants take 2 different paths, you don’t always need to recreate your whole IA. Sometimes, it’s effective to simply cross-link the pages. That means adding links to the right path so that users who got lured in may correct themselves (by buttons, clickable links, etc.).
After your tree testing reaches satisfying results, it’s safe to assume that you have successfully created a good IA. But your work is still far from over. The next step is to create website navigation that reflects your IA. To do so, first, create low-fidelity prototypes to detect if the visitors can find what they want in no time. From there, it’s to iterate design and testing low-fidelity prototypes before you start converting them into wireframes. First Click Test and Prototype Testing are great tools to help you incorporate great IA into a great website navigation.