G050 Lecture 04

IMMP Design Methodology

Mr C JohnstonICT Teacher

www.computechedu.co.uk

Session Objectives

Know the methodology behind the design of Interactive Multimedia Products,

Commence design documentation for your product.

Design Overview

Good interactive multimedia products of any nature need to be designed carefully,

Good design gives the best opportunity for the product to be delivered on time, meeting the user requirements and functional,

There are a number of different tools and techniques which can be used to ensure good design.

Design Tools and Techniques

1. A design specification including a clear statement of purpose, user requirements and technical requirements,

2. Initial ideas for your product including the elimination of inappropriate or technically impossible content,

3. Storyboards for each scene including annotation describing the content,

4. Flowcharts showing how interactivities work 5. Time lines showing any element timings on the scene, 6. Structures diagrams showing how scenes link together, 7. Task list / Action Plan / Gantt Chart 8. Design of master page / house style if not already overt.

Design Specification

The design specification is a written document which sets out what is going to be made, and the criteria for its success,

Your design specification will need to include: A description of the product you intend to produce

What is the aim of the product, who will use the product (the audience), why is it required?

Describe the user requirements A detailed list of what the product must be able to do when it is

finished, Technical requirements

Hardware and software required to develop the solution Hardware and software (especially input and output devices) required

to run the product once it has finished

Initial Ideas

Initial ideas are a brain storm of ideas – (content, features, interactivities) which could feature on each scene,

You could produce a mind map showing your thoughts – software for this is included on my website,

To get higher marks for you design section you need to add some rationale to the ideas – recommending some ideas and discounting others for valid reasons.

Mind map for a website homepage

This is not the best idea as I don’t know anything about mortgages and trying to code a mortgage calculator without knowing anything may lead to me misleading visitors to my website and giving them incorrect mortgage payments.

Storyboard - Scene Designs

Each scene within your interactive multimedia product will need designing,

Using a storyboard with annotation is a suitable way of showing your ideas,

Storyboards at for band 1/2 level will have sufficient detail to be implemented by somebody else,

Storyboards for band 3 will clearly show all content and note why particular images, fonts, music colours have been chosen, and a possible source for them.

Example Storyboard Design

Storyboard - Annotation

Annotation will: Describe the scene – give an overview of what is going on Identify sounds including – sound effects, backing music,

narration Identify images – if not clear from design be specific as can

e.g. Black and White Labrador - NOT JUST - picture of a dog Colour scheme??? Should be clear from the design really Identify font face, size, style – use font list to find exciting

faces Identify video – brief description of what video will be about Identify animation – show motion paths, scene transitions,

element transitions, tweens, GIFs Give a potential source for assets

Tween AnimationThe Tween object allows sophisticated animations to be created very easily and even includes shape tween animation. Simply create the state of the object at the beginning and the end, and/or at key points along the way.Path AnimationAny object can be animated along a custom pathQuickAnimAnd to get you started quickly we've even provided sets of preset animation actions which you can simply select from a list and apply to your object. Including Pulse, Acrobat, Spin Dry, Penguin Waddle, Kaboom and many more.TransitionsThe simplest animations are transitions which occur when the object appears on screen or when it disappears or is hidden by a Hide action. There are a wide range from simple fades and scrolls to 3D flips, page curls and kaleidoscope effects. All you do is pick the category and choose a transition and then decide how long it should take.Incorporate Existing AnimationsYou can also include objects which are already animated such as Flash SWF files and videos and can even animate those again using the Opus animation facilities. So, for example, you could have a SWF of a flapping bird which you then animated along a path using Opus path animation tools.

OPUS Types of Animation

FadesFrom a simple fade to a diagonal wipe, fades are probably the most commonly-used transitions alongside Scroll. Which is why we've also combined the two.

Reveals & BlindsAnother popular transitions style is the reveal and again we've also combined this with fade. Reveal your object from left, right, up, down or split into blinds.

Scroll and Scroll PageScroll Page simply brings the object on or off the screen in the direction chosen whilst Scroll will do the same but restricts the scroll to the frame which contains the object.

Shapes and Shape ExplosionsUse circle, diamond, triangle and star shapes to uncover your object either as single shapes or in a variety of combinations including grids and explosions.

ZoomsZoom your object in from a variety of directions - including centre out.

SpecialFor Windows publications we also have a wide range of special transitions such as Ghost and are also provided with directional variants.

Text AnimationsOpus also includes a range of animations to bring text onto the screen. The animation can be applied to each letter, to each word or to whole lines. The options include many of those provided in transitions but with several special additions.

OPUS Types of Transition

Time Lines

Time lines are used in your planning to show the order in which elements will appear on the screen,

Write a time scale down and then at different times place blocks on the diagram to represent different elements.

0 1 2 3 4 5 6 7 8 9 10Scene Background

Background Music

Main scene text

Main scene speech

Image 1

Image 2

Image 3

Next Button

You could even add the transition effect to help

with your annotation

0 1 2 3 4 5 6 7 8 9 10Scene Background

Background Music

Main scene text – typewriter transition

Main scene speech

Image 1 - swirl

Image 2 - swirl

Image 3 - swirl

Next Button - appear

Time Lines Rules

Only include on your time line elements which automatically appear,

