What is Website Information Architecture?

Information architecture (I.A.) is a term used to explain the structure of website content to increase the discoverability of information. It is the organisation of complex information sets to be more digestible to a visitor when browsing your website.

Many people think that I.A. is just the main navigation list on a website, however this is not true. I.A. represents how all information throughout the site connects with one another and is displayed to a visitor. This will be through elements such as links in the text, how filters are used, site search, page layouts along with much more.

When we first start working with a client, we often find issues with an overcomplicated and unnecessary structure to the website which confuses the user on their journey and increases frustrations. This, in turn, means that the user exits the site before completing a conversion. 

This user frustration is often due to a case of an expanding product range and organising content based on management systems rather than user needs, however user needs are the most important thing to consider when wanting visits to turn into conversions. As an example, several of our clients were under the impression that you can’t link to a category page multiple times via the navigation when in fact, this is perfectly fine to do if it’s the best way to present the categories to the user.

 

Intuitive I.A. is critically important for the user journey but also the SEO journey. Highlighting hierarchies and relationships between pages and topics increases relevancy and authority in an area for rankings with user queries, as well as improving engagement with the website and creating a slicker experience.

The main goals when strategising the I.A. of your site are:

  • Reducing the number of clicks a user has to take to reach their goal, and complete your desired conversion
  • Encouraging users to explore the site further where it is beneficial for them
  • Gently pushing users down the conversion funnel whilst creating a positive lasting impression
  • Users can simply and quickly find the information they need such as specifications, delivery and return policies, usually within about 30 seconds
  • Checking out/Converting needs to be fast and simple, who wants to spend ages at the last step?

 

How does Information Architecture impact SEO?

Essentially, SEO and I.A. share many of the same goals, with the main one being findability – can people find the content they’re looking for? If SEO and I.A. are not working together, you’ll end up with:

  • More competing or duplicate content in the SERPs
  • Increased crawl budget wastage
  • Bad internal linking
  • Poor link equity flow
  • Lower user satisfaction

Breaking down the website into an easy to navigate, organised ecosystem of webpages will improve the relevancy of your cornerstone content within the intended topic. The more unique and useful content you have about one topic that links to each other in a logical manner, builds the relevancy and authority of your domain for that subject, increasing trust in your brand and website.

This expertise, authority and trust (E-A-T) has been confirmed by Google to be an important ranking signal.

“Our ranking system does not identify the intent or factual accuracy of any given piece of content. However, it is specifically designed to identify sites with high indicia of expertise, authority and trustworthiness.”

The more content around a topic to educate your visitors whether these are category pages,  product pages, service pages or blog posts, should all link together in a logical flow, and the authority gained from backlinks will impact more than just the pages the backlinks link to.

 

Different website information architecture models

There are several types of common structures used throughout the web, each having their own positive and negative traits.

Flat Model

A flat website I.A. model usually has 2 or 3 layers, for an e-commerce site it could be: homepage > category page > product page. There are no subcategories creating deeper layers.

Flat Website Architecture Model

This can be a good model for a small and niche website where users wouldn’t need to refine their search and a flat model won’t clutter the navigation.

If your website doesn’t have a lot of layers to each section and, each topic is distinct, then this structure enables you to bring prominence to the user and search engines within the navigation. This allows for a smoother and quicker user experience and happy users have a higher conversion rate and consequently a higher lifetime value.

When someone visits your website and needs to use the navigation, be it the main navigation or a side filter, if all the information is available, they will have a smoother experience being able to quickly navigate to the information they’re looking for.

This flat structure does mean that all areas will be treated with equal priority (Excluding backlink impact) when it comes to search engines because they are the same distance from the most authoritative page – The homepage. This is often referred to as ‘click-depth’, the lower the click-depth, the more ‘equity’ that page will be getting from the homepage.

ProsCons
Reduces friction points in the user journeyClutters the navigation on larger websites
Provides strong authority for all pages – small websites benefitDilutes authority for most important pages
Content is more discoverable from users and search engines if topics are distinctFor larger websites, too many links can be overwhelming for the user, especially if topics overlap

Strict Hierarchy Pattern

A strict website I.A. model is often used on a website that covers multiple topics that don’t relate to each other.

This is a version of a deep website hierarchy where information is several links deep for example: Home page > category page > subcategories > filters > product.

With a strict model, there is no internal linking between topics, to access one area of the site you have to navigate through a specific page if landing on the homepage.

This is useful if there’s information on page that users should be exposed to before continuing their journey. For a structure like this, it can become disorientating for a user to navigate therefore features such as breadcrumbs are useful to guide users back through the site quickly.

