Upload
yousif26
View
317
Download
2
Embed Size (px)
Citation preview
Design Techniques for Multimedia
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
Main
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
End
1
Start
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
image
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
Recommended Reading
Studio 1151 from Maricopa Community College
http://www.mcli.dist.maricopa.edu/authoring/studio/index.html Multimedia : making it work, Tay
Vaughan 005.75/VAU
Design for multimedia learning, Tom Boyle 371.334/BOY
Multimedia Computing, Daniel Cunliffe, Geoff Elliott, Crucial Publishing, in press.
Web Sites
Storyboarding Multimediahttp://ourworld.compuserve.com/homepages/adrian_mallon_multimedia/story.htm
Adrian Mallon, 1995 Museums Documentation Associationhttp://www.mda.org.uk/multi.htm (Multimedia Fact sheet)