Krug 8
Dialog Boxes
Toolbars
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
Today’s Topics
1. Web Developer Teams Arguing (Krug, Ch 8)
2. Dialog Boxes
3. Toolbars
1-Jul-16
© Jeff Offutt, 2010
2
Religious Arguments
• Engineering decisions vs. personal preferences
– UI teams often argue about design choices based on
subjective opinions
– Few discuss choices objectively
• Ramifications
– Opinions don’t change
– Team spirit degrades and tensions emerge
• The purpose of this class is to give you the
knowledge to make objective engineering
decisions
1-Jul-16
© Jeff Offutt, 2010
3
Web Designers are Web Users
• Many web designers have strong feelings about
what they like and don’t like
– As users !
• Being web designers make them think their
feelings are relevant
• Even worse, web designers mistakenly think that
most users have similar preferences
First understand
Then be understood
1-Jul-16
© Jeff Offutt, 2010
4
Differing Goals Conflict
• Management and Marketing want to increase
revenue
– Hype
– Cool snazzy cuteness
• Users just want to achieve a goal
• And managers think their opinions should be
relevant!!
There is no “average user”
1-Jul-16
© Jeff Offutt, 2010
5
How To Solve This ?
1. Know the users
– You must analyze the users to understand them
– You must meet the users
2. Know & apply general engineering principles
– As discussed in this class …
3. Test the UI on the users
– Debates waste time and disrupt teams
– User testing gives evidence
Let’s look at some more objective
engineering principles …
1-Jul-16
© Jeff Offutt, 2010
6
Today’s Topics
1. Web Developer Teams Arguing (Krug, Ch 8)
2. Dialog Boxes
3. Toolbars
1-Jul-16
© Jeff Offutt, 2010
7
Dialog Boxes
Dialog boxes are often
inconveniently designed
• Unnecessary
• In the wrong place
• Labeled with confusing text
Dialog boxes are
interruptions
Dialog boxes are excise
Use dialog boxes for:
• Exceptional interactions
• Dangerous interaction
Not for navigation …
1-Jul-16
© Jeff Offutt, 2010
8
Modal Dialog Boxes
Modal
No other interaction is
allowed until the dialog box
is closed
Modal boxes are:
•
•
•
•
Do not put error messages
in modal dialog boxes
Easy to program
Easy to understand
Intrusive
Too common
Error messages should disappear
with the next interaction
Only use modal boxes
for emergencies
1-Jul-16
© Jeff Offutt, 2010
9
Modeless Dialog Boxes
Modeless
The “owning program continues
Usually have terminating
commands (“close”)
Users must know when
they will go away
Following their mental models
Find box is modeless
Four types of dialog boxes …
1-Jul-16
© Jeff Offutt, 2010
10
(1) Property Dialog Boxes
User can change settings of an object
• font
• printing options
1-Jul-16
© Jeff Offutt, 2010
11
(2) Function Dialog Boxes
User performs some function
• find
• print
• spell checking
1-Jul-16
© Jeff Offutt, 2010
12
(3) Bulletin Dialog Boxes
Gives the user some feedback
• error message
• confirmation messages
Note that users do not request these!
When opening
Blackboard
Our favorite
1-Jul-16
© Jeff Offutt, 2010
13
(4) Process Dialog Boxes
Tells the user the system is busy
• Hour glass is not always sufficient
• Process box should:
•
•
•
•
1-Jul-16
Explain to the user what’s happening
Express that it is unusual
State how much longer … this is hard!
Provide a cancel
© Jeff Offutt, 2010
14
Today’s Topics
1. Web Developer Teams Arguing (Krug, Ch 8)
2. Dialog Boxes
3. Toolbars
1-Jul-16
© Jeff Offutt, 2010
15
GUI Menus: Tool Bars
A tool bar is a menu of buttons
• Permanent menu
• Designed for knowledgeable users
• Use to provide fast access to commonly used
functions
Three distinct toolbars
1-Jul-16
© Jeff Offutt, 2010
16
Tool Bar Tactics
1) Use icons, not text
• Text takes longer to read
• Text + pictures use a lot of space
• The little helper flags are great!
2) Buttons should not disappear
• Inactive buttons should not “depress” when clicked
• They should be grayed out, if possible
• The worst error messages are those that say “you
can’t do that now.”
1-Jul-16
© Jeff Offutt, 2010
17
Tool Bar Tactics (2)
3) When tool bars are available, menus are used to
teach
• Hmm … new users may never go to the menus …
4) Types of buttons on tool bars
• Momentary (traditional)
• Push it and it activates something
• Used to start a function
Changes
size of text
• Latching
• Button stays depressed
• Used to change state
• Pop-ups
1-Jul-16
© Jeff Offutt, 2010
18
Tool Bar Tactics (3)
5) Tool bars should be customizable
•
•
•
•
1-Jul-16
Movable
Reshapable
Let users add / remove buttons
Let users change size of buttons
© Jeff Offutt, 2010
19
Summary of Today’s Topics
1. Web Developer Teams Arguing (Krug, Ch 8)
2. Dialog Boxes
3. Toolbars
1-Jul-16
© Jeff Offutt, 2010
20