January 23, 2014
A great online experience is a result of more than visual presentation alone – the hierarchy and organization of your content will directly impact the usability of the site. A sitemap is a document that shows the structure and relationship between the elements on your website. At SplitMango we produce sitemaps during the requirements planning phase of website design and development projects.
Why should we bother creating a sitemap?
We are ensuring the cart is before the horse, so to speak.
The technology we choose depends in part on the scale and complexity of the website. Creating a sitemap early on will eliminate wasted time in the design and development that follow.
You should build a sitemaps if you need to:
- Plan a new websites or revise an existing.
- Understand your content & functional requirements.
- Concisely communicate discovery information.
- Reduce uncertainty for everyone involved with the project.
- Clarify the scope and cost of a design & development project.
Ready to get started?
Step 1: Brainstorm into Buckets
Low tech can be just as effective (and fun!) as some of the fancy tools out there (Gliffy.com, Lucid Chart, Axure are a few suggestions). We suggest using sticky notes as ‘buckets’ to capture brainstormed ideas, which you’ll then be able to easily move around on a wall when its time to establish content hierarchy.
Get started:
- Create user personas for those who will use the site (hint: an admin is a user too!).
- Gather site analytics when possible for a sense of relative importance to current users.
- Consider what each user needs from your site.
- Brainstorm functional requirements for all users (example: user needs to be able to book a tour online and pay by credit card).
- Brainstorm content requirements for all users (examples: gallery to display portfolio, staff bios).
Step 2: Sort & Refine
At this point, you will probably start seeing some natural groupings or hierarchies.
Take this a step further:
- Refine the hierarchy to create your main and supporting navigation menus.
- Emphasize content areas that are important through ordering and grouping. The more visible a menu item, the more the implied importance.
- Eliminate or combine areas that are not serving a purpose or are impractical due to timing or budget constraints (consider those items as a phase 2 if needed).
Step 3: Evaluate & Incorporate Feedback
Once you have established your primary navigation menu, arrange sub items, combining where necessary, take some time to evaluate your site structure.
Ask yourself:
- Will this structure work well for all user groups?
- Has the scope or overall requirements changed? Check with your designer or developer if you’re not sure.
- Are page content balanced? Does each piece of content serve a purpose?
- Should we add or eliminate anything?
- Who is responsible for creating new content?
There will be more opportunity to apply usability principles as we proceed into the wireframing phase (subject of a future post), but you might be surprised how much will be established by simply putting expectations.
What does an effective sitemap look like?
An effective allows both your team and ours to understand both the top level view as well as a level of detail that will advise the layout and design.
An effective sitemap:
- Shows primary navigation & sub pages.
- Shows supporting navigation (footer menu).
- Gives an indication of on page content (text only, text and images, embedded booking widget, etc.).
- Gives an indication of global requirements (elements that should appear on all pages).
- Gives an indication of the relationship between the pages.
Sitemaps are a fantastic tool to ensure everyone involved in a project is on the same page. Think broadly, then iterate, and move from low to high fidelity as you incorporate feedback.