Design Techniques for Multimedia

transcript

Overview

Structure Charts Definition Checklist Examples

Flowcharts Definition Checklist Examples

Wireframes Definition Checklist Examples

Storyboards Definition Checklist Examples

Structure Charts

A structure chart is diagram that describes the way content is organised within an application.

(Cunliffe D and Elliot G, 'Multimedia Computing', Crucial / Learning Matters, 2003.).

Checklist

screens (or Web pages) indicated by boxes

links indicated by lines

A structure chart consists of two basic elements

Example of a Structure Chart

Information for Staff Information for students

Halls Courses

HumanitiesSciences

Social

Plant Structure

Interactive, multimedia learning package, The University of Waikato, New Zealand

RFFlow Professional Flowcharting Package

RFF Electronics

RFFlow is a drawing tool that allows you to quickly and easily draw flowcharts, structure charts etc.

Flowcharts

A flowchart is a diagram that describes the way a user may interact with, and navigate through, an application.

(Cunliffe D and Elliot G, 'Multimedia Computing', Crucial / Learning Matters, 2003.)

Checklist

All major elements of the project are indicated;

The elements are clearly labeled;

Sequence of elements is clear and there are no gaps or dead ends;

Sequence of elements is logical from user's point of view;

Flowchart symbols are used correctly.

Ensure that:

Example of a Flowchart

Draft Flowchart

Example 2

Final Flowchart

http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/flow_example.html

Introduction Screen s1

Instructions Screen 1 s7

Instructions Screen 2 s8

New User?yesno

Flowchart with reference to the equivalent storyboard

In order to relate the flowchart to the storyboards or wireframes, each screen element has a reference to the equivalent storyboard (e.g. s1).

Flowcharting Software

WizFlow Flowcharter from Pacestar Software

Wireframes

A wireframe is representation of an application screen that describes the way content is organised and labelled, both within that screen and within the application.

In effect a wireframe is a generic storyboard.(Cunliffe D and Elliot G, 'Multimedia Computing', Crucial / Learning Matters, 2003.)

Sequencing of screens. Labelling of screens for orientation and

navigation purposes. Ordering of items on menus and menu

labels. Organisation of content on a screen,

often relating to page grids. Organisation of content into sections and

subsections.

Wireframes can be used in testing with users to investigate a number of design issues, including:

Example of a Wireframe

University of Abershire

Information for… Applicants Students Staff

Information about… Courses Facilities Location

What’s new…

Main feature…

search

Order prospectus - Contact us – Legal notice

Another Definition of a wireframe

Wireframes are an important design tool used in Web development. It is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site. A wireframe separates the graphic elements of a Web site from the functional elements in such a way that Web teams can easily explain how users will interact with the Web site.

http://www.webopedia.com/TERM/W/wireframe.html

Information Presentation

Text Goes HereGraphic

Case Study

Navigation

Software

Can create wireframes using software bought for storyboarding;

Can create web pages with links but no content;

Can use office products such as Powerpoint or Word.

Storyboard

A storyboard is representation of the visual appearance of an application screen that describes the way content is presented. It may also include references to non-visual media.

(Cunliffe D and Elliot G, 'Multimedia Computing', Crucial / Learning Matters, 2003.)

Checklist

Colours. Text content. Colours, sizes and types of font. Script of any narration. Audio. Animation. Video. Interactivity. Linking.

In addition to the sketch, there is a variety of supporting information:

Example

Project: Electricity Tutor Author: Helen JonesScreen name: MainReference: ET1Screen 1 of 17

Version: 2

Text:Title 16pt Arial, dark blue, centred. Arial 10pt, white on buttons

Video / animation:Lighting bolt strikes and bulb illuminates

Audio:Fanfare (fanfare3.wav), followed by narration, “Welcome to the world of electricity”Colours:Background pale blue, buttons dark blue

Interactivity:none

Links from: ET2, ET3, ET6Links to: Action:ET2 click on ‘next’ buttonET2 if no user action in 20 secondsET6 click on ‘help’ button

A storyboard is essentially a rough sketch of a screen layout, or a sequence of sketches illustrating a dynamic element.

Example

The upper part shows a layout of the screen.

The two middle boxes provide space to describe the interaction of buttons and text fields.

Comments are added to detail the colour scheme, text attributes, audio, and details for the programmer.

Example

In this example, you see two screen representations, one for the computer and one for a second screen that would detail a video.

Again, there is space to define the interactive features, and the nature of additional media.

Storyboard and Final Screen

From the rough outline to the finished screen.

Young’s Double Slit Experiment

Sample storyboard page showing Young's Double Slit experiment. Note the instructions to the developer (in red) and the hyperlinks to "back-up" pages.

(Storyboard author: Claire McIntyre).

http://www.matter.org.uk/storyboard/storyboard_guide.htm

Storyboarding Software

StoryBoard Quick by PowerProduction Software

Powerpoint

Microsoft Powerpoint is a presentation graphics program.

Summary

Structure Charts Definition Checklist Examples

Flowcharts Definition Checklist Examples

Wireframes Definition Checklist Examples

Storyboards Definition Checklist Examples

Design Techniques for Multimedia

Documents