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/pro
  j1grade.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
GAS Analysis 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
GAS Analysis Scope is critical

• What is the subject?
• What are the boundaries around the subject?
• Whats inside included?
• Whats 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/Overvi
  ew.htmlusage

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?v5PRHmzZQ4nE

13
Elastic layout width

• Use to define default font size in body style
• body font-size90
• 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/?cssfile063/063.css
• http//www.alistapart.com/articles/elastic/
• Can use to define width of 2 columns on page
• side floatleft width26
• mainContent floatright width75

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 Nielsens 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?vbW_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 testshttp//www.vischeck.com/vis
  check/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.as
  px

23
Facts about Color

• Light generates color as waves of light energy
  with different wavelengths measured in nanometers
  (nm)
• Some wavelengths are discrete colors (red720
  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!
• Colors convey Style!
• 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 others 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-ana
  lyser-firefox-extension.php
• Snook On-line tool
• http//www.snook.ca/technical/colour_contrast/colo
  ur.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 dont 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 students
  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 students name