Krug Chapter 6 A: Navigation Jeff Offutt https://www.cs.gmu.edu/~offutt/ SWE 205 Software Usability and Design

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

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

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

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

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

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

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

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

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

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

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

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 http://en.wikipedia.org/wiki/Tab_%28GUI%29 Tabs were invented in a PhD dissertation in the early 1980s 10-Nov-18 © Jeff Offutt

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