1

Lecture 8

Guidlines for Effective Design

2

User Analysis: what do you need to know about the users?

Task Analysis: What are the user’s goals? What tasks do they perform?

Environment analysis: What are the user’s surroundings and what effect do they have on performing a task?

Know your User

3

Know your User

Age Sex Culture Physical abilities and disabilities Educational background Computer experience …

4

Know your User

Age (use larger fonts for older people)

Color blindness (be careful about color preferences)

5

Big buttons for little people

6

High-fashion cosmetics have a style

7

A bank site has a very different style

8

Task Analysis: Overview

Goals, tasks, and actions

Scenarios and Use Cases

Techniques for observing and listening to users

9

Goals, tasks, actions : terminology

Goal = external task, such as producing a letter

Tasks = activities necessary to achieve goals using a device

Actions = simple tasks

10

Scenarios and Use Cases

Stories about the use of computer system.

Compile a list of tasks of users.

Describe the tasks by writing scenarios and use cases.

11

Techniques for observing and listening to users

Think aloud: talk while doing the job Talk right after Role playing Cueing recall with videotape Focus groups Surveys

12

Environment Analysis Where do people use your interface? Many

variations:• An outdoor ATM in a cold location where people

wear gloves while using it (need huge buttons)• On a combination cell phone/wireless browser,

with a tiny display (need tiny fingers!)• In a location where direct sun can hit your display,

making it hard to read• In an extremely noisy factory, where any sound

you add would be impossible to understand Observe your users in their own setting

13

General Design Principles

High-Quality content Often updated Minimal download time Ease of use Relevant to user’s need Unique to the online medium Net-centric corporate culture

HOME RUN

14

High-Quality content

Provide the information or functionality that your target user want.

Otherwise, they will never visit your site again. Ex: car selling site: current price, availability,

delivery time, …

15

Often updated

Most sites need to be updated regularly. The frequency of update will vary according to the

nature of the site. Examples:

• A news site need to be updated many times in a day.• An online encyclopedia needs to be updated rarely.

16

Minimal download time

Slow-to-download web pages cause user frustration.

These sites contain large and unnecessary images or animations.

Such sites are likely to be unpopular with users.

17

Ease of use

Users need to be able to find the information or services they need quickly and easily.

18

Relevant to user’s need

Your site must allow the user to carry out the tasks they want to perform.

For example, it should be easy to compare the features of different cars on the same screen.

Be imaginative about the way in which users will want to use

19

Unique to the online medium

Why use a web site? Web sites should provide some additional

benefits.

20

Net-centric corporate culture

With a competitive environment that currently exist, a good web site could be the difference between success and failure.

21

Common Mistakes in Web Design

Overly Long Download Times Outdated Information Non-Standard Links (Colors) Lack of Navigation Support Long Scrolling Pages Orphan Pages Complex URLs Scrolling Text, Marquees, and Constantly Running Animations Unnecessary use of Bleeding-Edge Technology Cumbersome Forms Browser Incompatibility

22

Some Tips to Improve your Design

23

Capabilities of Human Beings

Our brains do not create pixel-by-pixel images

Our minds create, or construct, models that summarize what comes from our senses

These models are what we perceive (mental model)

When we see something, we don’t remember all the details, only those that have meaning for us

24

Capabilities of Human Beings

When people try to understand something, they use a combination of• What their senses are telling them• The past experience they bring to the situation• Their expectations

25

An example of context: are these letters the same?

26

Well, yes, but now in context:

27

Memory

Hierarchical Model

Sensory

Short Term

Long Term

•Transient repository•Very limited capacity•Very volatile

•Intermediate layer•Limited capacity•Volatile

•Unlimited•Practice and effort needed to transfer data

28

“The Magic Number 7, Plus or Minus 2” George Miller, 1956

Value of “ chunking”• 2125685382 vs. 212DanHome• 10 chunks vs. 3 (assuming 212 is familiar)

Can you remember:• Vsdfnjejn7dknsdnd33s

Short-term memory is capable of storing 7 ± 2

29

How many chunks in . . .

www.bestbookbuys.com 20? Not really:

• www.• best• book• buys• .com

30

Recognition vs. recall

Why is a multiple choice test easier than an essay test?• Multiple choice: you can recognize the answer• Essay: you must recall the answer

A computer with a GUI allows us to recognize commands on a menu, instead of remembering them as in DOS and UNIX

31

Memory aids

Post-It® notes In Windows

• ctrl- N (new)• ctrl- C (copy)• ctrl- S (save)

Favorites List and bookmarks to store URLs Hyperlinks—if their wording indicates the

content of the target page. (“Click here” is not a memory aid.)

32

Interruptions

Focusing attention and handling interruptions are related to memory

In website design you need to give cues or memory aids for resuming tasks:• Back button• Followed links change color• When filling in forms, blank boxes show where

to pick up the job

33

Interruptions, continued

How fast must a system respond before the user’s attention is diverted? (Robert Miller, 1968)

Response time User reaction

< 0.1 second Seems instantaneous

