information architecture class7 02 20

NavigationSI 658 Information Architecture

Marti Gukeisen

2/20/2013

Navigation

Related Readings

Information Architecture for the World Wide Web 3rd

Edition (The Polar Bear Book) Peter Morville & Louis Rosenfeld

ISBN 978-0-596-52734-1

Ch 7 Navigation Systems

1/23/2013

SI658 Information Architecture2

Navigation,

Orientation,

Way-Finding

2/20/2013


where am I, how did I get here, what else is there?

Navigation

navigation = doors & windows

Structure and organization are about building

rooms.

Navigation design is about adding doors and

windows.

2/20/2013


Navigation

effective navigation depends on

structure

organization

labeling

browsing systems

searching systems

2/20/2013


Navigation

standard navigation layout

2/20/2013


Navigation

Navigation Design vs Structure

structure (undeniably IA) is the map of how things

are related

navigation design (definitely UX, but not so cleanly

IA) involves the actual display that conveys the

underlying structure to users

2/20/2013


Navigation

choosing things like

location

color conventions

format (drop menus, flyouts)

orientation cues

2/20/2013


Navigation

Good + Bad = Bad

structure and navigation design are

INTERDEPENDANT

bad structure can’t be fixed by good interface

bad interface will obscure and negate good

structure

2/20/2013


Navigation

navigation design: who gets to decide?

2/20/2013


navigation

UX

IxDIA

usability

visual design strategy

Navigation

protect and serve good UX

2/20/2013


Navigation

Orienting and Navigating

it’s hard to know if you’re ‘there’ if you don’t know

where you are

Orienting: Where am I?

Content Interaction: What is this? Is this what I want?

Navigating: Where else can I go?

2/20/2013


Navigation

why does orientation matter?

2/20/2013


Navigation

if there was a 4th edition, this could be

an inception reference

2/20/2013


Navigation

Orientation Test

People starts in the middle most of the time, usually

from google or a random link someone posted

somewhere. So do that. Now:

1. What site are you on?

2. What page are you on?

3. What section are you in?

4. What’s nearby?

5. Can you tell exactly where in the site you are?

6. Could you navigate back to this page tomorrow

from the site’s homepage?

2/20/2013


Navigation

Navigation Stress Test by Keith Instone

1. Ignore the home page and jump directly into the middle of the site.

2. For each random page, can you figure out where you are in relation to the rest of the site? What major section are you in? What is the parent page?

3. Can you tell where the page will lead you next? Are the links descriptive enough to give you a clue what each is about? Are the links different enough to help you choose one over another, depending on what you want to do?

2/20/2013


Navigation

Where am I?

2/20/2013


Navigation 2/20/2013


Navigation

too much of a good thing

too many navigation aids can bury the hierarchy

and overwhelm the user.

2/20/2013


Navigation 2/20/2013


Navigation

don’t break the back button

2/20/2013


https://www.usertesting.com/videos/sE/dl0GKLiU=?token=pqGGW9JZCjQjelISf1nhKHRnvRwLkCoixoZS2RGHlJU=

https://www.usertesting.com/videos/sE/dl0GKLiU=?token=pqGGW9JZCjQjelISf1nhKHRnvRwLkCoixoZS2RGHlJU=

Navigation

Global Navigation

2/20/2013


= navigation present on

every page of the site

Usually this means:

primary nav in header

secondary header

elements

footer

Navigation

subsites (and subsites of subsites)

2/20/2013


Navigation

Contextual Links

= the other links that aren’t part of the regular

navigation system

body links (in sentences)

some other stuff we thought you’d like

these vary based on the context

2/20/2013


Navigation

good accessibility is good usability

sufficient contrast & text size

text scalability (em not px)

don’t break browser scaling/zooming

efficient tab order/behavior

descriptive alt tags for images

text labels for buttons

(or at least appropriate alt messaging)

link size / spacing

(poor vision / big finger compatibility)

2/20/2013


Navigation

conventions may be boring,

but they are super useful

