1. Krug 8 Dialog Boxes Toolbars
Jeff Offutt
SWE 205
Software Usability and Design

2. Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes
Toolbars
12-Nov-18
© Jeff Offutt

3. 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
A major purpose of this class is to give you the knowledge to make objective engineering decisions
12-Nov-18
© Jeff Offutt

4. 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
12-Nov-18
© Jeff Offutt

5. Differing Goals Conflict
Management and Marketing want to increase revenue
Hype
Cool snazzy cuteness
Engineers want to play with fun technology
Managers think their opinions should be relevant
Users just want to achieve a goal
There is no “average user”
12-Nov-18
© Jeff Offutt

6. Let’s look at some more objective engineering principles …
How To Solve This ?
Know the users
You must analyze the users to understand them
You must meet the users
Know & apply general engineering principles
As discussed in this class …
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 …
12-Nov-18
© Jeff Offutt

7. Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes
Toolbars
12-Nov-18
© Jeff Offutt

8. 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 …
12-Nov-18
© Jeff Offutt

9. Modal Dialog Boxes Only use modal boxes for emergencies Modal
No other interaction is allowed until the dialog box is closed
Modal boxes are:
Easy to program
Easy to understand
Intrusive
Too common
Do not put error messages in modal dialog boxes
Error messages should disappear with the next interaction
Only use modal boxes for emergencies
12-Nov-18
© Jeff Offutt

10. Modeless Dialog Boxes Modeless The “owning” program continues
Usually have terminating commands (“close”)
Users must know when they will go away
Find box is modeless
Following their mental models
Four types of dialog boxes …
12-Nov-18
© Jeff Offutt

11. (1) Property Dialog Boxes
User can change settings of an object
font
printing options
12-Nov-18
© Jeff Offutt

12. (2) Function Dialog Boxes
User performs some function
find
print
spell checking
12-Nov-18
© Jeff Offutt

13. (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
12-Nov-18
© Jeff Offutt

14. (4) Process Dialog Boxes
Tells the user the system is busy
Hour glass is not always sufficient
Process box should:
Explain to the user what’s happening
Express that it is unusual
State how much longer … this is hard!
Provide a cancel
12-Nov-18
© Jeff Offutt

15. Today’s Topics Web Developer Teams Arguing (Krug, Ch 8) Dialog Boxes
Toolbars
12-Nov-18
© Jeff Offutt

16. 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
12-Nov-18
© Jeff Offutt

17. Tool Bar Tactics Use icons, not text Buttons should not disappear
Text takes longer to read
Text + pictures use a lot of space
The little helper flags are great!
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.”
12-Nov-18
© Jeff Offutt

18. Tool Bar Tactics (2)
When tool bars are available, menus are used to teach
Hmm … new users may never go to the menus …
Types of buttons on tool bars
Momentary (traditional)
Push it and it activates something
Used to start a function
Latching
Button stays depressed
Used to change state
Pop-ups
Changes size of text
12-Nov-18
© Jeff Offutt

19. Tool Bar Tactics (3) Tool bars should be customizable Movable
Reshapable
Let users add / remove buttons
Let users change size of buttons
12-Nov-18
© Jeff Offutt

20. Summary of Today’s Topics
Web Developer Teams Arguing (Krug, Ch 8)
Dialog Boxes
Toolbars
12-Nov-18
© Jeff Offutt