User Interface Design: Methods of Interaction

1
User Interface Design Methods of Interaction

2
Accepted design principles

• Interface design needs to consider the following
  issues
• 1. Visual clarity
• 2. Consistency
• 3. Compatibility
• 4. Informative feedback
• 5. Explicitness
• 6. Appropriate functionality
• 7. Flexibility control
• 8. Error prevention correction
• 9. User guidance support
• 10. Consideration of system usability problems

3

• 1. visual clarity
• Aids in reading and assimilating information
• 2. Consistency
• the system should look and behave consistently
• colour usage,information location
• cursor positioning (text boxes),dialogue styles
  (buttons, check boxes, radio buttons)
• information formats (string or integer entry)
• 3. Compatibility
• adhering to user expectations of the real world
  and systems
• colour (red alarm, stop)
• interaction compatibility (mouse and scroll-bars)

4

• 4. Informative feedback
• precise messages should be given
• provision of progress
• provision of error messages that are meaningful
• indicative progress prompts
• appropriate system responses (i.e. Message boxes
  with suitable content and context)
• 5. Explicitness
• is there an evident structure to the system
• appropriate screen sequences and metaphors
• 6. Appropriate functionality
• are devices well chosen
• are task functions suitably designed

5

• 7. Flexibility and control
• is the interface flexible in operation and
  control
• navigation operators
• selection of information display rate
• undo facility
• short-cuts ()
• can the interface be tailored
• 8. Error prevention and detection
• does the system validate inputs inform of error
  detection
• error handling (validate user inputs)
• providing error messages for errors (message
  boxes)
• making errors easy to correct
• avoiding problems by providing an example

6

• 9. User guidance and support
• good simple design
• online or available document support
• informative, easy to use system design
• good guidance throughout
• good help facilities (typically a screen or so
• 10. System usability problems
• working out the system
• simple structuring
• Users know what to do next

7
Practical Application

• Forms
• Windows
• Use of natuaral language commands and input
• Direct manipulation
• Metaphors
• Icons
• Menus

8
Form-filling

• Suitable for
• - all user types
• Advantages
• - quick and easy to create
• - easy to use and learn
• Disadvantages
• - unsophisticated
• - primarily suitable for data entry and
  retrieval

9
Form-filling example
10
Form-filling

• VB implementation
• Tab index
• Keypress Event to jump to next textbox
• Use of conversion and standard error detection

11
Direct Manipulation

• Essential features
• Explicit actions
• - user points at, and manipulates objects
• directly on screen
• Immediate feedback
• - e.g. selected icon is highlighted, the
  effect is
• immediate
• Incremental effects
• - e.g. icon dragged across display moves
• continuously

12
Direct Manipulation

• Offers easily reversible actions
• Provides gradual learning
• Layered functionality
• Pre-validation
• only valid interactions have an effect
• invalid operations are ignored
• examples
• video adventure games, can only go where coded
• word processors only coded functions
• paint packages only coded functions

• In VB can characterised by using
• Scroll bars
• Check Boxes
• Windowing
• List Boxes
• Option Buttons
• Drag and Drop

13
Direct Manipulation

• Disadvantages
• - limitations of metaphor (can be fatal to
  interface)
• - ambiguity of graphical representation
• - use of screen space
• - difficult to design and program
  (exhaustiveness)
• - system facilities not explicit (all
  functionality is hidden)
• - cognitive complexity of holistic view of the
  system
• Design guidelines
• - follow general screen design guidelines
• e.g. avoid screen clutter, etc. (refer to
  lecture 9)
• - test metaphor limitations
• - test icon and visual design representations

14

• Menus All interaction choices available as
  on-screen prompts
• Types
• Pull-down (up)
• Cascading
• On-screen
• Type selection

Menu 1. Weather 2. News 3. Sport 4.
LifeStyle Press (1), (2), (3) or (4) to enter
your choice
15
Menus

• Suitable for
• - novice users, to access system options
• Advantages
• - easy to use (reduces memorization)
• - easy to learn
• - structures the users decisions
• - easy to program
• disadvantages
• - limited choices per menu
• - slow to use in large systems
• - full screen interference
• - slow response times

16
Menus

• Design guidelines
• - group logically related options
• - menu option order
• - operational order or frequency of use
• - limit options to 7 per menu approximately,
  and
• avoid excessively deep hierarchies
• - network structuring may save search time
  but
• will confuse cognitive model
• - avoid where have I been?, where am I now?
• - provide escape routes
• - provide short-cuts (function keys)
• - prevent serious selection errors

17
Metaphor - examples
The Desktop Metaphor
Virtual environment metaphor
18
Icons

• simple visual menus
• Suitable for novice users, to access system
  options
• advantages
• - very easy to learn as visual
• - easy to use
• - language independent (to a degree)
• - provides holistic view of system

19
Icons

• Disadvantages
• uses a lot of screen space
• need text back up
• need good icon builder software to build
  effective icons
• abstract concepts difficult to design (show
  directory)
• Design guidelines
• must effectively map from users cognitive world
  to the world of the system
• must be visually distinct from each other
  (functions families)

20
Icons

• Design structure
• - Objects
• - model principle visual features
• - Actions
• - add image to represent dynamic
• situations
• Best empirical results from concrete object and
  abstract symbol,
• - e.g. go to bottom of a document

21
Icons

• very abstract computing commands may be difficult
  to represent, e.g. show directory
• avoid visual complexity (increases search time)
• in time more experienced users rely on positional
  constancy of icon, rather than the icon design
  itself

22
Recap

• Interface design is the formal approach to one of
  the three main subject areas we are focusing on
  in this course
• Interface considerations
• Input / Output
• Data Storage
• variables files and structures
• Process control
• Sequence
• Selection
• Iteration