Krug Chapter 6
Street Signs and Breadcrumbs
Flow in UIs
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 their way around it
• 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
1-Jul-16
© Jeff Offutt
2
Organization in Kohl’s
1. Clothes, houseware, jewelry, …
2. Women’s, men’s, kid’s, …
3. Shoes, dress, casual
4. Shirts, pants, …
5. Style : Long sleeve, short sleeve, collar … ?
• NO!!!
The next categorization is by manufacturer,
which most customers do not care about
1-Jul-16
© 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 !
1-Jul-16
© 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 have no idea how much of the store
we have searched
– 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
1-Jul-16
© 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
My son was born in the 21st century … and much
more comfortable navigating the web than I am.
And his older sisters.
1-Jul-16
© Jeff Offutt
6
Benefits of Navigation
1. Something to hold onto
– Like our parents holding our hands
2. Tells users what’s there
3. Tells users how to use the web site
4. Tells users whether to trust the builders of the
web site
1-Jul-16
© 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.
1-Jul-16
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
Sections
Current
Search
Box
Utilities
1-Jul-16
© Jeff Offutt
9
Persistent Navigation
Overly-large
banner
Persistent
navigation
menu
1-Jul-16
© Jeff Offutt
10
Persistent Navigation (2)
Persistent
sub-navigation
1-Jul-16
© Jeff Offutt
11
Persistent Navigation (3)
Another
persistent
sub-navigation
1-Jul-16
© Jeff Offutt
12
Persistent Navigation (4)
• Persistent navigation is calming and comforting
• Should have six elements :
1.
2.
3.
4.
5.
6.
Site ID
A link to the home page
A way to search
Sections – places where users can do things
Utilities – things users can do
Current indicators – where am I?
• Should be on every page except
– Home page
– Form fill pages – acting, not browsing
1-Jul-16
© 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
– http://en.wikipedia.org/wiki/Tab_%28GUI%29
• Tabs were invented in a PhD dissertation in the
early 1980s
1-Jul-16
© Jeff Offutt
14
Flow in User Interfaces
If the UI’s manifest model matches
the users’ mental model the user can
use the software without thinking
By doing what comes naturally
1-Jul-16
© Jeff Offutt
15
GUI Flow
• Flow: The next thing the interface wants to do is exactly
what the user expects
–
–
–
–
–
Follow users’ mental model
Users direct the software
Don’t talk with the user
Keep related tools available
Modeless feedback : The user should not have to respond
• Interfaces should be invisible, not cool
It’s easy to make things complicated, it’s
hard to make things simple
1-Jul-16
© Jeff Offutt
16
Flow is a State of Mind
• When in the flow, users have good concentration
and are not easily distracted
• Syntax interferes with flow
• Surprises interrupt flow
• Good flow allows users to concentrate on tasksemantic knowledge, not syntactic
1-Jul-16
© Jeff Offutt
17
Flow Example
Do you want to save?
Yes
No
Cancel
Help
Of course!!! Don’t ask me.
1-Jul-16
© Jeff Offutt
18
Making the UI Disappear
• Less interaction, not more – what do users need?
• Make likely choices (probabilities) default, and unlikely
choices (possibilities) available
– “Do you want to save?” …. duhhh !
• Give information, not data – 40% saved, not 20,000 bytes
• Indicate status visually – active, busy, idle
• Don’t use dialogs to report normal behavior
• Provide default behavior and mechanisms to change it
• Separate commands (print) from configuration (setup)
• Don’t ask questions, give users choices
• Make dangerous choices hard to reach
1-Jul-16
© Jeff Offutt
19
Design for the Probable
Provide for the Possible
• Choices should be based on probability, not logic
– Logic : 1 out of a million is still possible … if p then s1 else
s2 …
• That’s programmer thinking
– Probability : Make the 999,999 default, make the 1 hard to find
• That’s user thinking!
• Default should save changes when I exit
– Of course I want to save !
– Include an option to discard and exit
1-Jul-16
© Jeff Offutt
20
Daily Summary
1. Understand the users
2. Help users find their stuff
3. Make sure navigation matches
their mental model
1-Jul-16
© Jeff Offutt
21