1. CIS 376 Bruce R. Maxim UM-Dearborn
User Interface Styles
CIS 376
Bruce R. Maxim
UM-Dearborn

2. User Interface Styles Direct manipulation
GUI (graphical user interface)
WIMP (windows, icons, mouse, pull-down menus)
Menus
Forms
Command language

3. Direct Manipulation Interface Characteristics
Screen objects resemble physical objects
Objects arranged in 2-D space
Trades perceptual motor operations for linguistic operations
Use of recognition in place of recall
Expensive to implement

4. Direct Manipulation Interface Examples
Display editors and word processors
Spreadsheet programs
Spatial and geographic databases
Video games and educational simulations
CAD and paint type applications
Hypertext
Office automation software
Virtual reality

5. Direct Manipulation Interfaces Allow
Novices to learn basic fundamentals quickly
Experts to carry out new tasks
Knowledgeable intermittent users to retain operational concepts
Error messages are rarely needed
Users can assess progress to goals and make changes instantly
Users experience less anxiety because systems is understood and actions are reversible
Users gain confidence and mastery through their sense of control over the system

6. Direct Manipulation Concerns
Increased system resources
Cumbersome actions
Weak macro techniques
History tracing is hard to log
Visually impaired users at risk

7. GOMS Model for Direct Manipulation Interfaces
Basic goal - minimize learning using a metaphoric device
Basic method - find relevant object on screen and manipulate
Step 1. Search screen for an object to operate on
Step 2. Select it for manipulation
Step 3. Move object on screen to destination

8. For direct manipulation interfaces you must ensure:
Visual search (steps 1 and 3) works easily to find objects and their destinations
Steps 2 and 3 must be fast consistent and easy to learn
There must be a direct manipulation metaphor or analogy that is familiar to the user (e.g. desktop)

9. Problems with Direct Manipulation Interfaces
Visual representations are more spread out than simple text - causing "off page" problems
Users must learn meaning of components (e.g. icons) which are meaningful to designer and not user
Visual representation may be misleading
Touch typists do better with a keyboard than with a mouse

10. The debate concerning text versus icons is an emotional one.
The usefulness of icons depends on how quickly user can figure out their meanings.

11. Icon Design Guidelines - part 1
Represent object/action in recognizable form
Limit number of icons
Make icon stand out from background
Be careful when using 3-D icons
Selected icons must be easily distinguished from unselected icons

12. Icon Design Guidelines - part 2
Icons unique from one another
Ensure harmony with family of icons
Design animation movement
Add detailed information if possible
Explore use of icon combinations to create new objects or operations

13. Five Challenges of Direct Manipulation Programming
Sufficient computational generality
Access to appropriate data
Ease in programming and editing
Simplicity in subprogram invocation and assignment of arguments
Low risk

14. Growth Areas for Direct Manipulation Interfaces
Home automation
Remote direct manipulation
Virtual reality

15. Components for a Successful Virtual Reality Application
Visual display
Head positioning and sensing
Hand positioning and sensing
Force feedback
Sound input/output
Other sensation
Cooperative and competitive VR requires networking

16. Menu Architectures Single Linear sequence Tree Acyclic network

17. Menu Screen Display Types
Text - single key
Text - pointing device
Icon - pointing device
Radio buttons
Check boxes
Pull-down or pop-up
Permanent (e.g. command bars)

18. GOMS Model for Menu User Task
Step1. Search screen for item matching part of task
description.
Step2. if match then
choose menu item
else
go to appropriate place in menu structure
Step3. if task accomplished then
return with goal accomplished
Step4. go to Step1.

19. For menu interfaces you must ensure:
Search and matching (Step1) is easy
Items must be recognizable in terms of task goals
Menu structure must reflect task structure
Minimum learning required for navigation knowledge required (Step2)
Choosing items must be consistent and easy
Dealing with failure to match or other error must be consistent and easy
Must have only one good navigation method

20. Menu Architectural Guidelines
Breadth preferred over depth for submenus
Provide means to move back up menu hierarchy (esp. to top level)

