Human Computer Interaction (HCI) Dr. Muhammad Tahir Chapter 8

GUI Bloopers

UID Controls

UID Controls

Controls for selecting one of two choices UID Controls Controls for selecting one of two choices Which one to choose?

Controls for selecting one of N choices UID Controls Controls for selecting one of N choices Which one to choose?

and their combinations! UID Controls Many more controls! and their combinations!

Which one to choose? Depends upon the: UID Controls Which one to choose? Depends upon the: 1- System requirements 2- Screen space available 3- Types of users

GUI Control Bloopers Confusing checkboxes and radio buttons

GUI Control Bloopers Confusing checkboxes and radio buttons To choose one of several possible values One selected others deselected In groups Check boxes States: On/Off, Yes/No, True/False Check box empty when in Off state Check box ticked when in On state Independent

GUI Control Bloopers Confusing checkboxes and radio buttons

GUI Control Bloopers Confusing checkboxes and radio buttons Three different ways of confusion Single Radio button Check boxes as radio buttons Mutually exclusive check boxes

GUI Control Bloopers Confusing checkboxes and radio buttons Single Radio button Single radio button misused as check box It is a design blooper !

GUI Control Bloopers Confusing checkboxes and radio buttons Single Radio button Single radio button misused as check box

GUI Control Bloopers Confusing checkboxes and radio buttons Checkboxes as radio button

GUI Control Bloopers Confusing checkboxes and radio buttons Mutually exclusive checkboxes Grouping multiple checkboxes One can be ON at a time ! It is a design blooper

GUI Control Bloopers Confusing checkboxes and radio buttons Good Use: How? Radio buttons for: One out of many options At least in a set of two Single radio button is not a valid control

GUI Control Bloopers Confusing checkboxes and radio buttons Good Use: How? Radio buttons require a lot of space: Alternatives: Drop-down menus Scrollable list boxes Spin boxes

GUI Control Bloopers Too many Tabs

GUI Control Bloopers Too many Tabs To save space To overlay / share information space Good when used along one edge (e.g. Top)

GUI Control Bloopers Too many Tabs Widen the Panel If more tabs Can result in wasted space due to limited controls or data to display

GUI Control Bloopers Too many Tabs Tabs all around ! Put tabs on more than one edge Left, Right, Top, Bottom People can perceive these tabs as hierarchy Categories / sub-categories Aesthetically not appealing

GUI Control Bloopers Too many Tabs Short Labels Abbreviating tab labels (to allow more tabs) Not clear to user One or two-line labels Probably OK ! Difficult to read Mix of one and two-line labels look bad

GUI Control Bloopers Too many Tabs Dancing tabs Multiple rows of tabs Selecting a tab: Displays panel of information Shifts to first row Replaces with new panel Disorients users Live example of Windows Media Player “Options” !

GUI Control Bloopers Too many Tabs Good use of too many tabs: Keep number of tabs small More tabs, more panels Re-organize panels in fewer tabs Widen panel slightly If extra space required is very small Never use dancing tabs! Because they don’t let preserve “screen inertia”

GUI Control Bloopers Too many Tabs Good use of too many tabs: Use another control instead of tabs e.g. Radio buttons, drop down menus, scrollable lists ...

Using input controls for display only data GUI Control Bloopers Using input controls for display only data (Blooper 6)

GUI Control Bloopers Using input controls for display only data (Blooper 6) Using editable controls to display non-editable data See example on next slide Use of checkboxes as “required” fields Users cant change the values of checkboxes These are just indicators Use of text entry box for non-editable information Instructions for filling out the form Why display data using these irrelevant controls?

Use of checkboxes to mark required fields! Non-editable text entry box!

GUI Control Bloopers Using input controls for display only data (Blooper 6) Another example: Using text fields as non-editable fields !

GUI Control Bloopers Using input controls for display only data (Blooper 6) Why display data using these irrelevant controls? Setting editability but not appearance (GUI Toolkits) Inactivity of control is different than appearance Indirect editable data

GUI Control Bloopers Using input controls for display only data (Blooper 6) Avoiding it: Non-editable data NOT in editable/operable controls Non-editable text fields could be used IF Inactive and without border

