step 3: continue…. grouping aids in establishing structure and meaningful form in addition to...

Step 3: Continue…

Grouping Aids in establishing structure and

meaningful form In addition to providing aesthetic

appeal, grouping has been found to: aid recall result in a faster screen search

(Tullis) grouping is the strongest determinant of a screen’s visual search time.

Grouping The perceptual principles of

proximity closure similarity matching patterns

foster visual grouping.

What constitutes a group? An objective method for establishing groups

Using the Gestalt psychologists’ law of proximity Compute the mean distance between each character

and its nearest neighbor. Use a character distance of 1 between characters adjacent horizontally and 2 between characters adjacent vertically (between rows).

Multiply the mean distance derived by 2. Connect with a line any character pair that is closer

than the distance established in the step above.

Visual Organization Creates Functional Groupings Proximity: 0000 0000

0000

Similarity: AAABBBCCC

Closure: [ ] [ ] [ ]

Matching patterns: >> < >

Combine Visual Organization Principles in Logical Ways Proximity & similarity:

AAA BBB CCC Proximity & closure: [ ] [ ] [ ] Matching patterns & closure ( ) < > { }

Combine Visual Organization Principles in Logical Ways (2) Proximity and ordering:

1234 1 52 6

5678 3 74 8

Avoid Visual Organization Principles that Conflict

Proximity opposing similarity:AAA ABB BBC

CCC

Proximity opposing closure:] [ ] [ ] [

Avoid Visual Organization Principles that Conflict (2)

Proximity opposing ordering1357 1 2

3 42468 5 6

7 8

Groupings

Functional groupings

Evenly space controls within a grouping

Visually reinforce groupings

Grouping: spacing vs. color Spacing appears to be stronger

than color. Grouping using white space.

A carry over term from the white paper of printed forms.

Grouping: Backgrounds A common failing of many screens

is the background being too highly emphasized.

Grouping Using Borders

Use line borders to: focus attention guide eye through screen

Limits 3 line thicknesses 2 line styles

Consistent line height & length

Grouping by Background

Can use contrasting background background should still be in

‘background’

25% grey screening

higher contrast for components needing attention

Amount of Information Presented

Proper amount for task Too little is inefficient Too much is confusing

All needed information for action or decision on one screen Should not have to remember from

one screen to the next Restrict density level to about 30%

Density Overall Density is a measure of the

percentage of character/images on the entire screen containing data. (Danchak) density should not exceed 25%

Local Density is a measure of how “tightly packed” the screen is. (see page 118)

Studies have shown that increasing the density of a display increases the time and errors in finding information.

Meaningful Ordering Provide an ordering elements that:

Is logical and sequential Is rhythmic Encourages natural movement

sequences Locate the most important and most

frequently used elements or controls to the top left

Maintain top-to-bottom, left-to-right

Meaningful Ordering Conventional Sequence of use

Address Frequency of Use Function…

Eye Movement From dark areas to light areas From big objects to little objects From unusual shapes to common

shapes From highly saturated colors to

unsaturated colors.

Text -Fonts Bitmapped text

Predefined size weight

Text - Fonts Outline (vector) Fonts

Page Description Language (PDL)

PostScript TrueType

Scalable

Text Guidelines Headings, credits, descriptions, key

points Things to consider:

Keep it simple, Don't use jargon Generally, you should use a maximum of

three typefaces in a maximum of three points sizes.

Text should be set in appropriate formats, that is, set text flush left, set numbers flush right, avoid centered text in lists, and avoid short justified lines of text.

Text Guidelines For fixed-width fonts, justified lines of text

can slow reading speed by 12 percent. Use uppercase and lowercase characters

whenever possible, that is, avoid all capital lines of text, which can also slow reading by 12 percent.

Words set in all capitals use up to 30 percent more space for variable-width letters and retard reading speed by 12 percent.

Text Guidelines Studies have shown a slightly greater

legibility in serif type, but this status can easily be offset when the font size is to small.

Keep your text simple and non distracting. Strive for clarity. Avoid the first person. Keep it brief. Keep the message short.

Cross-platform font sizes