Krug 10
GUI Widgets
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 205
Software Usability and Design
Today’s Topics
1. Widgets
2. Usability as Common Courtesy (Krug, Ch 10)
1-Jul-16
© Jeff Offutt, 2010
2
What’s a Widget?
Widget : A building block for an
interface
Characters, text, pictures, and
other elements
Anything that is put on screen
1-Jul-16
© Jeff Offutt, 2010
3
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”
1-Jul-16
© Jeff Offutt, 2010
4
Widgets
1.
2.
3.
4.
1-Jul-16
Scroll Bar
Push Button
Pull-down Menu
Radio Box
5.
6.
7.
8.
© Jeff Offutt, 2010
Dialog
Menu Bars
Bound Value / Scale
Spinner
5
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
1-Jul-16
© Jeff Offutt, 2010
6
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
1-Jul-16
© Jeff Offutt, 2010
7
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
1-Jul-16
© Jeff Offutt, 2010
8
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
1-Jul-16
© Jeff Offutt, 2010
9
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
1-Jul-16
Printer B
© Jeff Offutt, 2010
Printer C
10
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)
1-Jul-16
© Jeff Offutt, 2010
11
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
1-Jul-16
© Jeff Offutt, 2010
12
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
1-Jul-16
Print Exit
© Jeff Offutt, 2010
Help
13
7) Widget – Bound Value / Scale
• Use when user needs to select a value from a large
range
• Often combined with text selection for flexibility
Scale
0
100
0
__
1-Jul-16
5
5000
5
© Jeff Offutt, 2010
14
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
51
50
49
48
47
46
Age
1-Jul-16
© Jeff Offutt, 2010
15
HTML 4 Widgets – Form Elements
1. Textboxes
1. Password boxes
2. Text areas
2.
3.
4.
5.
Radio buttons
Checkboxes
Menus
Buttons
1. Submit
2. Reset
6. Tab order
7. Keyboard shortcuts
1-Jul-16
© Jeff Offutt, 2010
16
Widget Summary : Using Controls
Don’t use the first control you think of
Think about the user’s needs and design
the right solution
1-Jul-16
© Jeff Offutt, 2010
17
Today’s Topics
1. Widgets
2. Usability as Common Courtesy (Krug, Ch 10)
1-Jul-16
© Jeff Offutt, 2010
18
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”
1-Jul-16
© Jeff Offutt, 2010
19
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
1-Jul-16
© Jeff Offutt, 2010
20
Depositing Into the Bank Account
1.
2.
3.
4.
5.
6.
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
1-Jul-16
© Jeff Offutt, 2010
21
Usability Withdrawals
1. Hiding information that users want
– Phone numbers, shipping rates, prices
– Phone calls are expensive, but hiding phone numbers
costs more than it saves
2. Punishing users for not doing things your way
– Formatting numbers (to dash or not to dash?)
3. Asking users for unnecessary information
– Do you really need my home address?
– My social?
4. Trying to fool me (“shuck and jive”)
– “Your call is important to us” … I know it’s not!
1-Jul-16
© Jeff Offutt, 2010
22
More Usability Withdrawals
5. Putting cool junk (“sizzle”) in the users’ way
– Flash intro, marketing photos
– http://communityrelations.gmu.edu/speakersbureau/
6. 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
1-Jul-16
© Jeff Offutt, 2010
23
Usability Deposits
1. Know what users want and make them easy and
obvious
– Always keep your eyes on the goal
2. Tell users what they want to know
– Costs, extra fees … UIs get more points for honesty
than they lose from being expensive
3. Save users steps when possible
– Put links in email
– Combine login and registration into one screen
4. Put some effort into making info available
– Think hard about what users know and don’t know
1-Jul-16
© Jeff Offutt, 2010
24
More Usability Deposits
5. Know users’ questions and answer them
– Frequently Asked Questions are very valuable
– My class instructions:
http://www.cs.gmu.edu/~offutt/classes/642/resources.html
– Must keep these up to date !
6. Make users comfortable with easy-to-print pages
– No navigation, no ads
7. Make error recovery easy
8. When in doubt, apologize
– Everybody makes mistakes, the mark of character is
whether you apologize, fix it, and learn
1-Jul-16
© Jeff Offutt, 2010
25
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
1-Jul-16
© Jeff Offutt, 2010
26