Introduction to Multimedia Computing and Internet Technology

1
Introduction to Multimedia Computing and Internet
Technology

• Design
• Storyboarding

2
Aim of this lecture

• To explore the design of multimedia systems
• Aim and Objectives
• Storyboarding an introduction

3
Steps in the design process

• Subject choice
• Setting of Aim and Objectives
• Scoping
• Decisions on Structure and Content
• Use of Storyboarding for screen design
• Use of Navigation Maps, State Transition Diagrams
  and Timelines to show navigation and intra-screen
  functionality

4
Subject

• Should lend itself to multimedia
• Should have different facets to allow
  non-linear structure and navigation

5
Aim

• Examples could be
• Business oriented to promote the subject matter
• Exploratory to explore the subject area from a
  particular viewpoint
• Educational to educate the user
• The package has two components
• Need to understand how each component will
  contribute to the overall aim.

6
Example

• Aim
• To promote an expensive hotel in the swiss alps
  which caters for people with an allergy to nuts.

7
Aim split for Web and CD

• The web site will be used to generate interest
  and collect potential customer details for follow
  up.
• The CD will be used as an electronic advertising
  brochure.

8
Objectives

• How will the system achieve its aim?
• Need to establish a list of objectives for each
  component
• Each objective should contribute to the aim

9
Web Site Objectives

• The web site will provide
• WHAT - Some marketing information about the hotel
  and location eg. Panorama, graphics, customer
  comments (good ones), links to sites giving
  details about activities in the location
• WHY To capture interest
• WHAT - a form for address details to which the CD
  can be sent.
• WHY To capture potential customer details
• WHAT - Links to related sites for nut allergy
  suffers
• WHY To begin to establish a user community and
  to encourage potential customers to visit the
  site.
• WHAT Current special offers and a HOTLINE
  booking number
• WHY To generate immediate sales

10
CD Objectives

• The CD will provide
• WHAT - Marketing information about the hotel and
  location eg. Video, high quality graphics, room
  layouts, location maps
• WHY To capture interest
• WHAT - Link to the web page for current special
  offers
• WHY To generate immediate sales

11
Requirements

• Scope
• Number of screens 10
• Number of web pages 5
• Demonstration time 15 minutes
• Content in both environments
• Video or panorama
• Graphical image
• Animation
• Sound

12
Content for CD

• Good mix of media
• Should not age too rapidly
• People
• Events
• Statistics
• Will they be as significant in relation to the
  subject in 3 days, 3 weeks, 3 months, 3 years?
• Should provide variety

13
Content for Web

• Has a stability period which reflects the update
  frequency of the site.
• Bear in mind download times of media
• Is the media necessary to make the site
  interesting/useful

14
Structure

• Consideration for each environment
• Linear
• Hierarchic
• Networked

15
Storyboards
16
What is a Storyboard?

• Just the screen layout
• or
• a graphical depiction of the outward appearance
  of the intended system without the accompanying
  system functionality
• Dix et al - HCI
• Used widely in the film industry

17
Storyboarding - prototyping tool

• Prototyping tools provide a means of quickly
  developing the front end of an application in
  order to seek user approval for it
• A storyboard is a form of pre-prototyping it
  allows the designer to provide the user with a
  visual image of what the front end will look like
  in order to seek user approval prior to prototype
  development.

18
How are storyboards used?

• Storyboards can give an idea of the look and feel
  of an application
• A good method is to start with a very basic
  storyboard and gradually add features gaining
  approval at each stage.
• The success of this plan would depend on the
  extent of the co-operation of the user

19
Features shown by storyboards

• Screen Layout
• Colours
• Features which provide Impact
• Navigational features
• Features which provide continuity
• Multimedia Content

20
1. Screen Layout

• The layout of each screen should be defined with
  boxes
• Each box should be annotated to give the user an
  idea of what the contents will be..eg. text,
  graphics etc.

21
Title bar
text
Photograph
Navigation Bar
22
2. Colour

• Which colours are used
• Where
• Why - Colours can have a meaning
• Red - danger / warmth
• Green normality
• Blue cold

23
3. Features which provide Impact

• Special Effects
• Which effects
• Why
• Variation on a theme
• Light and shade
• Dull/bright
• Textures
• Use of Metaphor

24
4. Navigational features

• Type
• Linear/non-linear
• Hot word/area, Menu button, arrow
• Positioning on screens
• Icons/wording to be used
• Colour
• Size

25
5. Features which provide continuity

• Which features
• Running headers
• Colour
• Font
• Screen Layout
• Graphics
• Sound
• How do they provide continuity??

26
6. Multimedia Content

• What is included
• Multimedia type and description
• Where it is included
• positioning
• How it is included
• Any special style/effects eg. rotating, blinking
• When
• Always there
• Available on selection
• Background
• Why??

27
Advantages of storyboards

• Can be paper based
• Application independent
• little or no skills required !
• Apart from the ability to think
• and design
• etc.

28
Disadvantages

• Does not provide a realistic front end (paper
  based)
• Takes little account of what might be possible.
• Does not provide functionality

29
What is required

• One plain A4 page per screen and web page
• Half the page for the storyboard.
• Half the page for supporting text.