Krug Chapter 6 A Navigation Jeff Offutt https

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 17 -Sep-20 © Jeff Offutt 2

Organization in Kohl’s 1. Clothes, houseware, jewelry, … 2. Women’s, kid’s, … 3. Shoes, dress, casual 4. Shirts, pants, … 5. Style : Long sleeve, short sleeve, collar … ? • NO!!! The fifth categorization is by manufacturer, which many customers do not care about 17 -Sep-20 © Jeff Offutt 3

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 ! 17 -Sep-20 © Jeff Offutt 4

Oddities of Web Browsing 1. 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 ? 2. No sense of direction – No left, right, up, down … just a partial hierarchy 3. No sense of location – Where are we in relation to the rest of the store? 4. No peripheral vision 17 -Sep-20 © Jeff Offutt 5

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 21 st century have a different mental model for navigating on the web 17 -Sep-20 © Jeff Offutt 6

Benefits of Navigation 1. Something to hold onto – Like our parents holding our hands 2. Tell users what’s there 3. Tell users how to use the web site 4. Tell users whether to trust the builders of the web site 17 -Sep-20 © Jeff Offutt 7

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 1. 2. 3. 4. 5. 6. 17 -Sep-20 Site ID Home page Search Sections – Places where users can do things Utilities – Things users can do Current indicators – Where am I? © Jeff Offutt 8

Common Conventions Site ID Utilities Current Search Box Sections 17 -Sep-20 © Jeff Offutt 9

Persistent Navigation Overly-large banner Persistent navigation menu 17 -Sep-20 © Jeff Offutt 10

Persistent Navigation (2) Persistent sub-navigation 17 -Sep-20 © Jeff Offutt 11

Persistent Navigation (3) Another persistent sub-navigation 17 -Sep-20 © Jeff Offutt 12

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_%28 GUI%29 • Tabs were invented in a Ph. D dissertation in the early 1980 s 17 -Sep-20 © Jeff Offutt 13

Navigation Summary Jakob Nielsen claims that navigation is the number 1 problem on the web 17 -Sep-20 © Jeff Offutt 14