< 1 sec Notices delay, but does not lose

thought

> 10 sec Switches to another task

34

Metaphors

Way to relate a difficult or more abstract concept to a familiar one• Open file

• Save file

35

Metaphors have problems

Disadvantage: metaphor may not be widely known or correctly understood

36

Affordance

Affordance: “The functions or services that an interface provides”• A door affords entry to a room• A radio button affords a 1-of-many choice• On a door, a handle affords pulling; a crash bar

affords pushing

37

Perceived affordance

We want affordance to be visible and obvious to the user• The Up and Down lights on an elevator door

should have arrows, or they should be placed vertically so that the top one means Up

• On a car, turning the steering wheel to the left makes the car go left

38

Example of perceived affordance

Top switch controls top lights

By convention, with a light switch “up” is “on”

39

Figure and ground

Images are partitioned into • Figure (foreground) and• Ground ( background)

Sometimes figure and ground are ambiguous

40

Figure and ground: What do you see?

41

Design Guidelines for the Web

Lessen burden on user’s memory:• Use recognition instead of recall• Help users chunk information• Require as little short-term memory as possible• ….

Consider user’s mental models

42

Design Guidelines for the Web

Organize things into meaningful units Make chunks Use recognition instead of recall Give memory aids (hint, back, history, favorites, color

changes, black boxes for text entry, etc.) Use metaphors and visual clues (icons, windows,

menus, etc.) Function or service of a user interface item should be

obvious and visible. Use methods to focus attention Foreground and background should be clear Provide feedbacks

43

Controlled vocabulary

Predetermined set of terms that describe a specific domain

There are no synonyms Only one term describes a concept Can help combat the ambiguity of English

44

Thesaurus

Contains • Synonyms • Broader terms • Narrower terms • Variants

Used in conjunction with a controlled vocabulary, makes searching more effective

45

Color

46

Color Models

An artist’s color wheel: red, yellow, and blue (RYB)

Additive color: red, green, blue (RGB) Subtractive color: cyan, magenta, yellow,

and black (CMYK) Hue, saturation, and brightness (HSB)

47

The artist’s model: red, yellow, and blue

48

An artist’s color wheel

49

Additive color: things that emit light, especially monitors (RGB)

50

In additive color . . .

Red + Green = Yellow Red + Blue = Magenta Green + Blue = Cyan

51

Subtractive color: things that reflect (and selectively absorb) light (CMYK)

52

HSB: Hue, Saturation, and Brightness

Hue: where a color lies around a color wheel: red, green, yellow, blue-green, etc.

Saturation: the “purity” of a color; a fully-saturated color has no white mixed with it, in paint terms

Brightness: light, dark, or in between? In everyday use, most people probably are

thinking of hue when they speak of color

53

The color cone: hue, saturation, and brightness in relation to each other

54

Varying saturation, with brightness held constant

55

Varying brightness, with saturation held constant

56

Four Color-Harmony Schemes

Monochromatic: colors of same or similar hue, differing in brightness and/or saturation

Complementary: colors approximately opposite each other on a color wheel

Analogous: colors adjacent to each other, from any segment of a color wheel

Triadic: three colors approximately equally spaced around a color wheel

57

Monochromatic color harmony: colors of same hue, differing in brightness and/or saturation

All blue All orange

58

Monochromatic example: orange, with variation in brightness and saturation

59

Complementary: red and green

60

Analogous: bright orange, darker yellow-orange, light yellow

61

Triadic: red, yellow, blue

62

Triadic: red, yellow, blue

63

Interlude: color harmony in nature

64

Fully-saturated orange, against its complement, green

65

A dark color can be highly saturated

66

Nearly saturated yellow-orange against a background of unsaturated blues and greens

67

Low-saturation colors can be beautiful

68

Medium-high saturation magenta; low saturation greens

69

High saturation orange; medium saturation complementary greens

70

Complementary colors

71

Monochromatic

72

Monochromatic

73

Three pairs of complementary colors (complements don’t have to scream)

74

But they can scream, if you wish (It’s called a clash—gets people’s attention)

But don’t do this casually—the clash can be almost painful; you need to have a reason to do it

75

A triadic can shout . . .

76

. . . or whisper . . .

77

. . . or speak conversationally . . .

78

. . . or let others talk . . .

Big Important Words

Nice words, but not headline-type words. Text. The story, now that I have your attention.

79

End interlude

End of Interlude

And that is what we have time for, in exploring another way of looking at color harmony. Try it! Think about the color combinations that work, and experiment with variations of them.

80

Text and background colors for legibility

Rule #1: Provide adequate contrast Rule #2: But not too much, and for extended

use, black on white is too much contrast Rule #3: Dark on light is better than light on

dark, for text Rule #4: There are no other rules

81

Text in a dark color on its complement in a light color works nicely

Color is one of the pleasurable aspects of eyesight and is an integral part of Web pages. Properly used, color makes a page both attractive and usable. It can provide cues that indicate a button’s function or state. It can distinguish between navigational aids and content, unobtrusively guiding the user through a page. This chapter presents some color basics and design tips to enhance both the effectiveness and appeal of a Web site.

