Interaction Design for Multimedia: + Composition and Color

1. Interaction Design for Multimedia: + Composition and Color CIS 421 color.ppt

2. Agenda • Project 1 • Analysis & Design of interactive multimedia websites • GAS analysis • Layout & composition decisions • Text and fonts • The uses of color

3. Project 1:Due: Week 4, Wed., before class • Project standards = index page on projects folder • Project 1 requirements • Design the website according to your project plan, to suit & appeal to your specific persona • + Each website must pass accessibility & other standards • Website that fulfills project plan (50 points) • Accomplishes tasks outlined in project plan • Website Structure (5 points) • Testing & validation (8 points) • Website design –qualitative evaluations (16 points) • Website elements (13 points) • Other requirements (8 points)

4. Project 1:Due: Week 4, Wed., before class • Make sure you get credit for the work you do – make as obvious as possible • Download a copy of grading sheet for project to your hard drive • http://www.csupomona.edu/~llsoe/42101/projects/proj1grade.xls • fill in the details • post on your Web site in admin directory • Create a link to it from Webmaster page • Upload a copy to Blackboard under assignments

5. Characteristics of good interaction design • Trustworthy • Appropriate • Smart – complexity handled by technology • Responsive – if slow let user know something is happening • Clever? • Ludic, which means that users can play with it • Pleasurable – appeals to emotions, is satisfying to use

6. GAS Analysis:Goals of Project • Answers the WHY? Of the project • Developer goals: • Branding company identity • Increasing traffic to website • Developer goals of nasa.gov? • User Goals • Communication medium (chat, bulletin board) • Getting something (entertainment, purchase, info) • User goals of nasa.gov? YouTube? MySpace? • Developer & user goals reciprocal & also diverge

7. GASAnalysis: Audience issues • Width of audience • Personalized to individual users? • Mass media aimed at wider audience? • Difficult to design for entire world • Creating website that is suitable to users with disabilities improves usability for everyone.

8. GASAnalysis:Scope is critical • What is the subject? • What are the boundaries around the subject? • What’s inside & included? • What’s outside and not included? • How will the user know the boundaries of the Website? • If the scope is • TOO LARGE: you get confused & cannot finished & users get confused as well • TOO SMALL: you may not be able to accomplish your goals

9. Personas & Scenarios Personas: • Archetypal people who will be using product or service • Focus on their behaviors and motivations & not their demographics Scenarios • Stories about what it will be like to use the service or product. • W3C uses scenarios of People with Disabilities using the Web • Http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/Overview.html#usage

