Multimedia Screen DesignMultimedia Screen Design

Lynne KoeneckeApplied Computer ScienceIllinois State University, 1997

Text

place the title for a screen on the top line with at least one blank line before the body of the text

use left justification organize complex information into tables use various type sizes and fonts to emphasize

certain materials and provide variety

Garner (1990)

Text

utilize bold for higher-level information (titles and headings)

avoid hyphens to split words at the end of lines use mixed upper and lowercase letters for

higher legibility and faster reading omit punctuation for abbreviations, mnemonics,

and acronyms

Garner (1990)

http://info.med.yale.edu/caim/manual/pages/typography.html

We read by recognizing patterns:

We read by looking at the tops of words.

http://info.med.yale.edu/caim/manual/pages/typography.html

Type

most guidelines tend to be based on print research

legibility (leading - default is 2pts.) readability

dark letters on a light background are more readable than the reverse

size (10-12 point for print, 14 or 16 for screen)

20 points

72 points = 1 inch

72 pt. Times New Roman

72 pt. Arial

Graphics

Text can be balanced with diagrams or graphics

Graphics: provide information as alternative to text provide sources for questioning and responding illustrate an effect summarize a lesson part

Graphics

enliven a presentation

emphasize a relationship

focus attention

convey a message or concept

Graphics Dos

use simple, clear images use for instruction, motivation or attention-

focusing effects, not for making the screen pretty label all key components consider prior knowledge

avoid sexist, culturally-sensitive and other offensive imagery

obey standard conventions (standard symbology)

Color

The average person is able to distinguish between 10,000 and 20,000 colors

Monitors today can display well into the millions of colors

Color

Additive vs. Subtractive

Inks are subtractive CMYK

Light is additive RGB

Color

Humans see color as HSL (Hue, Saturation, and Lightness) Hue

basic component of color

Saturationpurity of hue

Lightnessamount of light reflected

Color

Color adds accents Can add memory and enhance information

understanding Enlivens and informs the user Makes displays attractive and emotionally

appealing Views usually better understand when viewing

color vs. monochrome

Color

links logically-related data differentiates between required and optional

data highlights student errors separates various screen areas

prompts, commands, input/output fields

emphasizes key points communicates overall structure

Rambally and Rambally (1987) and Strickland and Poe (1989)

Color

use a maximum of 3-6 colors per screen be consistent in color choices within a program use the brightest colors for the most important

information use bright colors to cue the learner for new

information use a neutral gray as a background

gray recedes optically

Bailey & Milheim, 1991

Color

use significant contrast between text and a background color to provide a higher degree of text readability

avoid the use of complementary colors blue/orange red/green violet/yellow

There was a cool breeze.

There was a cool breeze.

There was a cool breeze.

Color

use commonly accepted colors for particular actions (remember these may only be culture specific)

red for stop or warning yellow for pause or consideration green for go or proceed

Color

Backgrounds cool, dark, low-saturation colors recede on the screen

olive green, gray, blue, brown, dark purple, black, etc.

Foregrounds brighter colors come forward on the screen

lemon yellow, pink, orange, red, etc.

Color

Light colors give impressions of large sizes light weights tall heights close distances

Dark colors give impressions of small sizes heavy weights short heights far distances

Color

Changes in color to signify changes (small and large) blue to green signifies a small change blue to orange signifies a large change

Being Careful With Color

If colors are not appropriately used or the designer uses too many colors, we can create visual noise (1+1 = 3)

“Above all, do no harm” Tufte (1990) too much color is distracting

Let’s Use Every Color

This software is great. I can use lots of colors. Let’s not waste these colors. What is your favorite color? Graphics have lots of colors!

Problems With Color

Color blind users It is estimated that over 2% of the population

have some sort of sensitivity to color reception Most common is not color blindness, but color

weakness1% of the population is weak in perception of red5% of the population is weak in perception of greenup to 15% of the population has some kind of color

deficiency

Problems With Color

Color insensitivity solutions Instead of using different hues, use different

saturations or different levels of lightness

Don’t use bright red and bright green, use bright red and pale green

Use consistent shapes in addition to color

Problems With Color

Problem colors The eye cannot precisely focus on all colors

togetherRed and Blue can’t be focused on together this

causes eye strain

The center of the retina has virtually no blue receptors

small blue objects almost disappear when we try to focus on them

Blue type on red is hard to read. It causes eyestrain.

Problems With Color

Problem color solutions Avoid pure, saturated colors at opposite ends of

the spectrum

Don’t use blue for fine lines and text

Responding to Color

Not everyone responds to color the same

cultural differences

gender

age

occupational differences

Responding to Color

cultural differencesIn Japan, green implies youth in energy, but in

France it connotes criminalityIn the US, yellow stands for caution, while it

signifies happiness and prosperity in Egypt

genderSeveral studies show differences in color perception

between males and females

Responding to Color

ageOlder people prefer bright primary colors

– it is thought that color acuity declines with age

Children are not able to use color coding as quickly as adults

Responding to Color

occupational differencesBlue

– represents corporate reliability to financial managers (as in “Big Blue” IBM)

– represents death to health care professionals (as in “code blue”)

Red– represents danger to process control engineers– represents healthy to health care professionals