Multimedia Creation process: User Interface Design

1
Multimedia Creation processUser Interface Design

• Dr H Batatia
• h.batatia_at_tees.ac.uk

2
Introduction

• Design concerned with
• architecture
• structure of the information into various modules
  (parts)
• services provides and their functionality
• navigation
• links between modules
• links between nodes in each module
• aids for navigation
• interface
• How the application interacts with the user

3
What is an Interface?

• A contact surface between two systems
• Fixes the nature of interaction between the
  systems
• Two aspects
• Input what devices are used to enter information
• Output how the user perceives the information

4
Screen Interface Design

• Decides
• the colours to use
• the position of objects on the screen
• the type and quantity of media to use
• the use of dialogs
• the use of menus / shortcuts
• the use of audio and visual effects

5
Criteria of a useful screen design

• Consistency of screen architecture
• Easy accessibility of objects
• Usefulness of graphics
• Organisation or non Clutter
• Saturation
• Non clashing colours
• Judicious audio support

6
Contd..

• Consistency of icons for buttons and links
• Clarity and meaningfulness of icons
• Non ambiguity of button labels and menus
• Familiarity of metaphors
• Possibility to recover from mistakes

7
Consistency of screen architecture

• Same location of object throughout the
  application
• Possible variation of content location from one
  module or part to the other
• This consistency saves precious time to the user

8
Accessibility of objects

• Progressive information should be from left to
  right
• A next button should be on the right
• Title should be at the top
• Captions at the bottom of graphics
• Grouping related objects together instead of
  scattering them

9
Useful graphics

• Most multimedia applications separate clearly
  functions (e.g., tutorial, exercise, reference)
• User should differentiate clearly the functions
• Use graphic background, screen labels, etc. to
  make transition between functions apparent.
• Use contrast (big/small, dark/clear) to attract
  attention
• No repeated useless animations

10
Clutter

• Crowded screens with object reduce user attention
  and require more effort and time from the user to
  locate and use objects
• This reduce dramatically effectiveness
• Dilemma of need to provide flexibility and
  choices for the user with clutter
• Use the visibility proprieties of objects to
  control cluttering the screen

11
Contd.

• Use hidden buttons, pop-up menus
• Group objects by categories

12
Screen saturation

• A screen should always contain empty spaces
• Avoid long text
• No scrolling at all
• If you want to display many things, divide
  judiciously the information into successive
  screen
• Focus only on a narrow aspect in 1 screen

13
Use of colours

• Colours cannot be mixed in any manner
• Some colours are not compatible
• Never use clashing colours together
• Keep consistent the use of colours
• Reduce the number of colour used in 1 screen and
  in the whole application

14
Audio support

• Audio support should only be used where needed
• Avoid using audio feedback when the user clicks
  on buttons

15
Use of icons and labels

• Links (or buttons) that have related functions
  should have similar visual appearance
• If a next button uses an arrow other navigation
  buttons should all have arrows
• Icons used must have some symbolic meaning
  pertaining to the function of the button
• Avoid ambiguity if you use text labels for buttons

16
Metaphors

• Metaphors should be relevant to the application
  topic
• E.g., If your information is time dependent, use
  timeline
• They should be familiar to the users
• Taken from their every day life

17
Process of designing an Interface

• Consider the main function performed by the
  application
• Select an appropriate screen architecture to
  accommodate these functions
• Create a unique visual background for every
  function
• Create categories of li,ks buttons and their
  visual appearances

18
Contd.

• Design menus and input fields and forms
• Design keyboard shortcuts to all buttons, links
  and inputs
• Select a strategy to display information that
  minimises clutter
• Design audio and visual effects used to
  communicate transitions
• test the interface design

19
Determining main functions

• Two methods
• event driven
• structure driven
• Event driven functions are based on major events
  that occur throughout the application
• e.g., generality, examples, practice, test in an
  instructional application
• e.g., presentation, product selection, billing,
  feedback

20
Contd.

• Structure driven functions are