21. Menu Item Design Guidelines
Command set small enough to fit within single menu
User always have access to all possible menu items without having to refer to a manual
Logical presentation sequences (time, numeric, alphabetic, physical properties, function/task organization, frequency of use, most important first)
Icons harder to recognize than words for abstract concepts
Avoid screen clutter
Don’t assume user will notice subtle cues (e.g. color or border changes)

22. Making Selection Easy
Provide command key bypasses for frequent commands
Ensure consistent selection and navigation methods throughout
Be aware of Fitt's law considerations for pointing devices

23. Fitt’s Law
Formal statement of relationship between the size of a target and distance that user must move pointing device to hit the target
big targets are hit more quickly than small targets
users move quickly at first and slow down as they home in on the target

24. Supporting Learning in Menu Interfaces
Don’t automatically rearrange menus (e.g. gray out inactive items instead)
User mnemonic identifiers
Allow BLT type ahead (single key strokes as well as use of pointing devices)

25. Menu Interface Design Guidelines - part 1
Use task semantics to organize menu
Prefer breadth over depth
Show position using graphic, numbers, titles, etc.
Use menu titles in trees
Use meaningful item grouping
Use meaningful item sequencing

26. Menu Interface Design Guidelines - part 2
Make items brief, begin with keyword
Use consistent grammar, layout, terminology
Allow type ahead, jump ahead, or shortcuts
Allow jumps to previous or main menus
Consider on-line help and novel selection or display devices

27. GOMS Model for Form Fill-in User Task
Step1. Search screen for next field to be filled in
Step2. Move cursor to next field
Step3. Figure out what to type and type it in
Step4. if all fields correct then
indicate you are finished
else
move cursor to incorrect field and change entry
Step5. go to Step1

28. For form fill-in interfaces you must ensure that:
Search (Step1) and thinking (Step3) are easy
Cursor movement (Step2) and finished signal (Step4) are consistent and easy to learn
Correction methods (Step4) are simple and easy to learn

29. Form Fill-in Design Guidelines
Preserve similarities with existing paper forms
Do not force entry order
Provide on-screen navigation instructions
Use good graphic layout
Describe special entry formats
Apply validity checks and provide clear feedback on errors

30. GOMS Model for Command Language Interface User Task
Step1. Think of and enter command verb
Step2. Think of and enter next argument
Step3. if more arguments then
go to Step2
Step4. if command is incorrect then
correct the command
Step5. Signal computer to process the command.
Step6. go to Step1

31. What makes a command language easy to learn and use?
Easy command synthesis
User can think up command by analogy from previously learned commands
Commands conform to simple rules rather than lots of unique special cases

32. Command Language Design Guidelines
Make command terms easy to remember
Provide easy command synthesis method and abbreviation strategy
Provide simple, consistent command structure
Commands should be right grain size
Parsimony (no more commands than really needed)
Studies show a few commands are used a lot by most users
Provide for command reuse (replay, re-entry, macros)
Avoid unnecessary distinctions among commands

33. Command Language Organization Strategies
Simple command set
Commands plus arguments
Commands plus options and arguments
Hierarchical command structure (command action, object argument, destination)

34. Command Language Abbreviation Strategies
Simple truncation
Drop vowel and use simple truncation
First and last letters
Standard abbreviations from other contexts
First letter of each word or phrase
Phonics (e.g. XQT for execution)
Cross product languages {verbs} x {objects}

35. Cross Product Languages
{verbs} x {objects}
{copy, delete, rename} x {files, directories}
cf, df, rf, cd, dd, rd

36. Dialog Boxes
Combinations of all four interface styles (menu, form fill-in, direct manipulation, command line)
User task model would also be a composite model

37. Dialog Box Design Guidelines
Meaningful title
Top-left to bottom right sequencing
Proper clustering and emphasis
Consistent language
Consistent terminology, fonts, capitalization, justification
Standard buttons
Error prevention by direct manipulation

38. Dialog Box External Relationship Design Guidelines
Smooth appearance and disappearance
Distinguishable boundaries
Sized to reduce overlap problems
Displayed close to appropriate screen objects
No overlap of required items
Easy to make disappear
Clear directions to cancel or complete operations