1. Krug Chapter 6 A: Navigation
Jeff Offutt
SWE 205
Software Usability and Design

2. Help Users Find Your Stuff
People won’t use your website if they can’t find things
Shoppers usually look for something specific
Stores provide clues to help find things
Organization that makes sense – TO CUSTOMERS
Signs that provide useful information
If customers have to ask for help, the store has failed
10-Nov-18
© Jeff Offutt

3. Organization in Kohl’s
Clothes, houseware, jewelry, …
Women’s, men’s, kid’s, …
Shoes, dress, casual
Shirts, pants, …
Style : Long sleeve, short sleeve, collar … ?
NO!!!
The fifth categorization is by manufacturer, which many customers do not care about
10-Nov-18
© Jeff Offutt

4. Web Shopping Some users always use the search box first Others browse
If users do not find what they want fairly quickly, they go somewhere else
It’s easy to go to a different store on the web !
10-Nov-18
© Jeff Offutt

5. Oddities of Web Browsing
No sense of scale
We can look up and around to see how big Home Depot is
On the web, we don’t know how much we’ve seen
When do we stop ?
No sense of direction
No left, right, up, down … just a partial hierarchy
No sense of location
Where are we in relation to the rest of the store?
No peripheral vision
10-Nov-18
© Jeff Offutt

6. UIs Must Help Users Navigate
No mental model to navigate web sites
No physical sense of location
Bookmarks become important
Back button is essential
Home pages give users comfort
Navigation must be very good !
Generational Differences
I wonder if people born in the 21st century have a different mental model for navigating on the web
10-Nov-18
© Jeff Offutt

7. Benefits of Navigation
Something to hold onto
Like our parents holding our hands
Tell users what’s there
Tell users how to use the web site
Tell users whether to trust the builders of the web site
10-Nov-18
© Jeff Offutt

8. Follow Common Conventions
What is the hardest part about driving in DC ?
Traffic lights are on the sidewalks, not overhead
Web site conventions will evolve for years
Keep up
Common elements on the web
Site ID
Home page
Search
Sections – Places where users can do things
Utilities – Things users can do
Current indicators – Where am I?
10-Nov-18
© Jeff Offutt

9. Common Conventions Utilities Search Box Current Site ID Sections
10-Nov-18
© Jeff Offutt

10. Persistent Navigation
Overly-large
banner
Persistent
navigation
menu
10-Nov-18
© Jeff Offutt

11. Persistent Navigation (2)
sub-navigation
10-Nov-18
© Jeff Offutt

12. Persistent Navigation (3)
Another
persistent
sub-navigation
10-Nov-18
© Jeff Offutt

13. How Did We Live Without Tabs?
Tabs implement menus
Functionality is obvious – they match an existing physical object
Easy to see
Look good
A strong visual illusion that the current page moves to the front
Tabs were introduced to industry by IBM’s CUA
Tabs were invented in a PhD dissertation in the early 1980s
10-Nov-18
© Jeff Offutt

14. Navigation Summary
Jakob Nielsen claims that navigation is the number 1 problem on the web
10-Nov-18
© Jeff Offutt