Making Sitemaps User-ful

Editor's Notes

• #2: I'm going to talk to you about a diagramming technique I developed while working on a website redesign for an international architecture firm earlier this year.
• #3: While I was working on designing the information architecture of the site, running user journey workshops, creating sitemaps and wireframes and the like, 2 of our client's major competitors put their newly designed websites live.
• #4: This sent some of the high level stakeholders into a bit of a frenzy. They wanted to see how our redesign compared to thecompetitors before the visual design had actually begun.
• #5: I considered talking them through a comparison of our sitemap with the competitor's sitemap but this didn't communicate how carefully we'd woven the user journeys into the information architecture.
• #6: The clickable wireframes which they'd already approved weren't having the effect I needed either. They needed to see something visually impressive and understand how the user journeys were integral to the IA.
• #7: I looked into what other visualization techniques I could use to communicate the value of our user centred information architecture design. I was intrigued by how node diagrams can show how points are joined together in a visually compelling way.
• #8: hen I went back to the sitemap and considered I could show the user paths - that the contextual and local navigation links made possible - by reorganizing it more like a node map.
• #9: In order to keep a reference of the navigation design and hierarchy, I applied some colour coding, and I drew arrows between all the pages that were linked by any kind of global or secondary navigation.
• #10: This is the resulting nodemap, which was very effective in demonstrating how the contextual and supplementary navigation put the most important content at the heart of the user journey.
• #11: This is what those contextual and supplementary navigation links look like on the webpage, there is related content from other sections, category links and local navigation all making lateral exploration possible.
• #12: The double headed arrows indicate that links are reciprocal, so for example if you land on an office you can jump right into a related project, news story or person’s profile page.
• #13: This nodemap shows how the IA allows users - who've arrived via google on a deep page of the site - to explore the breadth of the website content without having to learn the global navigation to find their way around.
• #14: It was also very clear when I compared the nodemap of our client’s site to one I drew for their competitor’s, just how much more effective our IA was for allowing users to easily browse the website content.
• #15: The competitor’s website nodemap clearly shows the different content types are in siloes, a complete lack of contextual or local navigation making it impossible to move laterally between sections and or go back without using the back button or returning to the main nav.
• #16: If you are looking to create a fluid IA (and why wouldn’t you?!) then this is definitely a great tool. Showing it to our client impressed them enough for them to stop worrying about what their competitors websites looked like and let us move forward with the visual design.
• #17: A couple round up points about using this technique: it doesn't mean you don't need to do user testing! Just because you've put links in place to connect pages doesn't mean users will necessarily find them....
• #18: However, it CAN help to identify weak points in your navigation design so might want to use it to review your IA before putting it in front of users. Or you could use it for competitor audits.
• #19: You might also find this a useful tool for pitching to a potential new client, or selling the value of IA internally in your organization.  I certainly found it helped us get buy in to the process…
• #20: … and we ended up with a very happy, and better informed client, who is extremely satisfied with their website and knows it doesn't just look better than their clients’ sites, but provides a better user experience too.