For SEO, this can be a useful structure when you need to create relevancy in different topics. When a search bot lands on your site, the more related content that is linked to and from that specific page the higher the relevance of that page for that topic becomes. This increases the chances of the page you want ranking to rank highly for relevant queries. This is the main goal in SEO because if you’re not ranking for very relevant queries, your click through rate will be lower or/and bounce/exit rate higher which often leads to fewer conversions.

Another benefit to this structure is the value of the link equity that’s being shared is not diluted through being shared across the site onto irrelevant areas. This does also mean that topics with lower levels of link equity won’t benefit from a stronger performing section of the site.

Strict Website Architecture Model

 

ProsCons
If your website covers multiple, unrelated topics, this structure increases relevancy of each sub-folder – Blog websites use this structure most commonlyUsers can become disorientated
Link equity is stronger per topicLower performing areas won’t benefit from stronger performing sections equity

Co-Existing Hierarchies Pattern

Co-existing hierarchy is similar to the strict model in that it’s a deep structure. The difference with this model is that the different topics interlink between themselves.

This is beneficial for users because they can easily jump from one niche topic to another speeding up their journey and reducing the likelihood of them leaving the site without completing their goal.

Another benefit is that if there is an area of the site that is performing very well and gathering a lot of authority from backlinks, this equity can be used to boost a lower-performing area of the site.

This structure is most commonly used on a website that’s about one topic for example, a children’s fashion e-commerce site. All the sections are separate but they all relate to each other under one umbrella topic.

This does mean that link equity does become more diluted, however, if the domain is about one topic, all of the content will contribute to the relevancy of the domain and specific pages having a greater site-wide impact with rankings.

Co-Existing Website Architecture Model

ProsCons
Sharing of link equity to boost lower performing areas of the siteReduction in link equity value due to increase level of interlinking
When used for a domain about one topic, all content increases domain relevancy having a site-wide impact on rankingsCan be more difficult to use than a flat structure as content can become buried
Users have an easier navigation experience often finding what they need quicker

 

Information Architecture for e-commerce websites

The most common information architecture structure we see and utilise for ecommerce websites is the co-existing hierarchy, this is due to the following reasons

  • We can link to a category multiple times in the navigation
  • Use other forms of navigation features to link to other, related areas of the site
  • Use this interlinking for upsells and encouraging people to add more to their baskets
  • Use this interlinking within blog posts to encourage users to explore different areas of the site who are at the top of the funnel
  • Inspire users to think about other items they need to purchase
  • Increase rankings for more niche terms targeting those further down the buying funnel and more likely to purchase

This is because you can link to a category page multiple times via the navigation, meaning that the customer is receiving the information that best suits their needs and can find exactly what they’re looking for from multiple categories. 

 

How To Strategise Your Own Information Architecture

Best time to do a re-design is at a migration or with a new site. If you’re not doing that then we recommend A/B testing through CRO research and iteratively updating your navigation. A/B testing allows you to compare two variants of your page and these variants are shown to users at random. You’d then conduct statistical analysis in order to determine which version performs better for your conversion goal. 

 

Have a clear goal

Before you start changing your navigation systems and the content on your webpages, you need to set out a clear goal you want to achieve. This will help lay out the user journey you want people to follow allowing you to measure the journey people actually take and what improvements you can make in the future.

Some examples of these aforementioned goals could be:

  • Purchase a product
  • Add more items in their basket
  • Attend an event
  • Sign up for training
  • Share content on social media
  • Increase clicks through affiliate links
  • Sell their own items on the website
  • Email the office over calling the office

Having a clear goal of what conversions you want to achieve will not only streamline how you measure success but keep you and your team focussed when redesigning the website.

 

Get qualitative feedback

Talking to people who are unbiased and don’t know the website (but know the topic) is an extremely insightful activity to gain an understanding in your audience. You may find that there’s information you think is common sense or take for granted but in fact, it’s hugely important for your audience and you need to highlight that information more prominently.

At Return, we have a nifty biometric kit that allows us to go a step further and track the eye movements of a person on the website, their mouse movement and even their emotions. This provides even further insights that a person may not even be able to explain or notice themselves. If they’re slightly frustrated, rather than solely relying on the user to remember to tell us, we can see how their body responded at the exact moment and movement.

 

Use Personas To Understand The Journey

It’s important to create personas for your potential customers, as your website should be designed for specific people rather than everyone. User personas are an essential step in creating an information architecture, as you can’t build a site unless you know exactly who it is that you’re building it for. The personas that you create should be based off of your user research, and they should clearly represent the goals and behaviours of the people that come to your site.

