So you’re building a website. What is the first step? Find an awesome template, get a shopping cart plugin and add lots of call to actions all the way down the page!
The first step, well, once you have a clearly defined brand mark and brand story, is to plan out the website’s structure. Broadly speaking you need to organise your information architecture (IA). One of the important outputs of this is creating a logical sitemap.
This is crucial, don’t skip it.
Read on for four reasons why information architecture matters. Then get practical with four steps on how to get IA right on your website.
Why IA has to come first
We can be too quick to speak, often. We might blurt out a useful answer but not particularly useful to the audience hearing it – because we didn’t listen first to their question. A common mistake when speaking to a customer is to skip over the problem they’re trying to solve and jump straight into products you can sell them. Be honest – when have you done this?
So complete this website IA process before you build a website or write its content. You will stop yourself from blurting out answers to questions no one was asking. Instead you’ll structure a website that logically leads users from problem to solution. Do this well and interested customers will be asking for your services the first time they reach out to contact you.
Why IA matters to you
You know what your business does. You know it well. Your potential customers don’t – and you probably don’t always explain your unique offering very well. So it’s time to get all of your head knowledge out onto paper and the good old mind map on paper is often the best method to do this.
Write out the problems you solve for your customers. List the products and services you offer that make you unique or different from close competitors. You might have headings like,
- problems we solve,
- why we exist (mission),
- what matters most to us (values),
- tools we use to solve problems (services or products) and others.
This approach will help you to get everything onto one page. If you have a few key people from your business in the meeting, then this process will get you on the same page. Now that you are you can set about ordering this information.
Why IA matters to your users
When a new user reaches your website they may know nothing about your business – except that Google has served your website as a potential answer to their search query. So the user is looking for answers that satisfy their search – and fast! According to Tony Haile of Chartbeat you have less than 15 seconds to catch a user’s attention. If you don’t they are ready to hit the back button.
So what are users looking for in the first few seconds? Users expect a clearly set out navigation at the top of the page and below it a handful of ultra clear messages explaining exactly what the page is about. Once the user has read the message, they will turn back to the navigation for a logical next step to get more detail.
Why IA matters to Google
Google is becoming more and more like a human user. Its website crawling bots are always reading and indexing websites. It makes sense that Google needs to know what is out there if it is to serve the best answers to searching users. So you should set up your website to be Google-friendly.
Google will read the words used in page addresses, headings and body copy to learn what the page is about. A well ordered site navigation tells Google which pages have top priority and which are further down the sitemap tree. More on selecting the ‘right words’ below.
How to think like your users when you order your IA
Your sitemap navigation structure is not for your benefit. It’s for your website visitors. So to find out how they think you need to speak to a few (or a lot) of them. Ask them to categorise and order the information you provide on your website.
How you ask? In a previous step you wrote out everything your business believes, solves and offers – remember the mind map exercise? Perhaps all this information is deserving of a place (or a page) on your website. We’ll ask your potential customers to complete a card-sort to find out for sure. Write all the separate beliefs, problems, solutions, products, services, etc. on separate flash cards (post it notes will work in a pinch but they’re less reusable).
Take these flash cards along to a meeting you have with a potential client. Find people who are generally interested in what you offer but completely unfamiliar with your business. Ask them to categorise the he shuffled deck of flash cards in a way that helps them make sense of the array. Have the person ‘name’ the categories they’ve created too. See if you can extract a few more ‘problems your business could solve for customers’ while you have the captive audience.
Record the resulting piles or categories the potential client creates and repeat the exercise with a bunch more. If you record the results in Microsoft Excel you will be able to sort the data by how people perceive your business. Look for trends in ‘what should go together’.
How to build a sitemap
The card-sort results are probably more important than your own hunches about the your business offering. As we discussed before, we can be preoccupied with products – the things we sell, rather than problems – the thing that really matters to the customer. So the lesson is listen to your customer!
Take the results and turn the categories of grouped flash cards into ‘silos’ of information for your website. The names people gave to the categories might be the best names to use in your website navigation too – you might as well speak the language of your user. It’s likely that the card-sort resulted in a few silos with themes resembling something like this:
- stuff about the business,
- customer challenges/problems,
- services/products that meet customer needs,
- education/what is/faq-type information,
- how to interact/get in touch
Order these silos from left to right. Problems/challenges on the left, solutions/products/services in the middle, and taking action on the right. Or if you’re ordering a single page scrolling website, this will work with challenges at the top down to taking action at the bottom. Basically you are trying to smooth out the user journey. If they enter with questions, you want them to move in one gentle direction to their answer and action.
You can use a flow chart building tool, like Microsoft Word or LucidChart.com, to write out your sitemap. A flowchart will show the relationship between pages. It will reveal how many top categories you have and how many pages fit underneath each one.
How to layout a website navigation
Now it’s time to draw your sitemap in the form of a website navigation bar. Again, pen and paper is going to be the best place to start. But before you do, there are a few navigation givens. What ever you design, make sure your user:
- always knows where they are in your website at all times,
- can easily understand the purpose of each page,
- knows where to get deeper information,
- has a clear path to get ‘back’ to where they they started.
The upshot from this is you need a navigation bar that is super clear and uncluttered. It needs to be fixed in the same place (at the top of screen) on every page of the website. To test out different navigation shapes and sizes, grab pen and paper and draw a bunch of ‘wireframes’. Wireframes are a simplified visual guide of how the website will be laid out. You can draw boxes to represent logos, buttons, text fields and image placeholders. Keep it simple and just show where each element should sit.
There are different navigation menus too. Most websites employ a simple top navigation or super-navigation (see some examples here). Super-navigations run across the top of the page. Items may have a drop down menu showing the few pages in that category or silo. A website with 20+ pages may need a more sophisticated navigation and could employ something we call a ‘maxi-nav’. A maxi-nav simply refers to a detailed dropdown menu showing more of the website’s page structure and hover over links to each page.
How to create SEO-friendly URLs
The words you use on your website are important. Important for your reader and important for search engines. This extends to the words in page URLs. A URL or Uniform Resource Locator is the web address for a specific page of a website. It should tell the user (and Google) what the page contains and where it logically fits in the website page structure. Once you have created a hierarchical sitemap you can enter each page into a spreadsheet document and plan out the URLs.
Before you write your URLs you’ll need to have completed keyword research for your website. This is the practice of finding (through research) the actual search terms users use to find yours and similar websites. These keywords are then carefully and naturally used throughout the website including in the page URLs.
Let’s say that our keyword research revealed that users are searching for ‘website IA’. You would weave that into the page URLs in a semantically natural way.
Here’s a simple example for myiablog.com:
|-What is IA||www.myiablog.com/what-is-website-ia|
We’ve unpacked the topic of website information architecture now it’s over to you. Try planning out your website using the best practices described. Of course, if you’re looking for a web design and development partner we’d love to discuss your web requirements. We love a masterfully uncluttered website that lets the user find what they’re looking for in a flash.
Get in touch with BirdBrain here.