1. Software Usability and Design
Krug 10 GUI Widgets
Jeff Offutt
SWE 205
Software Usability and Design

2. Today’s Topics Usability as Common Courtesy (Krug, Ch 10) Widgets
22-Sep-18
© Jeff Offutt

3. Krug’s Airline Strike Story
It is plain, simple, common courtesy to tell people what they want to know
User interfaces must be polite !
Mensch : A person having admirable characteristics, such as fortitude and firmness of purpose (answers.com)
My book will be titled “All I really need to know about usability, I learned in Kindergarten”
22-Sep-18
© Jeff Offutt

4. Covey’s Emotional Bank Account
7 Habits of Highly Effective People, by Stephen Covey
We maintain a personal “emotional” bank account with everyone we have a relationship with
Friends, spouses, parents, children, teachers, students
The account starts neutral
Deposits : Doing something good (building trust)
Withdraws : Doing something wrong
If the account goes negative, it is very hard to recover trust
22-Sep-18
© Jeff Offutt

5. Depositing Into the Bank Account
Understand the other person
Keep commitments
Clarify expectations
Attend to the little things
Show integrity
Apologize sincerely for withdrawals
If a GUI goes negative, the user will not come back
22-Sep-18
© Jeff Offutt

6. Usability Withdrawals
Hiding information that users want
Phone numbers, shipping rates, prices
Phone calls are expensive, but hiding phone numbers costs more than it saves
Punishing users for not doing things your way
Formatting numbers (to dash or not to dash?)
Asking users for unnecessary information
Do you really need my home address?
My social?
Trying to fool me (“shuck and jive”)
“Your call is important to us” … I know it’s not!
22-Sep-18
© Jeff Offutt

7. More Usability Withdrawals
Putting cool junk (“sizzle”) in the users’ way
Flash intro, marketing photos
Amateurish looking website
Sloppy, disorganized, unprofessional
Sometimes violating these principles will save money … but calculate the cost versus the benefit as a business decision
Don’t do it out of ignorance
22-Sep-18
© Jeff Offutt

8. Usability Deposits Know what users want and make them easy and obvious
Always keep your eyes on the goal
Tell users what they want to know
Costs, extra fees … UIs get more points for honesty than they lose from being expensive
Save users steps when possible
Put links in
Combine login and registration into one screen
Put some effort into making info available
Think hard about what users know and don’t know
22-Sep-18
© Jeff Offutt

9. More Usability Deposits
Know users’ questions and answer them
Frequently Asked Questions are very valuable
Applying to graduate school:
Must keep these up to date !
Make users comfortable with easy-to-print pages
No navigation, no ads
Make error recovery easy
When in doubt, apologize
Everybody makes mistakes, the mark of character is whether you apologize, fix it, and learn
22-Sep-18
© Jeff Offutt

10. Summary
Everything I need to know about usability, I learned in kindergarten
Don’t push
If you hurt somebody, say you’re sorry
Help your friends
Listen to the teacher
Don’t make messes—if you do, clean them up
Be nice
If you got an A in kindergarten, you can design good user interfaces
22-Sep-18
© Jeff Offutt

11. Today’s Topics Usability as Common Courtesy (Krug, Ch 10) Widgets
22-Sep-18
© Jeff Offutt

12. What’s a Widget? Widget : A building block for an interface
Characters, text, pictures, and other elements
Anything that is put on screen
22-Sep-18
© Jeff Offutt

13. GUIs Respond to Widget Events
Event : An interaction with a GUI that can cause the software to do something
Moving onto a widget
Moving off of a widget
Clicking on a widget
“button down”
“button up”
22-Sep-18
© Jeff Offutt

14. Widgets Scroll Bar Push Button Pull-down Menu Radio Box Dialog
Menu Bars
Bound Value / Scale
Spinner
22-Sep-18
© Jeff Offutt

15. 1) Widget – Scroll Bar
Use when list or text is too long for the window
Better to expand the window if possible
Horizontal scrolling is hard
Scrollbars require mixing fine motor control (holding a button on a tiny icon) with large motor control (moving your arm)
Vertical
Horizontal
22-Sep-18
© Jeff Offutt

16. 2) Widget – Push Button Used to activate an action
This is sometimes unrecoverable ... do not use in dangerous situations
Usually offers little or no feedback
22-Sep-18
© Jeff Offutt

17. 3) Widget – Pull-Down Menu
Should be about 7 items
Can be longer if there is a clear ordering or searching is easy
(states, courses, ... )
Can be longer if list is fixed and syntax must be perfect
That is, we can trade off searching time for errors on data entry
22-Sep-18
© Jeff Offutt

18. 4) Widget – Radio Box
Selects from of a set of mutually exclusive options
A specialized menu (single-selection)
Collection of checkboxes
Uses
Set state in system
Set options for customization
3 – 8 options
Very fast to use, but uses screen space
22-Sep-18
© Jeff Offutt

19. 4) Widget – Radio Box (2) Small group of mutually exclusive choices
If crowded, use a drop-down list (slower)
Same as single selection lists
Printer A Printer B Printer C
22-Sep-18
© Jeff Offutt

20. Pull-down Menus vs. Radio Buttons
They both accomplish the same task
Radio buttons are fixed on the screen,
Pull-down menus show up on-demand
Radio buttons are faster to learn, faster to use, less error prone
Use radio buttons except when :
More than 8 choices
Screen is crowded
Choices available depend on other selections (the choices change dynamically)
22-Sep-18
© Jeff Offutt

21. 5) Widget – Dialog Make sure that labels are clear and unambiguous
Yes / No is sometimes not as clear as Yes / Cancel
The user must know what will happen when a choice is made
Built-in specialized dialog boxes are often convenient, but sometimes not exactly what is needed
Are you sure?
Yes
Cancel
22-Sep-18
© Jeff Offutt

22. 6) Widget – Menu Bars (ButCons)
Used for permanent menus
Put choices that should always be available :
Crucial choices (Exit, Help, ...)
Most often used choices
Save Print Exit Help
22-Sep-18
© Jeff Offutt

23. 7) Widget – Bound Value / Scale
Use when user needs to select a value from a large range
Often combined with text selection for flexibility
100 __ 5
Scale
5000
22-Sep-18
© Jeff Offutt

24. 8) Widget – Spinner Use to select a value from a range
The value has to be precise, but the range is large
Age
Weight
Day of year
Can be combined with text selection for flexibility
Edit window can allow arbitrary (invalid) inputs or only inputs within the range 49 51 48 50 46 47
Age
22-Sep-18
© Jeff Offutt

25. HTML 4 Widgets – Form Elements
Textboxes
Password boxes
Text areas
Radio buttons
Checkboxes
Menus
Buttons
Submit
Reset
Tab order
Keyboard shortcuts
22-Sep-18
© Jeff Offutt

26. Widget Summary : Using Controls
Don’t use the first control you think of
Think about the user’s needs and design the right solution
22-Sep-18
© Jeff Offutt