User Interface Styles

1
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
• Cyclic 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
• Dont 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
Fitts 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

• Dont 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 work 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