Color Perception, Images, Animation Multimedia Interface Design Lecture 2, Multimedia E-Commerce Course October 29, 2002 Mike Christel and Alex Hauptmann © Copyright 2002 Michael G.

Transcript Color Perception, Images, Animation Multimedia Interface Design Lecture 2, Multimedia E-Commerce Course October 29, 2002 Mike Christel and Alex Hauptmann © Copyright 2002 Michael G.

Color Perception, Images, Animation Multimedia Interface Design

Color Perception

Color Perception Theories

• Component theory (Young-Helmholtz theory) Three color receptors are red, green, blue • Opponent color theory (1870s, Ewald Hering) • • • Three types of color discriminators: blue/yellow red/green black/white (Focus > 20 seconds on previous yellow slide and look away; you’ll see ghost image in opponent color blue) • Opponent-process theory blends these two “cones responding to different thirds of the visible spectrum send signals to each of three opponent discriminators which, in turn, respond by altering the frequencies they send to the brain” (

Desktop Multimedia Bible

Phenomena of Color Vision, 1 of 3

Phenomena of Color Vision, 2 of 3

Poor Color Choices

Phenomena of Color Vision, 3 of 3

Color Models

• RGB (red, green, blue) • • Matches computer hardware (cathode ray tube in monitor typically has red, green, and blue electron guns) Not always most intuitive method for humans/artists • HSB (hue, saturation, brightness) • Corresponds to human mind’s perception of color, with brightness being the light intensity, hue the spectral color, and saturation the amount of that hue added to pure brightness • Also called HLS (hue, lightness, saturation) • HSV (hue, saturation, value) Like HSB but parameters specified as degrees and percentages, e.g., “blue” is 0 and 360 degrees • CMYK (cyan, magenta, yellow, black)

Subtractive

More Resources on Color Theory, Perception, and Models

• Web tutorials, such as “Introduction to Color - Color Theory 101”: //www.webdesignclinic.com/ezine/v1i1/color/index.ht

ml • “Wheel of Color”, Robert Hess, Microsoft Corp., http://msdn.microsoft.com/library/default.asp?URL=/l ibrary/en us/dn_voices_hess/html/hess08142000.asp

• “Death of the Websafe Color Palette?” by David Lehn and Hadley Stern http://hotwired.lycos.com/webmonkey/00/37/index2a .html? tw=design •

The Desktop Multimedia Bible

, by Jeff Burger. Reading, MA: Addison Wesley Publishing Co.

Device vs. Image Resolution

• Average laser printer has resolution of 300 dots per inch (dpi) • Average computer display has resolution of 72 to 90 dpi • Average scanner has 600 dpi resolution • Photographic film has 1000s of dpi • Color resolution from 8-bit (256 colors) to 16-bit (65536 colors) to 24-bit (2^24 or ~16.7 million colors, good enough to enable photorealism) • …and if we focus on the lower bound of Web delivery...

216 Web-safe colors, < 640x480 window

On to Scanning in a Photograph...

• 35 mm photograph requires 28,000,000 pixels at Kodak Photo-CD archival resolution (3072 pixels per line * 2048 lines per frame * 36 bits per pixel, uncompressed) • High resolution scan of 600 dpi still produces drop in image quality • 4 inch by 6 inch picture scanned in at 600 dpi would print out as 8 inch by 12 inch picture on 300 dpi laser printer, and would appear as a 33.3 inch by 50 inch image on your 90 dpi monitor (i.e., you would need to scroll many times before seeing each part of the whole image) • Hence, when scanning for web publication, set scanner for 90 dpi if you wish images to remain same size when presented on the computer display screen © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 12 CarnegieMellon

Image Storage Requirements

• 4 inch by 6 inch picture at 72 dpi with 24 bit color (3 bytes per pixel) results in 378,432 bytes • At 28.8Kbps transfer rate, this picture would take over 13 seconds to download.

…but… • Image contains redundancy, e.g., repeating values • Human perception allows further “lossy” compression with no noticeable artifacts • Critical viewing distance: 2000 * pixel width (or height) See Agnew and Kellerman text:

Distributed Multimedia

, www.atomicdog.com, “1-1g Images” pp. 26 ff.

Compression Strategies

• Entropy coding • Repetitive sequence suppression • 2688888888888 becomes 268*11 (here * is an indicator that the preceding value “8” will be repeating the given number of times “11”) Statistical encoding (patterns are recorded according to the frequency at which they occur; frequent patterns use the shortest codes); Huffman encoding

afababaa could become in binary 100110110111 where “1”=“a”, “01” = “b”, “001” = “f”, reducing 8*8=64 bits to 12

• Source coding (optimizes compression based on semantics of original data) • Transform encoding (discrete Fourier transform – DFT, discrete cosine transform – DCT): most significant coefficients - those with most information energy - coded with higher accuracy © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 14 CarnegieMellon

JPEG (Joint Photographic Expert Group) Compression

JPEG Quantization

Transform (DCT) Quantization Table Quantization: the process of reducing the number of possible values of a quantity, thereby reducing the number of bits needed to represent it © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 16 CarnegieMellon

JPEG Entropy Coding

JPEG Assumptions

• Trying to reproduce contour edges of sharp areas with perfect fidelity is not necessary • Human eye responds poorly to brightness changes • Suitable for continuous tone images • Higher spatial frequencies generally less visible to the human eye than low frequencies, so quantization factors larger for higher frequencies Wallace, G.K. The JPEG still picture compression standard.

Communications of the ACM

34(4), April 1991, pp. 30-44.

JPEG vs. GIF (Graphics Interchange Format)

• JPEG Advantages • more colors (GIF limited to 256) • lossless option • • best for scanned photographs progressive JPEG downloads rough preview first • GIF Advantages (aside – pronounced “jif”: see http://www.skizzers.org/andy/stuff/gif/gif.html) • • • • • transparent color setting animated GIFs better for flat color fields: clip art, cartoons, etc.

tweaking of color palettes, dithering, color depth interlaced delivery downloads low resolution image before whole image arrives • PNG ( “ping”: see http://www.w3.org/Graphics/PNG/) © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 19 CarnegieMellon

JPEG Example

“100” quality (190,033 bytes) “10” quality (11,409 bytes) See http://billswin.inf.cs.cmu.edu/MM_MSEC/JPEGcompare.html

JPEG vs. GIF

JPEG vs. GIF for non-photo image

JPEG vs. JPEG 2000

• JPEG 8x8 DCT compression scheme may cause visible block artifacts • JPEG 2000 makes use of wavelet compression to eliminate block distortion • JPEG 2000 offers improved quality at high compression rates • Commercial JPEG 2000 vendor examples: http://www.leadtools.com/SDK/Raster/Raster-Addon JPEG2000-Example.htm

http://www.aware.com/products/compression/jpeg2000.html

Bitmap (Raster) vs. Structured (Vector) Graphics

Rasters: • Every pixel described at a set resolution • Standardized, fits computer HW model • Native support © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 24 Vector graphics: • Small descriptions (e.g., circle center and radius) • Looks good at different resolutions CarnegieMellon

Raster vs. Vector Graphics, continued

• Raster tools include: Illustrator, PhotoShop, Paint • Vector tools include: Director, Flash, Dreamweaver, Freehand, PageMaker • Photographs best expressed as rasters • Simple graphics animations well served by vector representations • Macromedia Flash is one tool for building such vector based animations (lead-in to Homework Assignments 2, due Oct. 30/Nov. 4, and Homework 3, due November 24) © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 25 CarnegieMellon

Digital Libraries Available to CMU Students

ACM Digital Library: http://www.acm.org/dl/ IEEE Xplore: http://www.ieee.org/ieeexplore (papers viewable via Adobe Acrobat Reader) Reading list suggestions will be interspersed in presentations; for example, for more details on MPEG video compression and its use of Discrete Cosine Transform (DCT), see: Didier Le Gall; Communications of the ACM 34 , 4 (Apr. 1991), pp. 46 - 58 © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 26 CarnegieMellon

Multimedia Interface Design Issues

• Traditional usability attributes • • • • • Learnability Efficiency Memorability Errors Satisfaction • Modal Perception, e.g., color, fidelity, timing • Bandwidth • Load time © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 27 CarnegieMellon

Reference

The Desktop Multimedia Bible

Red Perception and Examples

Orange Perception and Examples

Blue Perception and Examples

Yellow Perception and Examples

Green Perception and Examples

Brown Perception and Examples

White Perception and Examples

Black Perception and Examples

Pastels Perception and Examples

Subliminal Perception: Soft, non-threatening, feminine Associated Item Examples: Female, Southwest, babies

Earth Tones Perception and Examples

Subliminal Perception: Nature Associated Item Examples: Mother Earth

High-Saturated Perception and Examples

Subliminal Perception: Loud, bold, capable, happy, strong Associated Item Examples: Flags, corporate logos, crayons

Low-Saturated Perception and Examples

Subliminal Perception: Old, weathered, drab Associated Item Examples: Old photographs, expired products

Multimedia Interface Design Issues

References

User-Centred Design for Multimedia Applications, by Alistair Sutcliffe. In

Proc. IEEE Multimedia Systems ‘99

Vol. 1 (Florence, Italy, June 1999), pp. 116-123.

“Myths, Messages and Effective Learning with Multimedia,” online slide presentation by Alistair Sutcliffe, City University, U.K. formerly at http://www.city.ac.uk/teaching/sem16/index.htm

UCD-MA (User Centred Design for Multimedia Applications) Method

• Suitable for task-based applications: effective information delivery is the prime goal • • education and training addressed indirectly interactive multimedia, e.g., for entertainment and dialogue, not addressed • Consists of 4 components: • • • • information modeling media selection presentation planning design for attention within a medium and between media Uses cognitive models of Human Information Processing based on experimental psychological research © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 43 CarnegieMellon

Human Information Processor

Working Memory Visual STM Aural STM 1. Capacity overflow information overload 2. Integration 1 1 2 3 Cognitive Processor ---------------- Attention Scheduler 4 Long-Term Memory Motor processor 5 3. Contention conflicting channels 4. Comprehension 5. Multitasking I/O

Implications for Multimedia Interfaces for Learning

• Schema integration: learning will only be effective if the user has sufficient existing knowledge to make sense of the new material (!! - resolve with active learning/engagement though; Piaget learning theory) • Self-paced learning: people need time to reflect and assimilate new information (e.g., add “replay”, “seek”) • Active learning: interaction in the key; learning by doing and problem-solving are more effective than passive comprehension • Engagement: learners have to be motivated Malone, T.W. Toward a Theory of Intrinsically Motivating Instruction.

Cognitive Science

4 (1981), 333-369.

Usage Principles

• Thematic Congruence: different parts of the message should be easy to integrate and comprehend • Manageable Information Loading: give users time to assimilate the necessary information • Viewpoints: present different aspects of the object/information by combination of media • Redundancy and Reinforcement: present same information in different ways/modes to help learning • Avoid Attention Conflicts: make sure user can assimilate information without being distracted © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 46 CarnegieMellon

Media Types

still image photograph of person visual moving image video of person running realistic non-realistic aural aural visual natural recorded sound synthetic sound still image moving image bird song music diagram, sketch cartoon language-based aural visual formal language spoken narrative mathematical formulae © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 47 text book CarnegieMellon

Media Selection Guidelines Info. Type Preferred Media Example

Physical still or moving image building diagram Abstract Descriptive Visio spatial Value text or speech text or speech realistic media - photo explain sales policy chemical properties person’s face text/tables/number lists pressure reading Relationships/ values design images graphs, charts histogram of rainfall/month © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 48 CarnegieMellon

Media Selection Guidelines Info. Type Preferred Media

Procedural Discrete Action images, series, text still image Continuous Action Events States moving image sound, speech still image, text Composition Causal still/moving image moving image, text, speech

Example

evacuation instructions make coffee maneuvers while skiing fire alarm photo of weather conditions exploded parts diagram video of rainstorm causing flash flood © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 49 CarnegieMellon

Attention-Directing Effects for Different Media

Still image Change of shape, size, color of object; use of bold outline; add mark like arrow or icon; draw boundary; use color/shape/size/texture to distinguish important objects from the surrounding components Moving image Freeze frame followed by applying a still image highlight; zoom, close-up shot of the object; cuts, wipes, dissolve effects and cinematic principles Text Bold, font size, type, color or underlining Speech/sound Amplitude (loudness); variations in pitch (frequency); silence followed by onset of sound; different voices or change in voice prosody (tonality) © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 50 CarnegieMellon

International Org. for Standardization 14915

“ISO 14915 will establish software ergonomics requirements and recommendations for interactive multimedia user interfaces that integrate and synchronise different media (static media such as text, graphs and images; and dynamic media such as audio, animation and video). The standard will not provide detailed design guidance for specific media but will deal with media design issues related to application for multimedia.

The standard will apply to presentation and interaction techniques for computer based multimedia applications in general, including stand-alone and networked applications. ….” From http://www.system-concepts.com/stds/14915.html

Implications

• ISO/DIS 14915-1 Software ergonomics for multimedia user interfaces – Part 1: Design principles and framework • ISO/CD 14915-2 Software ergonomics for multimedia user interfaces – Part 2: Multimedia control and navigation • ISO/DIS 14915-3 Software ergonomics for multimedia user interfaces – Part 3: Media selection and combination • • http://www.iso.ch/ shows ISO 14915-3 as published std.

http://www.system-concepts.com/stds/ISO14915 Note: no change in posted status since Jan. 2001….

References for Next Few Slides

The Ten Golden Rules for Providing Video Over the Web or 0% of 2.4M (at 270k/sec, 340 sec remaining)

by Chris Johnson http://crete.dcs.gla.ac.uk/~johnson/papers/video.html

Ten Usability Heuristics

by Jakob Nielsen http://www.useit.com/papers/heuristic/heuristic_list.html

Video over the Web, via “Ten Golden Rules…”

• Avoid Video for Video's Sake • Make Sure That Users Can Access the Video • Maximize the Production Quality • Edit The Clip to Maximize Content and Minimize File Size • Use Mirror Sites if Necessary The Ten Golden Rules for Providing Video Over the Web or 0% of 2.4M (at 270k/sec, 340 sec remaining) http://crete.dcs.gla.ac.uk/~johnson/papers/video.html

Video over the Web, via “Ten Golden Rules…”

• Cater for Differences Between Browsers and Directed Users • Use Page Layouts To Indicate The Quantity and Quality of Video Material • Assess the Impact of Retrieval Delays Upon Overall Task Satisfaction • Never Underestimate the Element of Surprise • Never Take A Designer's Word For It...

The Ten Golden Rules for Providing Video Over the Web or 0% of 2.4M (at 270k/sec, 340 sec remaining) http://crete.dcs.gla.ac.uk/~johnson/papers/video.html

Ten Usability Heuristics from J. Nielsen

• Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. • Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system oriented terms. • User control and freedom Mistakes happen; support undo and redo. • Consistency and standards Follow platform conventions. • Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 56 CarnegieMellon

Ten Usability Heuristics from Nielsen, continued

• Recognition rather than recall Make objects, actions, and options visible. • Flexibility and efficiency of use Create system that can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. • Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. • Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language. • Help and documentation Help should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. © Copyright 2002 Michael G. Christel and Alexander G. Hauptmann 57 CarnegieMellon

Interface Design References

•

Designing the User Interface: Strategies for Effective Human-Computer Interaction

, Ben Shneiderman, 1997. Addison-Wesley Publishing ISBN 0-201-69497-2 •

The Design of Everyday Things,

Don Norman, 1990. Doubleday ISBN 0-385-26774-6 (paperback).

•

Usability Engineering,

Jakob Nielsen, 1993. Academic Press ISBN 0-12-518406-9 (paperback).

•

The Alertbox: Current Issues in Web Usability,

Jakob Nielsen of the Nielsen Norman Group http://www.useit.com/alertbox/ • Vincent Flanders’

Web Pages that Suck

Critiques of Flash Animations on the Web

• •

Animation: Uses and Abuses

by Amy Gahran http://www.contentious.com/articles/V2/2-5/rw2-5.html

Flash: 99% Bad

by Jakob Nielsen http://www.useit.com/alertbox/20001029.html

CAUTION: Consider users, purpose, current state of technology. Don’t animate for animation’s sake.