1

Multimedia Design

2

Multimedia DesignMultimedia Design

UsabilityNo matter how powerful or potentially useful a

multimedia software application or web site design is, if it can not be worked by the intended user then it is worthless

Communication is at least as important as computation

3

Multimedia DesignMultimedia Design

4

Iterative DesignIterative Design

Evaluate with real users

Identify user needs or problems

Design a solution

Prototype the solution

5

Darn these hooves! I hit the wrong switch again! Who designed these instrument panels, racoons?

Multimedia DesignMultimedia Design

6

The Interactive CycleThe Interactive Cycle

Evaluates and understands the

display

Interprets input events to make

changes

Data model for the application information

Updates to the display

Formulates goals and actions,

generates inputs

Updates to the display

Data model changes

7

Gulfs of UnderstandingGulfs of Understanding

Don Norman has identified two gulfs in a user’s understanding that cause the interactive cycle to break downGulf of EvaluationGulf of Execution

8

Gulf of EvaluationGulf of Evaluation

Users must interpret what they see on the screen and evaluate it relative to their ultimate goals

There are many ways in which this evaluation might fail:Ergonomic –

• Text too small to read

• Text has poor contrast with background colour

9

Gulf of EvaluationGulf of Evaluation

10

Gulf of EvaluationGulf of Evaluation

11

Gulf of EvaluationGulf of Evaluation

12

Gulf of EvaluationGulf of Evaluation

Design and layout – • Items may be ineffectively grouped and so the

users misses an important relationship

• Critical information incorrectly placed

• All information may appear the same without emphasis or highlights

Relevant information must not only be on the screen, but in a form which is immediately obvious

13

Gulf of EvaluationGulf of Evaluation

14

Gulf of EvaluationGulf of Evaluation

15

Gulf of ExecutionGulf of Execution

This arises when the user does not know what sequence of input events will accomplish the desired goal

There are several things that might cause this gulfThe user does not know what the system can

doThe operation of objects on the screen are not

obvious e.g buttons, links, scroll bars etc.Inadequate feedback

16

Gulf of ExecutionGulf of Execution

17

Gulf of ExecutionGulf of Execution

18

Gulf of ExecutionGulf of Execution

19

Consistency and SimplicityConsistency and Simplicity

Be consistent in your use of:SizeColour LocationWordingFunctionSequencing

20

Consistency and SimplicityConsistency and Simplicity

21

Consistency and SimplicityConsistency and Simplicity

22

Consistency and SimplicityConsistency and Simplicity

23

Human Memory IssuesHuman Memory Issues

7 items +/- 2

Short term memory is approx. 30 seconds to 2 minutes

User should not need to buffer information from one screen to the next

24

If only I had turned up to the lecture I would know what is on this slide

25

Human Memory IssuesHuman Memory Issues

Avoid stacking

Design for task closure

Recognition rather than recall

26

Status IndicatorsStatus Indicators

Whenever the system is performing a potentially lengthy process the user should be given feedback e.g status bar, hourglass, loading screen

System should have response time suitable for task

27

Design GuidelinesDesign Guidelines

General text format rules:Only use two levels of intensityUse underlining, bold, inverse video etc.

sparinglyUse no more than 3 different fontsSerif fonts are easier to read, but sans-serif

can look more modernCapitalise as you would in normal sentences

28

Design GuidelinesDesign Guidelines

29

Design GuidelinesDesign Guidelines

30

Design GuidelinesDesign Guidelines

Colour is perhaps the most overused feature in multimedia designsUse no more than 4 colours on a screenNo more than 7 in an applicationGenerally blue or black backgrounds with

white or yellow characters respectively give the best contrast, but not necessarily the best look!

Blue should not be used for text as it is one of the hardest colours to read

31

Design GuidelinesDesign Guidelines

Consider colour conventions carefullyRed: passion, romance, fire, violence, aggression. Red

means stop, warning or forbidden in many culturesPurple: creativity, mystery, royalty, mysticism, rarity,

associated with death in some culturesBlue: loyalty, security, conservatism, tranquillity,

coldness, sadnessGreen: nature, fertility, growth, envy, go, environmentYellow: brightness, illumination, illness, cowardice Black: power, sophistication, contemporary style,

death, morbidity, evilWhite: purity, innocence, cleanliness, truth, peace,

coldness, sterility

32

Colour HarmonyColour Harmony

One of the most challenging aspects of visual design is developing effective colour harmonies that strike a balance between monotony and over stimulation

33

RGB Colour WheelRGB Colour Wheel

                                      

                

Primary colours

Secondary colours

Tertiary colours

34

Design GuidelinesDesign Guidelines

Sound:Use harsh and soft audio tones for warnings

and positive feed back respectivelySound can add to a site or application, but can

also be annoyingIt is always a good idea to provide the option

to turn the sound off

35

Display IssuesDisplay Issues

Maintain display inertiaStatic objects such as buttons, words and

icons that appear on many screens should always appear in the same location

Location, shape and size of objects should be kept as consistent as possible

36

Display IssuesDisplay Issues

Organise the screen to manage complexityEliminate unnecessary informationUse concise wording or easy to recognise

iconsUser performance suffers when less that 25%

of the screen is white space 50% white space is recommended for textual

displaysRelated information should be grouped

logically

37

FinFin

Fin