10. Sketches & Models for project design • Task Analysis – user & developer goals • Task flows – Site narrative • Use cases • Storyboards showing site hierarchy (Stylin’, p. 236 • Wireframe showing page layout (Stylin’, p. 238 • Prototypes

11. Layout • Grid systems • Rows & columns • gutters or white space between grids let the eye perceive/scan chunks of information • Layout structures, fashions, browser size, liquid or fixed width layout, tables/frames/CSS • Use Wayback machine to look back: • http://www.archive.org/ • http://www.macromedia.com or • http://www.adobe.com

12. Visual Flow • Western cultures: • read from left to right, top to bottom • eye comes in at upper left, goes across, then down • Lines lead eye • Bright colors or high contrast draws eye • Certain iconic images draw our attention. • Need only ONE focal point so eye can stay on it • Positioning of elements important– most important elements at top/center • Objects that are aligned are related • Objects that are below/indented are subordinate • Presidential Candidates Web Site Usability. • http://www.youtube.com/watch?v=5PRHmzZQ4nE

13. Elastic layout width • Use % to define default font size in body style: • body {font-size:90%;} • Use em units to define width • em is the width of the letter “m” in default font – use em unit to define font size and widths and heights of block elements • 1 em = 12 pixels • When default font size increases width of page increases – elastic lawn design • http://www.csszengarden.com/?cssfile=063/063.css • http://www.alistapart.com/articles/elastic/ • Can use % to define width of 2 columns on page #side {float:left; width:26%;} #mainContent {float:right; width:75%;}

14. GUI Design Heuristics • The most important object, idea, should coincide with focal point of display -- the entire design should lead to it. • In Western culture, eye usually begins at upper left • Easiest place to put focal point: the middle • Make it the brightest color, with sharpest contrast to background • Too many focal points mean eye cannot rest

15. Composition: Work first on Black, Grey, & White patterns • Squint at your design (or take off your glasses if you are nearsighted. • Look at the space around the items • Pay as much attention to the blank space as to the items in the space. • Follow the direction the eye follows as it travels around the surface. • Examples of different kinds of layout on following slides

16. Typographic Guidelines • Typefaces for web – How many web fonts – available to browsers on Mac & PC (UDWA, p. 45)? • Sans-serif best for shorter passages of text & text meant to be scanned quickly • Examples of sans-serif fonts? • Size: use relative sizing for accessibility so fonts can be resized. • Alignment: left, NOT justified/right/centered • Avoid “rivers” – what are they? • Avoid widows/orphans • Line length of 55-75 characters • Leading: Line height 20% more than font size

17. When you design, pick the background first • If you use a patterned background, make sure that text is visible on it • If you use a colored background, make sure that text is visible on it http://na.blackberry.com/eng/services/ • Look at Blackberry website • Think of your audience and the types of colors they prefer • Remember -- less is more, you want people to be able to look at your page

18. Readability • Jakob Nielsen’s usability alertbox columns • “How users read on the web” • http://www.useit.com/alertbox/9710a.html • Writing for the Web • http://www.useit.com/papers/webwriting/ • Eye tracking for reading on the web • http://www.useit.com/alertbox/reading_pattern.html • Eyetracking video • http://www.youtube.com/watch?v=bW_zDILeevY

19. Text & Titles: use relative text sizing • Convey content message – • Use correct spelling • Have to fit style, background • Bitmapped text looks better but • it cannot be “searched” as text • it takes up more memory • is harder to revise • Easy to Read to get your message: • Use relative font sizes so viewers can change font size • Contrast values (light & darkness) of Text & background so can be read • Watch out for flicker from complementary colors

20. Backgrounds • Create areas of emphasis • Influences look, balance, location of elements on screen • Fill up empty spaces • Provides context for screen • Background color and wallpaper can be set on web site -- check effects in different browsers & computers • BE CAREFUL that users CAN READ the TEXT! • Text has to be large enough to read • Text has to contrast with background – juicy colour contrast analyser test

21. Visual Design Issues: Composition & Color

22. Color Theory: Use of Color: • Color is a sensation of light that is experienced through sight (on the retina) • Colors are continually changing • Design is determined by patterns of light and dark values – design light/dark patterns first • 12% of males colorblind –design w/that in mind • color blindness tests:http://www.vischeck.com/vischeck/vischeckImage.php • http://colorfilter.wickline.org/ • http://wellstyled.com/tools/colorscheme2/index-en.html • http://www.iamcal.com/toys/colors/ • http://aspnetresources.com/tools/colorblindness.aspx

23. Facts about Color • Light generates color as waves of light energy with different wavelengths measured in nanometers (nm) • Some wavelengths are discrete colors (red=720 nm): • Humans can sense light wavelengths (and the colors they represent) from 380 nm to 720 nm -- only a part of the color spectrum • ROYGBIV (Red, orange, yellow, green blue, indigo, violet) are the discrete colors visible to humans

24. Mixing Colors • Computer displays use Additive Colors: • Mixtures of light waves • Primary colors of light: Red, Green & Blue • Secondary colors of light mixed from the Primary colors: Yellow, Cyan & Magenta • White = equal wavelengths of Red + Green + Blue (fully saturated colors) • Yellow = equal wavelengths of Red + Green • Black = the absence of color • Yellow-Green = 2 parts Green + 1 part Red

25. Color defined by three qualities • hue -- the NAME of the color (e.g., red, blue, green, yellow) • saturation or chroma -- the color's dullness or vividness • value or brightness -- the color's relative lightness or darkness • Definitions of these terms can be found at Definitions of Hue, Saturation and Brightness

26. Why Use Color in a Web Site? • Color is more interesting, exciting, inviting that black & white • Color can provide signals: • problems -- Negative numbers on a spreadsheetare red: $5,000,000 deficit! • ColorsconveyStyle! • Hip colors, sedate colors, serious colors

27. Computers Display Raster Images or Bitmaps • Made up of pixels or dots arranged in grid • x pixels wide, y pixels high, z pixels deep • z is number of possible colors for each pixel • One-bit images have only 2 states: white & black • File size depends on size/resolution of image - but file size depends on compressibility of image--and all images are compressed • Video RAM (VRAM) determines color depth & resolution you can display--trade-offs

28. Indexed & RGB Color • Indexed colors use 256 colors - gifs • Pixel color in image is matched to one of available colors in indexed color palette • RGB format - Full or True color – jpg & png • uses 8 bits (0 to 255) of Red, Green, & Blue values to form a 24-bit pixel (over 16 M colors) • WEBSAFE colors: 216 colors • Netscape reserved 20 colors for itself + 20 other colors for backgrounds & programs

29. RGB • RGB often written in hexadecimal format: • Saturated Red: FF0000 • Saturated Green: 00FF00 • Saturated Blue: 0000FF • Black: 000000 • White: FFFFFF • CLUT (Color Look-Up Table): 216 “Browser-safe” colors

30. Dithering or Texture Mapping • A type of optical illusion • If you put 2 colors next to one another, the human eye automatically combines them into a 3rd color • The way most color printing is done

31. Complementary colors • Lie directly opposite each other on the standard color wheel • Avoid--very difficult to look at for very long - flickers • Red & blue-green • orange & blue • yellow & blue-violet • chartreuse & violet • green & red-violet

32. Different wavelengths of color come into focus at different points in the eye Yellow and green wavelengths • come into focus at the retina • require little accommodation • are just as visible at the periphery as they are in the center of a visual field • Easy to look at for long periods

33. Different wavelengths of color come into focus at different points in eye • Red wavelengths • come into focus a little behind the retina • eyes have difficulty focusing on red • Red font is very hard to read so should be avoided in large quantities • Therefore reds pop out from background • Use to make something pop out

34. Different wavelengths of color come into focus at different points in the eye Blue wavelengths • Come into focus in front of retina • eyes cannot focus clearly on blue • blues seem to fade into the background • blues are a good background color • blues are not a good foreground color

35. Backgrounds changes perception of colors. Do the saturated colors below retain the same hue?

36. Complementary colors change the perception of the color. Red against a shade of itself versus its complement. Notices how the red/green edges flicker

37. Background & complementary colors change perception of color value: which looks darker?

38. Problem: Flicker in complementary colors What does the gray page background do?

39. Potential problems with color • Complementary colors next to each other change each other’s hue • Complementary colors flicker • Contrasting colors create intense edges that draw your attention to edge of image • Colored typeface does not stand out against background.

40. Color Contrast Checkers • Test online: • http://juicystudio.com/services/colourcontrast.php • Download Firefox extension to check font/background colors • http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php • Snook: On-line tool • http://www.snook.ca/technical/colour_contrast/colour.html

41. Perception of Colors • Human visual sense first senses light and dark patterns and shapes, before it perceives colors • Adaptation: The retina adapts to the amount of light -- color is brighter at higher lighting levels • Lateral inhibition: The retina distinguishes dark/light edges -- a dark area next to a light area appears darker than it actually is • Memory Color -- color is learned by experience • We see the color we have learned to see, which means we may perceive an orange we see in dim light as the same color as the orange we see in bright light

42. Color Effects • Colors affect hormonal balances • An elevated red wavelength increases hormone production and raises blood pressure • An elevated blue wavelength depresses hormone production and lowers blood pressure • Symbolic colors • Red usually means what? Blue? Green?

43. Critical Tasks of Presentation Design • Define a visual theme and style • Design a system of screen layouts • cascading style sheets • Design page in Photoshop or Fireworks as a graphic file that you slice into components • Create structural elements for each screen (background, windows, etc.) • Create control elements (buttons, arrows, hyperlinks)

44. Multimedia Style • The content of your project defines the style • Can be serious, fun • Project style must be unified • Background colors, Text, Graphics • But don’t make it too boring! • Unify multiple screens • images, colors, navigational tools may be repeated • Use Page titles to facilitate navigation

45. Next • Week 3 • Monday Accessibility Accessibility quizzes on Blackboard due before class: • ADOBE Bridge & Photoshop • Week 4 • Monday Blackboard quizzes • Wednesday: Project 1 due posted on website, with grading sheets posted to Blackboard assignment & website

46. This week … • Due Wednesday before class: Exercise 1 posted on Blackboard • Wednesday: Start Hands-on Photoshop • Rest of class – learn your names • Pair up with a student you do NOT KNOW in the class • Learn one thing INTERESTING about that student’s name (5 minutes for both of you to do this) • Stand up in pairs and introduce one another to the class, saying the ONE INTERESTING THING you learned about the student’s name