2. 1 Part A Multimedia Production Chapter 3 Multimedia Products - 3.4 Multimedia Design Factors Information and Communication Technology “Multimedia Production and Web Site Development”

3. Ch 3.4 Multimedia Design Factors 2 Multimedia design factors Human abilities and limitations # Some visual design variables # # Not included in the C&A Guide

4. Ch 3.4 Multimedia Design Factors 3 Recognize the essential design factors. Integrate multimedia elements into a cohesive multimedia product in a given context. Understand the need to strike a balance between qualities and constraints in processing multimedia elements. Appreciation of human abilities, limitations and some visual design variables # # Not included in the C&A Guide

5. Ch 3.4 Multimedia Design Factors 4

6. 5 Table of Contents 1.Our Abilities and Limitations 2.Basic Design Considerations 3.Multimedia Design Considerations 4.Integrating Multimedia 5.Hardware and Software Constraints

7. Ch 3.4 Multimedia Design Factors 6

8. 7 1. Memory There are three types of memory function: Sensory memories Short-term memory or working memory Long-term memory

9. Ch 3.4 Multimedia Design Factors 8 1. Short-term memory (STM) Scratch-pad for temporary recall Rapid access ~ 70ms Rapid decay ~ 200ms Limited capacity - 7± 2 chunks

10. Ch 3.4 Multimedia Design Factors 9 1. Long-term memory (LTM) Repository for all our knowledge Slow access ~ 1/10 second Slow decay, if any Huge or unlimited capacity Two types Episodic – serial memory of events Semantic – structured memory of facts,concepts, skills

11. Ch 3.4 Multimedia Design Factors 10 1. Interpreting The Signal Size and depth Visual angle indicates how much of view object occupies (relates to size and distance from eye) Visual acuity is ability to perceive detail (limited) Brightness Subjective reaction to levels of light Affected by luminance of object Colour Made up of hue, intensity, saturation Cones sensitive to colour wavelengths Blue acuity is lowest

12. Ch 3.4 Multimedia Design Factors 11 1. Interpreting The Signal The visual system compensates for Movement Changes in luminance Context is used to resolve ambiguity Optical illusions sometimes occur due to over compensation

13. Ch 3.4 Multimedia Design Factors 12 1. Optical Illusions The Muller Lyer illusion Which line is longer? They are of the same length

14. Ch 3.4 Multimedia Design Factors 13 1. Colour and 3D Both often used very badly! Colour Beware colour blind! 3D effects Good for physical information and some graphs But don ’ t over use

15. Ch 3.4 Multimedia Design Factors 14 1. bad use of color over use - without very good reason (e.g. kids’ site) colour blindness poor use of contrast do adjust your set! adjust your monitor to greys only can you still read your screen?

16. Ch 3.4 Multimedia Design Factors 15 Negative contrast – dark characters on a light screen 1. Colour for Text (Contrasting Colours)

17. Ch 3.4 Multimedia Design Factors 16

18. Ch 3.4 Multimedia Design Factors 17 2. Text Break text into short chunks Use fonts that have serif Choose appropriate font sizes Leave much white spacing Use pastel colors

19. Ch 3.4 Multimedia Design Factors 18 2. Sound Limit the use of sound Use lower frequency sounds Let the user control sound volume quickly and easily For smooth human voice delivery, choose 32kps for bit rate

20. Ch 3.4 Multimedia Design Factors 19 2. Video Limit the use and the number of transitions Compress the video Raw video takes up a huge space Use a smooth display frame rate

21. Ch 3.4 Multimedia Design Factors 20 2. Image Consider gamma correction to prevent excessive darkness Reduce color depth for simple or uniform pictures Choose vector format for good scaling effect to different sizes

22. Ch 3.4 Multimedia Design Factors 21

23. Ch 3.4 Multimedia Design Factors 22 3. Designing a Multimedia Product Audience awareness Not everyone in the world is the same People would have different abilities and preferences for a multimedia product Need to consider General factors like gender, ethnic groups, etc. Physical factors like age, visual issues, physical impair, etc. 8% males and 1% females colour blind For older people, larger font sizes vs. more information on a single display

24. Ch 3.4 Multimedia Design Factors 23 3. Color Deficiency (AKA “Color Blindness”)

25. Ch 3.4 Multimedia Design Factors 24 3. Designing a Multimedia Product Audience expectation What does your audience expect and how can you deliver it to them? Consistency with the Operating System Follows industrial guidelines, particularly for business applications. ``The Windows Interface Guidelines for Software Design, MS Press" Style Classic vs trendy Functions Controls should match your audience

26. Ch 3.4 Multimedia Design Factors 25 3. Designing a Multimedia Product Communication design principles and psychology Clear communication and visual design Technical considerations Technical constraints: color, fonts, memory, disk space,... Schedule and resources Tradeoffs between product features and the schedule Competition Can you create a design that will better address the needs of the users?

27. Ch 3.4 Multimedia Design Factors 26 3. Design Visual Variables Scale, contrast, and proportion: they are the subtle aspects of the visual design. Scale Describes the relative size or magnitude of a given design element in relation to other design elements and the composition as a whole. “The feeling of a design fitting its space and its surroundings", Grillo (1960)

28. Ch 3.4 Multimedia Design Factors 27 3. Design Visual Variables Contrast It is essential for differentiating elements from one another. It can be used with scale together To emphasize important elements or areas in the composition. To move the viewer's eye through the composition in a predictable sequence that can be used to support a particular communication goal. To add visual interest to a composition by juztaposing elements with strongly opposed visual qualities to create tension, drama, and excitement. Different dimensions: shape, size, color, texture, position, orientation, and movement.

29. Ch 3.4 Multimedia Design Factors 28 3. Design Visual Variables Proportion Deals in ratios rather than fixed sizes. It determines the balance and harmony of the relation between elements. The metric that guides the choices of scales in a contrast relationship.

30. Ch 3.4 Multimedia Design Factors 29 3. Design Problems Insufficient contrast Excessive contrast Visual interference Spatial tension Overextension Award dimensions

31. Ch 3.4 Multimedia Design Factors 30 3. Some Design Heuristics Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose and recover from errors Help and documentation

32. Ch 3.4 Multimedia Design Factors 31 3. Example Visibility of system status Keep users informed about what is going on Example: pay attention to response time searching database for matches

33. Ch 3.4 Multimedia Design Factors 32 3. Example Aesthetic and minimalist design No irrelevant information in dialogues

34. Ch 3.4 Multimedia Design Factors 33

35. Ch 3.4 Multimedia Design Factors 34 4. Integrating Multimedia Media elements Some based on spatial and/or time E.g. sound, video, animation Others are static E.g. text, image Integrating elements Spatial and time implication together E.g. static text may appear in the beginning of a video clip  Place to appear – spatial  Duration, starting time to appear - time

36. Ch 3.4 Multimedia Design Factors 35 4. Integrating Multimedia Considerations of tolerance and limits Bandwidth Different media elements have different sizes and bandwidth requirements  E.g. audio of 48kHz sampling rate with video of 60 frames per second Synchronization The sequencing and parallel presentations of elements

37. Ch 3.4 Multimedia Design Factors 36 4. Integrating Multimedia Considerations of tolerance and limits Platforms Common software/hardware to support the media elements Don’t overload Do not pass too much information at one time  E.g. text flying by with human voice output of different information

38. Ch 3.4 Multimedia Design Factors 37

39. Ch 3.4 Multimedia Design Factors 38 5. Hardware Constraints Input Devices Keyboard Positioning and Pointing Devices Video/Image Capturing Devices Audio Input Devices (e.g. microphone) Output Devices Display Devices Printing Devices Audio Speakers Storage / Bandwidth Sizes of the media elements stored and delivered Speed CPU processing speed

40. Ch 3.4 Multimedia Design Factors 39 5. Keyboards Most common text input device Allows rapid entry of text by experienced users Usually connected by cable, but can be wireless

41. Ch 3.4 Multimedia Design Factors 40 5. Positioning and Pointing Devices Mouse -- Handheld pointing device Very common Easy to use Two characteristics Planar movement Buttons (usually from 1 to 3 buttons on top, used for making a selection, indicating an option, or to initiate drawing etc.)

42. Ch 3.4 Multimedia Design Factors 41 Mouse -- Handheld pointing device Mouse located on desktop Requires physical space No arm fatigue Relative movement only is detectable. Movement of mouse moves screen cursor Screen cursor oriented in (x, y) plane, 5. Positioning and Pointing Devices

43. Ch 3.4 Multimedia Design Factors 42 Mouse -- Handheld pointing device Mouse movement in (x, z) plane An indirect manipulation device. Device itself doesn't obscure screen, is accurate and fast. Can lead to hand-eye coordination problems due to indirectness of manipulation. 5. Positioning and Pointing Devices

44. Ch 3.4 Multimedia Design Factors 43 5. How does it work? Two methods for detecting motion Mechanical Ball on underside of mouse turns as mouse is moved Rotates orthogonal potentiometers Can be used on almost any flat surface.

45. Ch 3.4 Multimedia Design Factors 44 5. How does it work? Optical Light emitting diode on underside of mouse Sits on special grid like pad on desk; less susceptible to dust and dirt Detects fluctuating alterations in reflected intensity as mouse is moved over the gridlines, used to calculate relative motion in (x, z) plane Also a device known as the footmouse -- operated with the feet; a rare device, not in common use

46. Ch 3.4 Multimedia Design Factors 45 5. Other Positioning Devices Joystick Indirect device, takes up very little space Controlled by either Movement (absolute joystick) - position of joystick corresponds to position of cursor Pressure (isometric or velocity-controlled joystick) - pressure on stick corresponds to velocity of cursor Usually provided with buttons (either on top or on front like a trigger) for selection and does not obscure screen Inexpensive

47. Ch 3.4 Multimedia Design Factors 46 5. Other Positioning Devices Trackball Bit like an upside-down mouse. Ball is rotated inside static housing, relative motion moves cursor. Indirect device, fairly accurate. Requires buttons for picking. Size and "feel" of trackball itself important. Requires little space, becoming popular for portable and notebook computers.

48. Ch 3.4 Multimedia Design Factors 47 5. Other Positioning Devices Touch-sensitive screen (touch screens) Detect the presence of finger or stylus on the screen. Work by interrupting matrix of light beams or by capacitance changes or ultrasonic reflections. Direct pointing devices.

49. Ch 3.4 Multimedia Design Factors 48 5. Other Positioning Devices Touch-sensitive screen (touch screens) Advantages Fast, and require no specialized pointer. Good for menu selection. Suitable for use in hostile environment: clean and safe from damage. Disadvantages Finger can mark screen. Imprecise (finger is a fairly blunt instrument!) - difficult to select small regions or perform accurate drawing. Lifting arm can be tiring, and can make screen too close for easy viewing.

50. Ch 3.4 Multimedia Design Factors 49 5. Other Positioning Devices Light pen Coiled cable connects pen to VDU In operation, pen held to screen and detects burst of light from screen phosphor during display scan. Direct pointing device: accurate (can address individual pixels), so can be used for fine selection and drawing. Disadvantages Pen can obscure display, is fragile, can be lost on a busy desk Tiring on the arm.

51. Ch 3.4 Multimedia Design Factors 50 5. Other Positioning Devices Digitizing tablet Indirect device. Resistive tablet Detects point contact between 2 separated sheets Has advantages in that it can be operated without specialized stylus - a pen or the user's finger is fine. Magnetic tablet Detects current pulses in magnetic field using small loop coil housed in special pen. Also capacitive and electrostatic tablets.

52. Ch 3.4 Multimedia Design Factors 51 5. Other Positioning Devices Sonic tablet Similar to above but requires no special surface: ultrasonic pulse emitted by pen detected by two or more microphones which then triangulate the pen position. Can be adapted to provide 3-D input.

53. Ch 3.4 Multimedia Design Factors 52 5. Finding the Right Device Take into account the particular manipulations that would have to be carried out to perform required tasks. Can a spring-loaded joystick be used to twist a 3-D object at a fixed x-y position? Can a trackball be used for simultaneous zooming and panning of a picture?

54. Ch 3.4 Multimedia Design Factors 53 5. Finding the Right Device Try to set up natural mappings between the ways the device can be manipulated, the feedback given by the program, and the meaning of the result in terms of the user's mental model. A trackball or a joystick to control a plane?

55. Ch 3.4 Multimedia Design Factors 54 5. Finding the Right Device Matching Devices for the Disable Special input devices Eye and head movement input Electrophysiological: records the movements of the muscles that control the eye. Photoelectric reflection: records movements in reflected light from the eye. Eye typer 3-D tracker attached to a limb. The equalizer system with a single switch.

56. Ch 3.4 Multimedia Design Factors 55 5. Finding the Right Device Matching Device with Environment Work environment with unusual characteristics. Special input devices Pen-based systems The Best Device The best device for any particular task will depend upon the nature and characteristics of the task in question.

57. Ch 3.4 Multimedia Design Factors 56 5. Output Devices One predominant - the computer screen, usually the cathode ray tube Cathode ray tube Stream of electrons emitted from electron gun, focused and directed by magnetic fields, hit phosphor-coated screen which glows. Three types: raster scan, random scan, and direct view

58. Ch 3.4 Multimedia Design Factors 57 5. Output Devices Advantages of CRT Cheap, fast enough for rapid animation, high colour capability. Increased resolution produces higher prices. Disadvantages Bulky - due to electron gun and focusing components behind screen. Problems with "jaggies", diagonal lines that have discontinuities in due to horizontal raster scan process. Reduced by using high-resolution screens, or by anti-aliasing, which softens edges of line segments.

