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!