1 CP586 © Peter Lo 2003 Multimedia Communication Visual Interface Design & Product Design

CP586 © Peter Lo Building 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 Classes 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 Content 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 Storyboarding 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 Storyboarding 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 Layout 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 Perceptual 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 Colour 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 Colour 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 Colour 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 Visuals 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 Clear 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 Fundamental 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.