evolution of the sitemap

evolution of the sitemap

improve the usability of your deliverablesChris Pierson & Jacco NieuwlandEuroIA - September 25th, 2009

introductions

Chris PiersonUX consultant10 years UX experience2.5 years at User Intelligence

Jacco NieuwlandUX consultant8 years UX experience4 years at User Intelligence

User IntelligenceIt’s our goal to design interactive products that provide great User Experiences, based on knowledge of both the users and the business.

Services we offer:• Research • Design• Optimize

www.userintelligence.com

what is a sitemap

a sitemap is a diagram in which the various pages or page types throughout the site and the user paths to and from them are documented.

A sitemap is an overview of the pages within a website.

the sitemap is an IA relic from the web 1.0 era

A site map is a diagrammatical representation of the logical structure of a set of webpages

a design deliverable that seeks to communicate the overall structure and navigation of [a website] –possibly including screens, pages, objects, states and flows

our definition

why talk about sitemaps?

why talk about sitemaps?

why talk about sitemaps?

why (talk about) sitemaps?• So many of us still do this – and need to do

this• Nature of websites and applications is changing

So sitemaps need to evolve to be able to effectively communicate structure and concepts

• Structure needs to be mapped & communicated

where have we come from?

Where have we come from?web 1.0

hierarchicaltop-downstatic HTML

where are we now?

Where are we now?web 2.0

linked & shared contentfocused on user & communitiesXML, RSS

sitemap

primary action map

sitemap + navigation scheme

Alternative visualisations

concept map

user flows

UIAML scheme

screenflow plus scenario

storyboard for interactive movie

interaction matrix / interesting moments grid

wireflow

Where are we going?

Where are we going?web 3.0

the semantic webthe machine weblinked data clouds

even though the way data is handled will change, in many cases the design of the websites that display that data will not change drastically

recap

sitemaps are still used to communicate structure, navigation and concepts

it takes a lot of these diagrams to create something simple

different audiences can have different information needs – documentation needs to account for this

so, is there a way to incorporate all these needs into one deliverable?

interactive documentation

interactive documentation allows for different layers of information and different views of the same design

there are existing tools that do this (Axure, Balsamiq, swipr, etc) - but none provide the complete set of features we’re looking for

why not apply our user experience design experience to our documentation?

requirements for documentation:• easy to create• easy to maintain• creative control (open) • easy to share/publish

• contextual communication• easy to navigate / intuitive

sketches /ideas

past experience shows enthusiasm with the audiences and improved understanding of the design

2005 – UK government – communicate the design of a complicated web application

integrating screenflows, wireframes, mockups, validation rules/business rules

wrap-up

mapping & visualising structure and behaviour is still important

a sitemap is more than just a hierarchical collection of pages

visualisations are naturally evolving with evolving technology

different audiences have different needs

helps to cater for these audiences in one deliverable

interactive documentation

is an opportunity to apply our UX Design experience to our deliverables allows us to present these different layers of information in context

what next?

Chris Piersonpierson@userintelligence.com

Jacco Nieuwlandnieuwland@userintelligence.com

user intelligenceAmsterdam officewww.userintelligence.com

thank you!

Interested? Want to see more?

See more of our presentationsslideshare.net/UserIntelligence

Visit our websiteBlog posts, articles, cases and much more

Follow our activitieson twitter or subscribe to our newsletter