Design

Good design is good because of its fitness to a particular user fitness to a particular task

In general, you are not your user! Our class will stress user centered

design.

User and Task Analysis

Identifies Characteristics of the potential user

population(s), e.g. demographics, domain knowledge.

Goals that the user wants to accomplish. Tasks that the users perform.

May identify Mental models. Familiar metaphors.

RGB Color

Beautiful Color Scheme???

For a given lens curvature, longer wavelengths have a longer focal length Red is the longest focal length Blue is the shortest.

Since to have an image focused on the retina, the lens curvature must change with wavelength with red light requiring the greatest curvature and blue light the least curvature.

Derived Color Guidelines

Avoid the simultaneous display of highly saturated, spectrally extreme colors.

Pure blue should be avoided for text, thin lines, and small shapes.

Avoid adjacent colors that differ only in the amount of blue.

Older operators need higher brightness levels to distinguish colors.

Colors change in appearance as the ambient light level changes.

Derived Color Guidelines

The magnitude of a detectable change in color varies across the spectrum.

It is difficult to focus upon edges created by color alone.

Avoid red and green in the periphery of large displays.

Opponent colors go well together. For color-deficient observers, avoid single

color distinctions.

Proximity

The principle of proximity states that people tend to perceive items that are located close together as being related.

A B C D

Alignment

People perceive items that appear along a virtual line as being related.

Using indentation to show hierarchy is an instance of using alignment.

Consistency

Consistency means a high degree of uniformity in layout with in a page and uniformity in layout across pages.

Contrast

Items that look different will be perceived as different.

535 pixels

670 pixels

600 pixels

350 pixels

13-15 inch screen(640x480 pixels)

Browser safe area (600x350) or for (800x600) safe is (760x420)

•Use blue dimensions to fill the maximum safe area on most screens.

•Use red dimensions for pages that will print well.

Safe dimensions for Web page graphics

Layout

Text on the Computer Screen

Hard to read. Because of the low resolution of

computer screens. Because the lines of text in most web

pages are much too long to be easily read.

Text on the Computer Screen

Magazine and book columns are narrow for physiologic reasons. At normal reading distances the eye's

span of movement is only about 8 cm (3 inches) wide.

Designers try to keep dense passages of text in columns no wider than reader's comfortable eye span.

Text on the Computer Screen

Most web pages are almost twice as wide as the viewer's eye span Extra effort is required to scan through long

lines of text To encourage your web site users to read a

document online, shorten the line length of text blocks to about half the normal width of the web page.

Suggestions for Body Type

For body text, use Georgia or Verdana Trebuchet is also screen friendly (sans

serif) Use 12 pt type

10 point is ok if you know your users have Georgia or Verdana. But if they don’t and it defaults to 10 pt Times Roman – that is too small.

Suggestions for Body Type

Use Roman, not Italic or Bold for body text style.

Use upper case only for first words of sentences, proper names, etc ALL CAPS IS HARD TO READ

Use a maximum line length of 5 inches Shorter is better

Suggestions for Body Type

Use two point of leading between lines unless its already there

Use left alignment Don’t use underlining for emphasis

(Users might assume the underlined word is a link.)

Suggestions for Display Type

Use any size that fits Use any typeface that is legible Use the line height attribute for

control of line spacing to get the effect you want (touching or spread widely)

Use letter spacing and word spacing to get the effect you want.

Suggestions for Display Type

Use kerning to make display type look right Web

Don’t use animated text Users hate it. Some develop animation

blindness where they don’t see the moving text assuming it is an advertisement.

Back up your work

Disks and computers will fail. Don’t trust them. Version control.