CP586 © Peter Lo 2003 1

Multimedia CommunicationMultimedia Communication

Visual Interface Design &Product Design

CP586 © Peter Lo 2003 2

Building BlocksBuilding Blocks Introduction : Identify the product/Security. Splash : Indicate a product is loading. Menu : Organise the content of an product. Content : Display the video, text & images. Help : Show how to use the product. Credits : Identify the author & developer. Quit : Terminate the program with ease.

CP586 © Peter Lo 2003 3

Classes of ProductsClasses of Products Non Interactive : These applications are presented in a

linear fashion and are suitable for training, marketing and presentations.

Interactive : Interactive multimedia is characterised by the ability for the end user to control information flow and navigation.

Interactive applications are suitable for reference tools (eg. Encarta) , education, electronic news and entertainment (WWW).

CP586 © Peter Lo 2003 4

Content OrganisationContent Organisation Various strategies can be applied to organise

information for a product. Reference : Structure lists and logical groups from

which a user can find a specific term. Temporal : Based on events or a time line. Geographical : Maps, charts and floor plans. Systemic : define structure and operation. Organisational : People and companies.

CP586 © Peter Lo 2003 5

StoryboardingStoryboarding Storyboarding is often used in industry to develop

and plan movies, animation and multimedia products.

Storyboards show how different parts of a multimedia application come together.

Storyboarding is used to build a story on paper that describes and details the message and purpose of a multimedia application.

CP586 © Peter Lo 2003 6

StoryboardingStoryboarding A storyboard should contain the following information. The message for each page. The multimedia content for each page. Layout and interface design of each page. Specific interactivity for each page. Layout of navigation controls on each page. Comments and reference information.

CP586 © Peter Lo 2003 7

Layout conventionsLayout conventions Scan from top left to bottom right.

Assume larger items more significant.

Assume items “above” have primacy over items

“below”.

Look for “more to come” signals at the bottom

centre or right.

CP586 © Peter Lo 2003 8

Perceptual Effects of ColourPerceptual Effects of Colour Colour is emotional. Colour has cultural associations. Colour draws attention. Colours group elements. Colours influence other colours. Colour coding is not always fast.

CP586 © Peter Lo 2003 9

ColourColour Light receptors in the eye: rods register brightness,

cones register red, green & blue. There are fewer blue cones than red & green,

especially in the focussing area of the eye. Colour is emotional- red excites, blue calms.

CP586 © Peter Lo 2003 10

ColourColour Colour has cultural associations. Colour draws attention, can relate or group

elements. Colours can influence other colours next to them. Blue is difficult to focus - use for background, but

not for thin fonts or narrow lines.

CP586 © Peter Lo 2003 11

Colour blindnessColour blindness True red - green colour blindness affects less than

1% of the population.

9% of males have some form of colour deficiency

or confusion - considerable variation in problems.

Use other cues as well as colour.

CP586 © Peter Lo 2003 12

Visuals Affect UseabilityVisuals Affect Useability Visual design can increase and decrease

useability. Mentally, we rank the importance of information

based on visual presentation. Visual elements can focus our attention. On a computer terminal we need a mental path

through the information.

CP586 © Peter Lo 2003 13

Clear Visuals Promote EfficiencyClear Visuals Promote Efficiency Clarity of presentation enables users to find what

they want to complete a given task. An application will be far more efficient if the

user does not have to waste time figuring things out.

A more efficient interface design results in reduced training.

CP586 © Peter Lo 2003 14

Fundamental Design IssuesFundamental Design Issues Harmony : Elements of an Interface fit together

and blend into a satisfying whole. Balance : Like Harmony, relates to integrating

elements, but it refers more directly to arrangement. (eg Symmetry)

Simplicity : Clarity, sophistication, elegance and economy.