any time you introduce a NEW paradigm,

you INCREASE the learning curve

seconds are valuable in our A.D.D. world,

so you better make it WORTH it, or users will not be

pleased.

It’s only worth it if the new paradigm is MUCH

BETTER, or sometimes, MUCH COOLER will let you

get by, but that’s risky.

2/20/2013


Navigation

rollover menus

too much is still to much:

the mega menu is often mega bad

2/20/2013


Navigation

good mega menu

2/20/2013


Navigation

frames are dead, all hail Dorothy

killed because they broke the browser

unpredictable back button behavior

bookmarking confused

created annoying layers of scroll bars

2/20/2013


Navigation

Backups are good

taxonomy and navigation

will always fail for a significant % of users and tasks

so don’t be a hater, include alternatives like:

indexes | guides | search | sitemap

2/20/2013


Navigation

sitemaps are a last resort

don’t abandon your down-trodden

if you are working with a CMS, avoid an out-of-

date sitemap through automation

good for SEO, so there’s that

valuable check on site structure—if you can’t

create a reasonable site map, you’re probably

doing it wrong

2/20/2013


Navigation

indexes

2/20/2013


alphabetical list of topics

okay to list things multiple times under alt terms

usually alphabetized by TOPIC

may want to use:

• term permutation

• permutation of terms

Navigation

Peter’s rule for guides

1. short

2. able to exit at any point

3. navigation in the same spot on every page

(Previous, Home, Next)

4. answer questions

5. use good, detailed screenshots

6. guide may need its own TOC

2/20/2013


Navigation

Marti’s notes on guides

tend to be video now

short = less than 2 min

usually introduce a product/service and what you

can DO on the site

if your GUIDE needs a TOC, it’s probably a bad sign

12% of people will ever look at this

4% of those guys will view the whole thing

2/20/2013


Navigation

configurators (wizard is so passé)

2/20/2013


Navigation

other types of supplemental nav

2/20/2013


Navigation

personalization

works best when a site knows a lot about you

gmail – personalized ads based on email content

amazon – online purchase history since the 90s

mint – all my finances

netflix – everything you’ve watched (on netflix), and

maybe how you rated it

facebook – everything about you

2/20/2013


Navigation

customization

everybody’s got it, (almost) nobody’s doing it

probably LOVE it where you use it

probably don’t use it 95% of the time when it’s

available

not usually a UX drawback, but not easy to justify

the ROI

2/20/2013


Project Timethe part where you collaborate and teach each other

2/20/2013


Navigation

Get in your groups

2/20/2013


Navigation

group assignment due TODAY

Have 1 person email it to me.

Includes your group name and the names of all

your group members.

2/20/2013


Navigation

new group assignment

the user experience assessment

this assignment is a hybrid of:

the PACE model - watch JJ at UX week 09

Abby’s IA Heuristics - see the slides

Spider approach from Rubinoff - read the article

template linked to from ctools

excel doc for spider chart linked to from ctools

due Mar 13

2/20/2013


http://vimeo.com/6952223

http://abbytheia.wordpress.com/2012/02/04/ia_heuristics/

http://www.sitepoint.com/quantify-user-experience/

https://docs.google.com/a/umich.edu/presentation/d/1k_n-mD_j-UE3YpZbwAqshPC4iMacgKMa6ALEk1m2ob0/edit?usp=sharing

https://docs.google.com/a/umich.edu/file/d/0B8g4KiGePfjZQXgtU1JHWnh1Rlk/edit?usp=sharing

Presentation

Timethe part where you teach

2/20/2013

44 SI658 Information Architecture

Wrap UpMore stuff for you to do.

2/20/2013

45 SI658 Information Architecture

Navigation

For next week

Due TUES Feb 26th at 11 pm.

50-300 words responding to the following:

2/20/2013


PERVASIVE IA

Ch 1 From Multi-Channel to Cross Channel

Ch 3 Heuristics for a Pervasive IA

other book!

LatersQuestions?

2/20/2013


information architecture class7 02 20

Internet