After you know what conversions you want to achieve, dive into your user behaviour tools and analytical tools to create a list of who your main audiences are.

It is at this step where SEOs will also complement the user persona information with their keyword research and trend analysis. This helps us know, on a broader scale, what people are searching and how they’re searching in different countries or cities contributes to building the consumer journey. 

This can lead to questions such as what does the typical journey look like and what is the intent of the user along the way? Do they start with a broad search clicking through the shopping feed? Does this lead the user needing to do research and landing on organic blog posts before going back to the website directly? How important are reviews to your audience?

There are plenty of aspects to consider here and you can read another of our articles to learn more about creating a user journey.

 

User test your new navigation structure

Now you know your goals, who your main audience actually is and what they want or need, it is time to start building the navigation structure. We recommend gathering unbiased opinions of people who represent the target audience to help with this activity. Below are several methods you can use: 

 

Basic Method

For the basic method, you need to have a set of small card pieces or paper and write terms related to your products for example ‘Data Cable’, ‘Micro SDs’ and ‘Card Readers’.

You need a set of participants that represent your audience and ask each one to put the terms into logical groupings and assign a category name for each group.

Repeat this process for each participant and look for patterns to follow.

To give you even more insights, allow participants to write their own category names and groupings.

Basic Card Sorting Method

Modified-Delphi Method

Similar to the basic method but instead of each participant starting from a blank slate, the first participant assigns the groupings and each subsequent participant refines what the previous participant did.

Participant AParticiapnt B

 

You continue to ask participants to change the grouping of topics until there are none or minimal changes. You may find that you end up asking the same participants to complete this activity several times before you’re happy with the results.

 

Reverse Card Sorting

This is the method of presenting participants with a hierarchical diagram with blank spaces where they place pre-written cards of categories and groupings into the position they feel is most accurate.

This is a good test to use when comparing a new navigation structure with a specific number of available spaces. The test allows you to see what layout they understand the best.

Reverse Card Sorting - Navigation Buidling

Organigrams

If you don’t have access to unbiased participants, it’s still possible to strategise the navigation and information architecture with the research you have already gathered.

When we have conducted all our research, we often create an organigram of the website or sections of the website so we can visually see how each page and topic will link to each other.

Website Organigram

This level of organisation will also benefit your content team when they’re writing category, service or blog content. They can quickly see what areas of the site they need to be linking to within the copy without having to search making the process more streamlined.

 

Look Beyond the Main Navigation

Website information architecture is more than the navigation systems you have in place as it also refers to how and where you present information.

The navigation is often the first step into structuring your site, understanding what pages will be accessible from the main navigation vs through faceted navigation, footer links or secondary navigation menus based on the page the user is on.

After you’ve established the flow of the website, you then need to establish information that is needed. Let’s take an ecommerce site as an example going through each step of the website from the homepage.

PageInformation Required
HeaderBasket

Account

Search

Logo

Navigation

USPs

Country Select

Wishlist

FooterCustomer Service

Accepted Payment Types

Social Media Links

HomepageLatest Sale

New In

Featured Collection

Featured Categories

USPs

Category PagesFaceted Navigation (Filter)

Refine By

Stock Availability

Price incl. Discounted Price

Variations Available

Add to Wishlist

Product PageProduct Name

Variations

Stock Availability

Payment Types

Price incl. Discounted Price

Qty Selection

Product Code

High Quality Imagery

Zoom into Imagery

Specifications

  Width

  Height

  Material

  SKU

Related Products

Bundle Upsell

We would recommend doing this for every type of page such as delivery, returns, gift cards etc. If you’re re-designing or creating a new website, this activity is perfect for cutting down costs and delays with web-designers because they know exactly what all the important information is.

This table combined with wireframe ideas and examples of other websites you like will make the designers’ job much easier to provide you with what you’re looking for. We will now touch on wireframing as a whole below.

 

Wireframing

When it comes to understanding how this information will be displayed, many web-designers use a well-known technique that’s known as wireframing that helps to create a simple visual layout of a digital product. Wireframing is a cheap and useful way to plan the information architecture of a page, and they can be used to plan the hierarchy of user interfaces, set the interactive zones and organise the layout with the target demographic in mind. Wireframing is advantageous to everyone, as it gives them the chance to see the first visual representation of an idea in front of them, meaning that they can see if their design will work.

We would strongly recommend running all wireframes past anyone who is not familiar with the website to avoid simple oversights.

 

Marrying these tactics together will provide you and your team with a solid, customer centric and data driven design to improve the rankings of your website and most importantly, the user experience.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp