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: 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:

Avoid Visual Organization Principles that Conflict Proximity opposing similarity: AAAABBBBCCCC Proximity opposing closure: ] [] [ ] [

Avoid Visual Organization Principles that Conflict (2) Proximity opposing ordering

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