User Interface Styles

CIS 375
Bruce R. Maxim
UM-Dearborn

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

2
 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
3
 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
4
 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
5
Direct Manipulation Concerns
• Increased system resources
• Cumbersome actions
• Weak macro techniques
• History tracing is hard to log
• Visually impaired users at risk

6
 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
7
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)

8
 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

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

10
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

11
 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

12
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

13
Growth Areas for Direct Manipulation
Interfaces

• Home automation
• Remote direct manipulation
• Virtual reality

14
 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
15
 Menu Architectures
• Single
• Linear sequence
• Tree
• Acyclic network
• Cyclic network

16
 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)
17
 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.
18
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
19
Menu Architectural Guidelines

• Breadth preferred over depth for

submenus
• Provide means to move back up menu
hierarchy (esp. to top level)

20
 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)
21
 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

22
 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
23
 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)
24
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

25
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

26
 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

27
 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

28
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

29
 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

30
 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

31
 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
32
 Command Language Organization
Strategies
• Simple command set
• Commands plus arguments
• Commands plus options and arguments
• Hierarchical command structure
command action, object argument, destination

33
 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 work or phrase
• Phonics (e.g. XQT for execution)
• Cross product languages {verbs} x {objects}

34
 Cross Product Languages
{verbs} x {objects}

{copy, delete, rename} x {files, directories}

cf, df, rf, cd, dd, rd

35
 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

36
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
37
 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
38