Building Usable Websites: A Discussion of Navigation

Tonight’s topic is web navigation. Details are here: http://www.techmaine.com/civicrm/event/info?reset=1&id=93

Got here late and hungry–there’s no pizza tonight! The presenter, Mabel Ney, will post her slides, so I can catch up with that.

Link recommended for user persona discussion: http://www.cooper.com/

Site organization

Each bit of content or page, get’s a post-it note. Find a big wall and get idealized users of the system to help sort the post-its. Try to do it in 30 minutes with 3-5 participants from each audience segment.

Sample Sorting

Mabel presented list of items to sort as an example. The items looked to me like flavors, but the list included sunflowers! The intention was flavors of ice cream, but without a context, the sorting was difficult.

Navigational Models

Suggested mint.com as a site with hierarchical navigation. You go down into features, and then back up. There’s a lot of content (check the sitemap). But this content flows nicely into a hierarchical model. Ande Mabel loves the copy-writing.

NYC transit map example

This is a metaphor for different navigational systems. I.e product search is like the express train.

Idexx site (idexx.com)

Related link model

Musicovery

A competitor to Pandora. Interesting navigation. It’s very graphical. You can choose era, mood, range of time, or genre. It’s as if you get to your stop and then can jump to different dimensions.

MyRecipes

More different ways of looking at navigation that are, in some ways, content centric.

How to determine the navigation scheme

how deep do you need to go?

how savy are your users?

what is the nature of the content?

Measuring

Review documents

Vision statement validation

Persona validation

5 second test

User testing

Heuristic review

What is a 5 second test?

Are key messages & links readily seen?

Allow participants to view page for 5 seconds

Answers in less than 10 minutes

Patterns emerge with very few users

onebythefive.com

I remember: logo, bed, sleep, menu, purple, night time,

I felt: curious feeling

Mabel asked users to explain what they saw and felt. The goal is to determine if the vision statement is reflected in users impressions.

Marriot Site jdvhotels.com/tomo

I remember: Joie de vivre, pictures that I couldn’t interpret easily, Hotel Tomo

I felt: irritated by the clutter

thepodhotel.com

I remember: Young people, the word “Pod”, washed out colors

I felt: confused by number of images, confused about whether this was a hotel or ipod customization technique

Usability Evaluations

What are strengths & weaknesses

Do research, get users

Minimum of 3 per segment

Settings may vary

Allow developers and product stakeholders to observe

Did “speed dating” quickly using different example sites

Mabel’s office performs weekly focus groups. Other times they perform analysis in houses. People are often motivated by free pizza!

Question: What do you ask users?

Answer: For example, for pets and tics, asked users for historical medical information. Then asked user to try using the website to solve the problem. Try to get user to perform a task that they are actually interested in.

Usability Preparation

Recruiting participants: get interested people, reate script, schedule, sometimes provide pre-work (example for site was to ask users to write an example of the best day with kids; to bring favorite kids book)

Script the session: create a welcome script, define tasks and rankings, create a thank you script

Usability Session

Report and rank findings

Work with development team

Update personas

Heuristic Review

What can we fix without recruiting users

Expert review best performed by experts

Maine IXDA provides feedback

Vision Statement Template

For:

Who are seeking:

Our product is:

That provides:

Unlike:

We have:

More sites

http://boxesandarrows.com

http://adaptivepath.com (includes webinars)

http://uie.com (includes webinars)

http://useit.com