Any elements which appear as a result of the user doing something (pop ups, rollovers etc.) are controlled by a flow chart.

Flow Charts

Flow charts are used to show how interactive elements on your product,

What happens when you click a mouse, an object is dropped They show the coding which will be incorporated

within the product, Flow charts are constructed using symbols to

represent different instructions.

START / STOP

DECISION

INSTRUCTION

You can draw flow charts either manually or using the freely available yEd Graph Editor Software:http://www.yworks.com/en/products_yed_download.html

Flow Charts Examples

More Flow Charts

Flow Chart Exercises Draw a flow chart for each of these situations…

Will play a sound continuously when next button is clicked, Changes sound volume down when a button is clicked and up if double

clicked, When a word is dropped in the correct place on the grid the word

vanishes, 1 is added to the score, positive sound played and letters in word search grid are highlighted. If its not in the correct place it will be returned to where it came from,

When an answer to a multiple choice question is selected all other options are locked…. If correct score added and positive sound if incorrect then bad sound,

When a draggable item of rubbish is over a bin, the lid opens. If the item is dropped the item of rubbish is hidden the lid animates to look like chewing, lid opens again and a burp sound is made….. Before the lid shuts again…..

QUESTION #1: Draw a flow chart which will - Play a sound continuously when next button is clicked

QUESTION #2: Draw a flow chart which will - Change sound volume down by 10% when a button is clicked and up by 10% if double clicked

Are these two answers the same?NO- if you check single click first, double click will never be detected

because as soon as the mouse button is clicked once the actions for single click will run!!!!

QUESTION #3: Draw a flow chart which will - When a word is dropped in the correct place on the grid the word vanishes, 1 is added to the score, positive sound played and letters in word search grid are highlighted. If its not in the correct place it will be returned to where it came from

How can we modify this so that a popup displays after 10 attempts have been made?

10 attempts means 10 goes – doesn’t matter if they are right or wrong

NO.. DO IT PROPERLY – Need a variable to count the number of goes

QUESTION #4: Draw a flow chart which will - When an answer to a multiple choice question is selected all other options are locked…. If correct score added and positive sound if incorrect then bad sound,

Is this the best way of getting the popup to show after 6 questions answered?

NO.. DO IT PROPERLY – Need a proper decision which compares a variable which counts the number of questions answered

How can we adjust this flowchart so that a good popup appears when score is above 4 otherwise the standard popup appears??

QUESTION #5: Draw a flow chart which will - When a draggable item of rubbish is over a bin, the lid opens. If the item is dropped the item of rubbish is hidden the lid animates to look like chewing, lid opens again and a burp sound is made….. Before the lid shuts again…..

Example Storyboard Design With flowchart and timeline

Hmmmm not the best example, there's more on my website

Structure Diagrams Structure diagrams show how the different scenes link

together – they show the different navigation paths through the product,

Interactive multimedia products can have three different types of pathways:

Mesh – each scene links to every other

Index

Scene 2

Scene 3Scene 4l

Scene 1lHierarchical – like an organisation structure

Index

Scene 1

Scene 2l

Scene 3

Scene 4l

Linear - one scene after another

Index Scene 1 Scene 2 Scene 3 Scene 4

Task list/Action Plan/Gantt Chart

This involves producing a list of tasks which need to be completed in order to complete the product,

Timings will be assigned to each task so you have an idea of what needs to be completed when,

You may wish to present this evidence as a Gantt chart made in excel.

Producing Task Bi Need multiple designs to get any marks – more detail

the better – remember content this was missed by many centres in Jun2010 session,

Plans should be different designs for the same product, Write a script that covers the main content of each

product, Create two different plans for the product - each plan

needs to include: Suitable screen layouts including time lines / flow charts showing

actions and details of navigation Structure diagram allowing alternative pathways Task list / action plan showing the development of the product (Gantt

chart) Don’t forget to plan interactive elements, Use the examples on my website to help you -

here is the design template

Task Bi Annotation

Annotation in this unit simply requires you to explain what items are and how they work – Not like G053

It is also useful to label your diagrams with a possible source,

You may have to draw expanded diagrams to show how animations work,

Additional notes sheets can be added – The next slides show plans for my Rough Horrid

Henry product.

Moderation Feedback 2012

“For task b(i) some candidates produced plans for completely different products; the requirement is to produce different designs for the same product. Content must be considered as part of the plan to access higher marks; some plans seen in this session contained very little indication of content. Some candidates that had been awarded mark band 3 had produced detailed designs, as required.”

Principal Moderator - OCR Report to Centres June 2012 ©OCR

Producing Task Bii

Task Bii requires you to choose which of the designs for your product you will use,

For band 3 you need to produce a critical analysis of the designs not just a description of them,

Good and bad points of each design need to be clearly identified,

A reasoned argument then needs to be presented explaining why the final design has been chosen and how it met the needs of the client.

Moderation Feedback 2012

“Task b(ii) required a critical analysis of the designs in order to access higher mark points, not just a description of the designs. Good and bad points of each design need to be identified and a reasoned argument presented to explain why the final design was chosen by the candidate and how it met the needs of the client. Again, an analysis that was not critical in nature restricted marks awarded to a maximum of mark band 2.”

Principal Moderator - OCR Report to Centres June 2012 ©OCR