All the latest news, events and projects from iD30...
How to plan a website with a sitemap
What a sitemap is
Website structure is the way individual pages are linked together.
You could make sure that each page has a link to every single other page, but that would be a daunting list of links which users will not want to spend time looking through.
To avoid this list you need to separate the links into categories, usually one top level page will link to categories and those will link to all the pages in that category.
You could have the category “100-150” which every webpage containing from 100 to 150 words comes under, but that is a category which does not help users quickly find what they want.
Why you need a sitemap
Creating a site structure using a sitemap will help visualise the organisation of your website and enable you to identify how long it would take a user to get to the page they want.
Knowing this, you can speed up navigation of your website by restructuring your sitemap.
The key is to make sure that there are less steps to get to where you need i.e. to get to Cats on a pet website you click Cats and you are there, not by clicking mammal… domesticated etc…
That the steps that are taken are logical i.e. clicking Dogs will lead to Dogs, not Cats.
If I was trying to structure the website for a pet shop I would need to know what the pet shop sells. This imaginary one offers the following:
- Food for Rabbits, Cats and Dogs.
- Toys for Rabbits, Cats and Dogs.
- Treats for Rabbits, Cats and Dogs.
- Adopt a Rabbit, Cat or Dog.
From that information I have made three sitemaps, which one do you think is the best?
The first one has 2 categories off the home page, which is good. But there are 4 layers, meaning a longer time for users to get to the action page where they can actually buy.
The second version has 4 options from the home page and 3 layers, which isn’t a bad number.
The last one is basically a reverse of number 2, but it is hard to say which would be more successful at converting customers. This is where experienced eCommerce designers come in and use their knowledge to choose the best layout before all the effort has been put into making it.
If you spend the time planning the layout of the website, the finished product will be far better at doing its job and you avoid remaking webpages because of a change of structure.
As the name implies breadcrumbs are links back to where you have visited on your journey through the website. They are usually found underneath the main navigation bar and shown like this:
Home > Subpage > Your Location
For the pet shop if you were looking at cat food the breadcrumbs bar would look like this:
Home Page > Cats > Food
Some websites have now started to use graphics for this navigation, though most just use hyperlinked words which serve their purpose.
Not all the links
This way of designing a website does not include all the links which will actually be in the website.
There is always going to be a top navigation bar on every page with a link to the highest level categories and a link to the home page, which is usually the company or brand logo.
Then there is the breadcrumbs linking back to the previous pages.
In some cases it might be appropriate to link to other subcategories from a subcategory page, for example; in the pet shop website you could link from dog food to cat food in a related items section or within the page itself.
The sitemap is the framework for these extra links, a starting point for the website design to progress from.
It’s always good to plan something big before you start, imagine building a house without seeing an architect, same premise here but websites are the houses and we are the architects.
If you want any help planning your house we cannot help, though we can help you plan any websites you are building. Contact us at iD30.
STAY UP TO DATE...
Get the latest goodies and special treats from the iD30 camp