82

A great many combinations are possible

In this lecture you will do the following: understand physical and perceptual aspects of

color become aware of several color models and learn

the advantages of each learn to apply four different color harmony

schemes explore how color can make Web pages pleasing

and easy to read

83

Even a little color in the background makes text easier to read

It is rare that the color choices for Web pages are left entirely in the hands of a developer or designer. In most cases, the client will already have some colors in mind, based on a corporate logo, a school insignia or personal preference. Color harmonies provide options for choosing colors that are compatible with the client’s wishes. Applying guidelines for text and background color will foster readability. Finally, using color to organize text and focus attention will result in easier navigation.

84

Now, for comparison, here is what black on white looks like

There is quite a bit of overlap in the response curves. The peak sensitivities for the first and second types are actually in the yellow range. There is a big disparity in the height of the three curves. This is due to the fact that human eyes are most sensitive in the green range of the spectrum and are dramatically less sensitive in the blue range.

Black on white may not look too bad here. But suppose you sat at a monitor six hours a day. Wouldn’t you prefer a pastel background? And text that is dark but not black?

85

But do provide adequate contrast

Offer expires 07/31/03. Offer available to new High Speed Internet subscribers only. May not be used in conjunction with any other offer. Service is not available in all areas. Certain taxes and fees may apply. DSL: Offer requires a 12 month subscription. First six months will be billed at $29.95 per month, 49.95 thereafter. Early termination fees apply. Includes Standard DSL Installation Kit. Does not include shipping and handling charges. Additional equipment may be required.

86

Text and Background

color R G B

Not good

Text yellow 255 255 0

Background white 255 255 255

Difference no no yes

color R G B

Good

Text brown 64 64 0

Background white 255 255 255

Difference yes yes yes

87

Always remember how we perceive blue vs. red and green

Below is the same text as on the previous slide, except pure blue instead of pure yellow. According to Adobe they both have 100% brightness, and according to Microsoft they both have luminance of 128. But that it not how we perceive them.

Offer expires 07/31/03. Offer available to new High Speed Internet subscribers only. May not be used in conjunction with any other offer. Service is not available in all areas. Certain taxes and fees may apply. DSL: Offer requires a 12 month subscription. First six months will be billed at $29.95 per month, 49.95 thereafter. Early termination fees apply. Includes Standard DSL Installation Kit. Does not include shipping and handling charges. Additional equipment may be required.

88

Don’t use red on blue or vice-versa

Blue has the shortest wavelength of visible light and red the longest. Blue is refracted more strongly than red in our lenses. (Compare with what a prism does to white light.) Result: our eyes can’t focus on red and blue at the same time, and the boundary seems to vibrate. It gets painful.Camera lenses deal with this by using lens components with different indexes of refraction, to produce an achromatic lens, so that red and blue both focus at the focal plane. Our eyes don’t work that way. This hurts.

89

Never use bright red on bright green or vice-versa

Red on green also hurts the eyes. I refuse to show any more of it!

90

Typography

How to design typography for the Web that is readable, effective,

and attractive ?

91

Concepts and Terminology

92

A sans serif font, Arial

93

What does the size of a font mean?

94

Some text with reduced line spacing, to show what happens without the “little bit”

95

Times New Roman, 10 point, with 1pt leading and with 3pt leading

96

Times New Roman and its screen-friendly cousin Georgia—in same font size

97

Times New Roman and Georgia

98

Six sans serif fonts

99

Arial and its screen-friendly cousin Verdana—in same font size

Arial 16Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The English use of the name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).

Verdana 16Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Tom Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft's typography group. The English use of the name “Verdana” is based on a mix of verdant (something green, as in the Seattle area and the Evergreen state, Washington), and Ana (the name of Howlett's eldest daughter).

100

Courier New and Times New Roman

Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise.

101

A bit of C++ code in Courier

102

In Times New Roman the same thing seems strange—to a programmer

103

Nuptial Script

104

Webdings

105

The Greek alphabet in the Symbol font

106

A Web Page is Not a Printed Page

Some things a Web designer can’t be sure of: The resolution of the user’s monitor The size of the user’s browser window The text size: users can change it The settings and quality of the user’s monitor, in

terms of brightness, contrast, and color balance The fonts available to a user Very different from print design!

107

Text in graphics

What if you want to use a font your users probably don’t have? Answer: make a graphic of it

With a drop shadow

108

Guidelines: Body Type on the Web

Use Georgia or Verdana Use 10 point or 12 point type Avoid bold or italic in body type, except for a

few words for emphasis Use upper case only for the first word of

sentences, proper names, etc. Use left alignment Use dark text on a light background Never use underlining for emphasis

109

Guidelines: Header type on the Web

Big is beautiful Use any typeface that is legible—if your users

have it; insert as a graphic if they don’t Use the HTML line-height attribute for control

of line spacing Use HTML letter spacing and word spacing to

get effects you want Don’t use any form of animation of text—ever

110

End of Lecture 8