Starter

Objectives:

• To examine the ways of making a product interactive

• To start designing the interactive features of your multimedia product.

Introduction

• How will you make your multimedia product interactive?

• The product needs to be run using standard browser software– It will need to behave like a website

(even though it’s a multimedia product!!)– You will be using Dreamweaver, a web authoring

package

What methods are available?

Buttons

Image maps & hot spots

Text Links

Rollovers

Menus

User response

INTERACTIVITY

Buttons

• Natural & intuitive• Children know that

buttons are to be pressed

• Wide range of designs• Can be grouped together• Can ne arranged in a

pattern

Buttons... 2

• Dreamweaver provides an array of buttons...

...and these are also animated with sound effects.

Buttons...

• You may also like to design some of your own that are more suitable for the target user...

Hot Spots

• Hot Spots– Areas defined in a graphic or picture, that contain

a hyperlink.– They do not show up in browsers – you can only

tell they are there when your mouse pointer changes as you move over it

– http://www.platform-end.co.uk/html/musicians.html

Image Maps

• Similar to a hot spot• A graphic with a number of hotspots• They present the user with a range of choices• They are not always obvious and force the

user to explore the webpage• http://www.image-maps.com/united_states.php?state=Florida

Text Link

• Simply a piece of text (a sentence or a word) that forms a hyperlink to another part of the product

• Most people are familiar with this concept• Try to use a word or sentence that describes

what the link does... Like this....• Take me to the next page

Rollovers

• A rollover image is made up of two images.• The top image is displayed when the page

loads, but as you roll your mouse over the image, it changes to show another image

• Good for drawing a users attention to something

• Examples

Menus

• A list of choices presented to the user• If the product is complex, you may need a

series of menus• Drop down menus are common• In multimedia products, the menus are often a

group of buttons along the edge of a page.

User response methods• A way of collecting information from the user• Text boxes

– The user can type in text– This can be adapted depending on how much text you need

• List boxes– Presents the user with a lost of boxes– Useful for limited responses

• Radio buttons– Can be “selected”– Boolean values, they are either selected or not– Only one can be selected at a time

• Check boxes– Similar to radio buttons, but you can select more than one at a time

• http://www.amazon.co.uk/

What you need to add to your Product Design:

• Menu system• Buttons/rollover buttons• Hotspots/Image Maps• Text links• User response methods– We have to remember that this is offline!