Norman Chapter 6
Krug Chapter 7
Navigation, Undo
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
Today’s Topics
1.
2.
3.
4.
1-Jul-16
Evolutionary Design (Norman, Ch 6)
Home pages (Krug, Ch 7)
Navigation
Undo
© Jeff Offutt
2
Losing Evolutionary Design
• Pre-1850 : Hand-crafted objects
– Design evolved over time, each new object better than
the last
– Very high production cost
• 1850s-2000s : Large-scale manufacturing
– The same (flawed) design is quickly put into thousands
of products
– Very low production cost
• 1960s-2010
– Designers had make software perfect “out of the box”
– Zero production cost
Manufacturing defeated evolutionary design!
1-Jul-16
© Jeff Offutt
3
Evolutionary Software Design
• Pre-Web software design & production
– Strive for a perfect design, expensive development
– Deploy a new version ever 4 to 6 years
– Evolution was very slow
• Post-Web software production
– Initial “pretty good” design and development
– Faster evolution
• Automatic updates of desktop applications
• Software upgrades pushed out to mobile devices
• Replacing chips in cars during oil changes
We have resuscitated evolutionary design !
1-Jul-16
© Jeff Offutt
4
Example: Designing Public Faucets
• Problem : People forget to turn off the water
• Solutions :
1. Must hold the faucet on
•
One-handed washing, cannot use hot and cold
simultaneously
2. Automatically turn off after X seconds
•
More expensive, less reliable, and what is X?
3. Foot pedal
•
Complicated plumbing, control is invisible, temperature
and volume cannot be controlled
4. Sensor
•
1-Jul-16
Expensive, controls are invisible, temperature and volume
cannot be controlled
© Jeff Offutt
5
Creeping Featurism
• Designers love to add more features
• But how many do users really want ?
• How many do users know how to use ?
– On my old mobile phone, I used 16 of 31 top-level
menu items
– Roughly half of PPT (and I’m a heavy user!)
• Excessive features make UIs harder to learn,
slower to use, and more error-prone
• Usability testing can reveal which features are
used
1-Jul-16
© Jeff Offutt
6
In-class Discussion
With your table-mates, discuss:
How are TDD and evolutionary design
related?
1-Jul-16
© Jeff Offutt
7
Today’s Topics
1.
2.
3.
4.
1-Jul-16
Evolutionary Design (Norman, Ch 6)
Home pages (Krug, Ch 7)
Navigation
Undo
© Jeff Offutt
8
Designing Home Pages
• Home page is usually the most important page in a
website
– And often the hardest to design
• Often designed by committee
• Requirements differ from internal pages
• Most home pages are badly designed
1-Jul-16
© Jeff Offutt
9
Home Page Requirements
1. Site identity and mission
– What is this site and what is it for ?
2. Site hierarchy
– What can I find and what can I do ?
3.
4.
5.
6.
7.
8.
Search
Teases : Hints of what is inside
Timely content : Some content changes frequently
Deals
Shortcuts : To the most commonly used web pages
Registration
1-Jul-16
© Jeff Offutt
10
Additional Abstract Objectives
•
•
•
•
•
Show what users are looking for
Show things users want but are NOT looking for
Show users where to start
Establish credibility and trust
Satisfy unrealistic goals
– Everybody wants something on the home page
– Everybody has an opinion
– Must appeal to ALL users
1-Jul-16
© Jeff Offutt
11
Remember the Big Picture
With all this, it is easy to forget the big picture
WHAT IS THIS SITE?
1. What is this ?
2. What do they have here ?
3. What can I do here ?
5. What do I
do first?
4. Why should I be here—and not somewhere else ?
1-Jul-16
© Jeff Offutt
12
How Does This Do?
What can
I DO
here?
What IS
this?
Where do I
start?
Why should I
BE here?
What do
they HAVE
here?
1-Jul-16
© Jeff Offutt
13
Getting the Message Across
• Taglines
– A cute phrase that describes the entire site
– Should be right next to the Site ID
• Welcome blurb
– Terse description, no scrolling
• Guidelines
–
–
–
–
1-Jul-16
Use as much space as necessary
But not too much !
Do not use a mission statement
Essential to user test
© Jeff Offutt
14
Taglines
• Taglines are difficult-to-design marketing tools
• Website designers and HTML authors should not
think they are good at creating taglines
• Marketing firms earn hundreds of thousands of
dollars for creating taglines
– GMU : Where Innovation is Tradition
• http://gazette.gmu.edu/articles/16070
– VA Tech : Invent the Future
• http://www.vt.edu/
• Leave it to experts
1-Jul-16
© Jeff Offutt
15
Taglines and Examples
1-Jul-16
© Jeff Offutt
16
Taglines and Examples (2)
1-Jul-16
© Jeff Offutt
17
Taglines and Examples (3)
1-Jul-16
© Jeff Offutt
18
Taglines and Examples (4)
???
1-Jul-16
© Jeff Offutt
19
Taglines and Examples (4)
???
1-Jul-16
© Jeff Offutt
20
Taglines and Examples (5)
???
1-Jul-16
© Jeff Offutt
21
Taglines and Examples (6)
???
1-Jul-16
© Jeff Offutt
22
Taglines and Examples (7)
???
1-Jul-16
© Jeff Offutt
23
Home Page Navigation
• Navigation on the home page can be different
– But not too different
•
•
•
•
Needs are different
Can add descriptive phrases of the sections
Can use different layout or orientation
Users must be able to recognize sections are the
same
–
–
–
–
–
1-Jul-16
Names
Order
Wording
Grouping
Text formatting
© Jeff Offutt
24
Problems with Pulldowns
• Users have to go find them
• They’re hard to scan—a big blob of a list
– Programmers tend to put LONG lists into pulldowns
• They tend to disappear quickly
• Clemson : http://www.clemson.edu/
• UVA : http://www.uva.edu/
http://www.virginia.edu/
1-Jul-16
© Jeff Offutt
25
Home Page Summary
Designing home pages involves
very different challenges and is
mostly about marketing
1-Jul-16
© Jeff Offutt
26
In-class Discussion
With your table-mates, find:
One page with a clear tag-line
One page whose tag-line is missing or unclear
1-Jul-16
© Jeff Offutt
27
Today’s Topics
1.
2.
3.
4.
1-Jul-16
Evolutionary Design (Norman, Ch 6)
Home pages (Krug, Ch 7)
Navigation
Undo
© Jeff Offutt
28
Navigation
•
•
•
•
Navigation is moving around a UI
Navigation is never about the users’ goals
Navigation is always excise
Four types of navigation
1.
2.
3.
4.
1-Jul-16
Among multiple windows and screens
Navigation among panes or frames in a window
Navigation among tools and menus
Navigation within information (scrolling, zooming, …)
© Jeff Offutt
29
1. Navigation Among Windows
• The most intrusive because all information changes
• Navigational trauma : User loses track of location
• Avoid making users toggle back and forth
• Don’t make users remember from one screen to another
1-Jul-16
© Jeff Offutt
30
2. Navigation Among Panes
• Use adjacent panes on one window to
– Provide supporting functions
– Display related data
– Provide helpful links
• Too many panes can be confusing
• Group related panes together
• Try to avoid scrolling
– If scrolling is necessary, user should only have to scroll once, not
back and forth
• Tabbed panes group multiple documents and separate
views of the same document
– Tabbing is navigation that hides the previous screen
1-Jul-16
© Jeff Offutt
31
3. Navigation Among Tools & Menus
• Group commonly used tools
• Group tools that are used together
• Make frequently used tools immediately available
– In toolbars or palettes
• Menus require more navigation than toolbars and
palettes
1-Jul-16
© Jeff Offutt
32
4. Navigation Within Information
• Avoid scrolling
– Horizontal scrolling is very difficult
– Scrolling “back and forth” is slow & annoying
• Linking is disruptive
– Must be clearly marked
– Some non-Web applications use link idioms
• Navigating within information needs to be fast
– Mouse is a particularly slow tool
• Compare the navigation in MS-Word with VIM
1-Jul-16
© Jeff Offutt
33
Improving Navigation
• Reduce the number of places to go
– Fewer pages, panes, etc
• Include signposts
– Use persistent screen objects to inform users (titles, menus, …)
• Include overviews so the users can have context
– Should be persistent
– Web “breadcrumbs” and annotated scrollbar (PPT)
• Map controls to functions carefully
– This is about rate of user errors
– Both the target and the result of an operation must be clear
1-Jul-16
© Jeff Offutt
34
Improving Navigation
• Organize navigation for most common actions
– Users are can work harder for low frequency actions
– Soap on the sink, dishwasher soap in the front, and cleanswer in
the back of the cabinet
– This depends on the user
• Auto-customization changes availability based on statistics
• User-customization allows users to move actions around by hand
• Keep hierarchies shallow (2 or 3 levels)
– Programmers are good at logic and abstraction – hierarchies
– Many users are not
– Help users find information
1-Jul-16
© Jeff Offutt
35
Navigation Controls
Duhhh … which knob
controls which burner ?
1-Jul-16
© Jeff Offutt
36
Navigation Summary
Most experts think navigation is the
number one problem in UI design
Especially on the Web
1-Jul-16
© Jeff Offutt
37
In-class Discussion
With your table-mates, find:
Find software with navigation problems
Briefly describe the software and the
problems
1-Jul-16
© Jeff Offutt
38
Today’s Topics
1.
2.
3.
4.
1-Jul-16
Evolutionary Design (Norman, Ch 6)
Home pages (Krug, Ch 7)
Navigation
Undo
© Jeff Offutt
39
Undo
• Multiple purposes
1.
2.
3.
Rescuing mistakes
Exploration – finding out what functions do
Hypothesizing – looking for the correct function
• UIs should assume that everything the user does is
intentional
– “customer is always right”
1-Jul-16
© Jeff Offutt
40
Types of Undo
1. Procedural undo : Operates on actions, not data
– Users are reverting to a previous state, but only
programmers think that way
2. Explanatory undo : User does not know what
action will do, so tries it
1-Jul-16
© Jeff Offutt
41
Single vs. Multiple Undo
• We usually use undo to go back one step
• Multiple undo is more expensive for programmer,
but important for user
• Other types of undo:
– Group multiple undo: Users can see a list of previous
operations and select any of them
• WordFormat (~1991), MS Word (~2003)
– Redo : After undoing, put it back
– Repeat : Apply the same command to next data
1-Jul-16
© Jeff Offutt
42
In-class Discussion
With your table-mates, find:
Pick two editors
What kinds of undo operations do they have?
1-Jul-16
© Jeff Offutt
43
Summary of Today’s Topics
1. Evolutionary design was defeated by
manufacturing, but resuscitaed for software
2. Home pages must answer 5 questions
– Taglines really are important
3. Navigation is crucial excess
4. Users must always be able to undo
1-Jul-16
© Jeff Offutt
44