Software Usability and Design Krug 10 GUI Widgets Jeff Offutt http://www.cs.gmu.edu/~offutt/ SWE 205 Software Usability and Design

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

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

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

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

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

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

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 email 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

More Usability Deposits Know users’ questions and answer them Frequently Asked Questions are very valuable Applying to graduate school: https://www2.gmu.edu/admissions-aid/how-apply/graduate/frequently-asked-questions 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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