GUI Control Bloopers Using input controls for display only data (Blooper 6) Avoiding it: Replace text-fields/check-boxes/etc. with text-labels Sometimes it is necessary to display data in scrolling text boxes License information, user agreements, contracts, etc.

Overusing text fields for constrained input UID Controls: Example 3 Overusing text fields for constrained input

UID Controls: Example 3 Overusing text fields for constrained input Constrained data Time of the day Date of birth Telephone numbers Postal codes / Social Security numbers Money amounts (with specific symbols) Simple text fields for formatted data !

UID Controls: Example 3 Overusing text fields for constrained input Format of valid data and text fields Text fields are unstructured for constrained data Require “parser” to check required format

UID Controls: Example 3 Overusing text fields for constrained input Good Use: User specialized input controls: Multiple text fields Telephone numbers into: country codes, area codes, final digits Dates into: day, month, year Labels on these multiple text fields

UID Controls: Example 3 Overusing text fields for constrained input Good Use: User specialized input controls: Multiple text fields Another example:

UID Controls: Example 3 Overusing text fields for constrained input Good Use: Using data-type specific controls Constrains the input to valid values e.g. Sliders, drop-down text boxes, etc.

UID Controls: Example 3 Overusing text fields for constrained input Good Use: Don’t force users to type data into text fields Use of specialized controls

UID Controls: Example 3 Overusing text fields for constrained input Good Use: Provide a pattern Automatic movement of insertion point or Use of tab key Provide a pattern

UID Controls: Example 4 Dynamic Menus

UID Controls: Example 4 Dynamic Menus Menu items appear and disappear based on the state of the application Menu Bar Menu Menu Item

UID Controls: Example 4 Dynamic Menus Creates confusion Different menu items at different times in menu Adding and removing commands confuses users! Disturbs spatial memory Need to remember the context on which the items changed

UID Controls: Example 4 Dynamic Menus Good Use: Activate/De-activate (gray-out) inapplicable commands Add/Remove Menus not menu items Table menu appears if table is selected Users start learning from menus

The Golden Rules of UI Design

The golden rules of UID Rule 1: Flexible control of the Interface Use modes judiciously Draw rectangle mode / Select Mode Keyboard or mouse Login password then Enter! Display descriptive messages “Your password need to be 2048 bytes long! Please Retype.”

The golden rules of UID Rule 1: Flexible control of the Interface Make the user interface transparent Put up the most important information first Allow users to customize the interface Customize information (colors, fonts, location, ...) Customize interaction (keystrokes, clicks, mappings ...)

The golden rules of UID Rule 2: Reduce User’s Memory Load Relieve short-term memory (remember) Don’t force users to remember information Filling an online form: name, address, telephone numbers, ... These information required at later stage System should be able to retrieve previous information Recognition is better than recall (LTM) List / Menus having “selectable” information (recognition) Don’t let user type information (recall)

The golden rules of UID Rule 2: Reduce User’s Memory Load Provide visual cues (Prospective Memory) As reminders for users MS Word: title bar, blinking cursor, scrollbar, text mode .... Provide defaults, undo, redo Again, don’t let user type much ! Provide interface shortcuts Shortcut keys especially for expert users Use real-world metaphors Telephone interface

The golden rules of UID Rule 3: Make the Interface Consistent Similar behavior of UI at different places Put buttons on similar places in multiple windows OK, Cancel, ...

The golden rules of UID Rule 3: Make the Interface Consistent Use consistent color scheme Colors of title bars, windows, .... (think of a theme)

The golden rules of UID Rule 3: Make the Interface Consistent Use consistent color scheme Colors of title bars, windows, .... (think of a theme)

The golden rules of UID Rule 3: Make the Interface Consistent MS Word users can easily use Excel, PowerPoint, ... Benefit Users can transfer knowledge/learning to a new program

Conclusion

Conclusion Know UID Controls Know their behavior Know how to place them (Layout) Know how to let them talk with user (Interaction) Reduce user’s memory load Be consistent

and one final important point ! Trying to fix up a UI at the end of development is like putting lipstick on a bulldog !!

References: Human Computer Interaction by Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale The essence of Human Computer Interaction by Christine Faulkner Designing Interfaces by Tidwell GUI Bloopers 2.0 by Jeff Johnson The elements of User Interface Design by Theo Mandel