Anatomy of a website: website architecture

Are you new to website architecture and not sure where to start? This article provides useful tips, a practical guide for developing a plan, and a look at our remote tree-testing tool, Treejack.

A definition of website architecture

Website architecture refers to the way we structure a website to ensure we meet our business goals while delivering a great experience for our users.

Where information architecture (IA) is a broad field that refers to the structure of any shared system of information, online or otherwise, website architecture relates specifically to websites. All websites have an IA but the overall picture of a website’s architecture also includes:

• usability
• interaction design
• user interface design
• information design
• web design
• graphic design
• content strategy

Creating a website architecture plan

Developing the architecture for a website is an essential part of the web design process and there’s a lot to be considered. Before you develop your structure, you need a plan to ensure your approach suits both business requirements and user needs.

1. Frame your approach: Are you redesigning an existing website or designing something new? If it’s an existing website, you will need time to gain a thorough understanding of the current state, so you can benchmark your information architecture, before moving on to anything else.
2. Understand the business goals: Whether you’re redesigning or designing something new, you will require a firm understanding of the intent, drivers, and goals of the business. Knowing this will enable you to make sound design decisions, keeping your project on track.
3. Understand your user: Engage with your users and conduct research to understand their needs, behaviors, and motivations. You may have completed some user research recently, so this is an opportunity to build upon and validate those findings. If you’re redesigning, you might consider running a usability test on the current state for benchmarking purposes.
4. Create personas: Once you’ve completed your user research, a great way to translate those findings into a usable format is through personas. A persona is a story about a fictional user that is based on information gathered from actual users. They have a name, a background story, and a photo that allows your team to put a human face to the people for which you are designing. Print them out and refer to them as you design your structure.
5. Gather your content: Before designing (or redesigning) a website architecture, assemble all your content and ensure it is current, accurate, and consistent. You can only decide upon a website architecture structure if you know what it is you’re structuring in the first place. If you attempt to do this before you have your content, you will most likely spend a lot of time updating and reworking it over the course of your project. Not only is this a waste of time and resources, but you run the risk of losing sight of the original purpose of the website, which can derail the entire project and result in even more work.
6. Run a card sort: Once you have collated the content for your website, it’s a good idea to run a card sort with your users to determine how your content should be grouped. If you conduct the study as an open card sort, you can also gain insights into how your users might expect your content to be labelled. A card sort can be run as a moderated study or you could use OptimalSort, which allows you to reach a larger audience and does most of the analysis work for you. OptimalSort also makes moderated card-sorting easier by providing the option to print out your cards, giving you the best of both worlds.

Treejack: a site architecture tool

Treejack is a remote website architecture tool that uses tree testing to test your structure with users, helping you understand exactly where they are getting lost in your content. Treejack uses a simplified text-based version of your website architecture that omits distracting design elements and allows you to test your thinking against real-world task-based scenarios.

Treejack records the results for you and generates comprehensive pathway diagrams called pietrees. Pietrees tell an incredibly detailed story of your participants’ journey through your structure, allowing you to quickly and easily identify any issues.

Each junction in the diagram represents a point in the pathway where a participant clicked and comprises a pie chart showing a statistical breakdown of all activity that passed through it. The color and size of the junctions and pathway lines provide insight into how your design tested. This level of detail allows you to gain a complete at-a-glance understanding of where your participants went, when they turned around and went back, and where their journey ended.

Here is what to look for when reading a pietree diagram:

• The overall size of the pietree diagram: Pietrees communicate activity, so the bigger and more scattered the branches of the tree are overall, the more scattered the activity was. Junctions and pathways only appear in the pietree if they were clicked on. Depending on the size of your structure, if most or all of these appear on your pietree, there’s a chance that your participants experienced difficulty finding what they were looking for and you may need to rethink sections of your structure and/or your labels. The pietree will show you where, and for an even greater level of granularity, cross-reference pietree diagrams such as the one below with the Paths tab, the Task Overview tab and the completion time for that task.

• The number of times Home has been clicked: This is a key indicator for determining how lost your participants were overall when navigating through your structure. Home is a common reference point, so when your participants get stuck while attempting to complete a specific task, they get their bearings by going back to Home. If the number of clicks on Home is significantly higher than the number of participants in the study, it’s likely there were some issues, and the pietree and the Paths tab in Treejack will show you exactly where.

• The size and number of the yellow circles: Yellow circles represent the point at which your participants selected their final destination for each task. The bigger the circle, the more people that selected it. This helps you to determine the level of participant consensus on where they would expect that information to be found.
• The amount of blue present in the diagram: On a pietree, the color blue is used to show where your users are turning around and navigating back up the structure. Essentially your users arrived at that particular junction, looked at the available options, and were unable to find what they were looking for so they turned around and went back. Look for clusters of blue in the diagram and pay particular attention to junction pie charts that are large and mostly blue.

Information Architecture tips

Here are five top tips to help you design a structure for your website that works:

1. Iterate, test, and repeat: Design is an iterative process and the development of your website architecture is no exception. Once you have an idea for your structure, test that thinking with your users through website-testing tools. Integrate your findings into the next iteration of your structure and then test again. Include this testing approach in your plan from the very beginning and it will become a valuable part of your process. Getting it right sooner will save you time and money, and result in a better website for your users.
2. Don’t try this one alone: The development of a website’s structure can be quite a big task and it’s one that is best done in a team. If you happen to be a UX team of one — or if your colleagues are simply too busy with their projects — you could ask another person connected to the project; for example, a project stakeholder or a business analyst.
3. Be clear on what you are trying to achieve: Keep the intent, goals, scope, and audience of the website in mind when developing the structure. This will help keep your project on track and save time in the long run.
4. Consistency is key: If anything, your website must offer a consistent user experience, and your website architecture plays an integral role in this. Ensure that your labels, headings, and content groupings are consistent. It’s also a good idea to develop and follow a pattern for your structure so that in the future when new content is added, your users will still enjoy the same great experience.
5. Recognize that one IA does not fit all: There are principles, best practices, and templates for guidance, but you still need to design your structure to suit the needs of your user and the goals of the business. It might be completely flat, or you might work in government, for example, and have a large amount of content to place so your structure is on the deep side. Let the principles and best practices guide your process, but ultimately the best solution for your website will be the one that makes sense to users and fulfills business intent.