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

2. GUI Bloopers

3. UID Controls

4. UID Controls

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

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

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

8. 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

9. GUI Control Bloopers
Confusing checkboxes
and radio buttons

10. 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

11. GUI Control Bloopers Confusing checkboxes and radio buttons

12. 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

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

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

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

16. 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

17. 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

18. 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

19. GUI Control Bloopers Too many Tabs

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

21. 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

22. 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

23. 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

24. 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” !

25. 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”

26. 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 ...

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

28. 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?

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

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

31. 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

32. 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

33. 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.

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

35. 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 !

36. 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

37. 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

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

39. 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.

40. 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

41. 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

42. UID Controls: Example 4
Dynamic Menus

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

44. 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

45. 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

46. The Golden Rules of
UI Design

47. 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.”

48. 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 ...)

49. 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)

50. 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

51. 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, ...

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

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

54. 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

55. Conclusion

56. 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

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

58. 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