59. Ch 3.4 Multimedia Design Factors 58 5. Output Devices Liquid crystal displays Smaller, lighter, with no radiation problems. Matrix addressable. Found on portables and notebooks, and starting to appear more and more on desktops. Less tiring than CRT displays, and reduce eye- strain, due to reflected nature of light rather than emitted. Use of super-twisted crystals have improved the viewing angle, and response rates are improving all the time (necessary for tracking cursor accurately).

60. Ch 3.4 Multimedia Design Factors 59 5. Displays – Small and Large The display has become the primary source of feedback to the user from the computer The display has many important features, among them: Physical dimensions Resolution (the number of pixels available) Number of available colors, color correctness Power consumption Refresh rates (sufficient to allow animation and video) Cost Reliability

61. Ch 3.4 Multimedia Design Factors 60 5. Resolution and Colour Depth Resolution Number of pixels on screen (width x height) E.g. SVGA 1024 x 768, PDA usually 240 x 320 or 240 x 240 Density of pixels (in pixels or dots per inch - dpi) Typically between 72 and 96 dpi Aspect ratio Ration between width and height 4:3 for most screens, 16:9 for wide-screen TV Colour depth How many different colours for each pixel? Black/white or greys only 8 bits each for red/green/blue = millions of colours

62. Ch 3.4 Multimedia Design Factors 61 5. Alternative Output Devices Visual Analogue representations: dials, gauges, lights, etc. Head-up displays - found in aircraft cockpits Auditory Beeps, bongs, clonks, whistles and whirrs Used for error indications Confirmation of actions e.g. keyclick Speech: not a fully exploited area

63. Ch 3.4 Multimedia Design Factors 62 5. Printing Popular printing technology builds up characters on page, as on the screen, as a series of dots. Allows any character set or graphic to be printed, depending on the resolution of the dots, measured in dots per inch (dpi). Dot-matrix printers Ink-jet and bubble-jet printers Thermal printers Laser printer

64. Ch 3.4 Multimedia Design Factors 63 5. Display devices for various environments Displays in ‘public’ places Large or small Very public or for small group Display only For information relevant to location Interactivity Use stylus, touch sensitive screen

65. Ch 3.4 Multimedia Design Factors 64 5. Software Constraints System program Operating systems Different systems : Mac OS, MS Windows, Linux, Unix Different versions of the same systems : Windows XP, Windows 2000, Windows 98 Device drivers Missing or incorrect device drivers for new hardware components Different device drivers for the same hardware component A green tick indicates the driver Is fine and installed.

66. Ch 3.4 Multimedia Design Factors 65 5. Software Constraints Application software Player software Depends on the OS or the hardware Different versions of the software Limited support of different multimedia types  E.g. MS MediaPlayer with RA files  E.g. MS MediaPlayer for a new CODEC scheme Editing software Limited support of different multimedia types  E.g. MS Sound for saving AU file would be difficult

67. Ch 3.4 Multimedia Design Factors 66 5. Don’t Make Assumptions Browser People use many different browsers such as Netscape, Explorer, Lynx, etc. Window size Not everyone uses the default window size www.comp.polyu.edu.hk

68. Ch 3.4 Multimedia Design Factors 67

69. Ch 3.4 Multimedia Design Factors 68 References Jakob Nielsen. The Usability Engineering Life Cycle. IEEE Computer. March 1992: 12-22. Jacob Nielsen’s www.useit.com www.useit.com User Interface Engineering http://www.uie.com http://www.uie.com Multimedia User Interface Design Guidelines http://www.lawrence- najjar.com/papers/Multimedia_user_interface_design_guidel ines.html http://www.lawrence- najjar.com/papers/Multimedia_user_interface_design_guidel ines.html Flash Tutorial http://journalism.berkeley.edu/multimedia/tutorials/flash/ http://journalism.berkeley.edu/multimedia/tutorials/flash/

70. Ch 3.4 Multimedia Design Factors 69 References Pedagogic design guidelines for multimedia materials: a mismatch between intuitive practitioners and experimental researchers http://www.eurodl.org/materials/contrib/2005/Jack_Koumi.htm http://www.eurodl.org/materials/contrib/2005/Jack_Koumi.htm When using sound with a text or picture is not beneficial for learning http://www.ascilite.org.au/ajet/ajet16/kalyuga.html http://www.ascilite.org.au/ajet/ajet16/kalyuga.html Foster the feel good factor http://www.sitepoint.com/print/foster-feel-good-factor http://www.sitepoint.com/print/foster-feel-good-factor EBONI Electronic Textbook Design Guidelines http://ebooks.strath.ac.uk/eboni/guidelines/ http://ebooks.strath.ac.uk/eboni/guidelines/