step 3: continue…. grouping aids in establishing structure and meaningful form in addition to...
TRANSCRIPT
![Page 1: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/1.jpg)
Step 3: Continue…
![Page 2: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/2.jpg)
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.
![Page 3: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/3.jpg)
Grouping The perceptual principles of
proximity closure similarity matching patterns
foster visual grouping.
![Page 4: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/4.jpg)
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.
![Page 5: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/5.jpg)
Visual Organization Creates Functional Groupings Proximity: 0000 0000
0000
Similarity: AAABBBCCC
Closure: [ ] [ ] [ ]
Matching patterns: >> < >
![Page 6: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/6.jpg)
Combine Visual Organization Principles in Logical Ways Proximity & similarity:
AAA BBB CCC Proximity & closure: [ ] [ ] [ ] Matching patterns & closure ( ) < > { }
![Page 7: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/7.jpg)
Combine Visual Organization Principles in Logical Ways (2) Proximity and ordering:
1234 1 52 6
5678 3 74 8
![Page 8: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/8.jpg)
Avoid Visual Organization Principles that Conflict
Proximity opposing similarity:AAA ABB BBC
CCC
Proximity opposing closure:] [ ] [ ] [
![Page 9: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/9.jpg)
Avoid Visual Organization Principles that Conflict (2)
Proximity opposing ordering1357 1 2
3 42468 5 6
7 8
![Page 10: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/10.jpg)
Groupings
Functional groupings
Evenly space controls within a grouping
Visually reinforce groupings
![Page 11: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/11.jpg)
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.
![Page 12: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/12.jpg)
Grouping: Backgrounds A common failing of many screens
is the background being too highly emphasized.
![Page 13: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/13.jpg)
Grouping Using Borders
Use line borders to: focus attention guide eye through screen
Limits 3 line thicknesses 2 line styles
Consistent line height & length
![Page 14: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/14.jpg)
Grouping by Background
Can use contrasting background background should still be in
‘background’
25% grey screening
higher contrast for components needing attention
![Page 15: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/15.jpg)
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%
![Page 16: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/16.jpg)
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.
![Page 17: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/17.jpg)
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
![Page 18: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/18.jpg)
Meaningful Ordering Conventional Sequence of use
Address Frequency of Use Function…
![Page 19: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/19.jpg)
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.
![Page 20: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/20.jpg)
Text -Fonts Bitmapped text
Predefined size weight
![Page 21: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/21.jpg)
Text - Fonts Outline (vector) Fonts
Page Description Language (PDL)
PostScript TrueType
Scalable
![Page 22: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/22.jpg)
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.
![Page 23: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/23.jpg)
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.
![Page 24: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/24.jpg)
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.
![Page 25: Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:](https://reader036.vdocument.in/reader036/viewer/2022070415/5697bf8c1a28abf838c8bab0/html5/thumbnails/25.jpg)
Cross-platform font sizes