Visual Structure

1
Visual Structure
This material has been developed by Georgia Tech
HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley,
Diane Gromala, Elizabeth Mynatt, Jeff Pierce,
Colin Potts, Chris Shaw, John Stasko, and Bruce
Walker. Comments directed to foley_at_cc.gatech.edu
are encouraged. Permission is granted to use with
acknowledgement for non-profit purposes. Last
revision October 2003.
2
Agenda

• Gestalt
• Clarity
• Consistency
• Hierarchy
• Balance
• Grids
• Contrast
• Textures
• Evaluating

3
Gestalt Principles

• Proximity
• Similarity
• Common fate
• Closure

4
Gestalt Good Continuation

• In each example, we give the left overlapping
  objects the
• center interpretation, not the right-most
  interpretation

5
Gestalt Good Continuation

• In each example, we give the left overlapping
  objects the
• center interpretation, not the right-most
  interpretation

6
Combining Gestalt Principles

• Several Principles can be combined
• Proximity reinforces similarity
• Proximity reinforces closure
• Proximity opposes closure

7
Gestalt Use Visual Structure to Reinforce
Logical Structure

• Proximity reinforces alphabetization

ATE GET BAT GOT BIT HAT CAT HIT DOG HOT EAT LAP FA
R MAP FAT PAT
ATE BAT BIT CAT DOG EAT FAR FAT GET GOT HAT HIT HO
T LAP MAP PAT
8
Gestalt Use Visual Structure to Reinforce
Logical Structure

• Proximity counters alphabetization

ATE BAT BIT CAT DOG EAT FAR FAT GET GOT HAT HIT HO
T LAP MAP PAT
9
Gestalt Use Visual Structure to Reinforce
Logical Structure

• Even more.

ATE BAT BIT CAT DOG EAT FAR FAT GET GOT HAT HIT HO
T LAP MAP PAT
10
Gestalt Grouping

• No visual structure

• Visual structure by grouping indentation
  (common fate)

Rotate X Rotate Y Rotate Z Zoom In Zoom Out
Rotate X Y Z Zoom In Out
11
Gestalt Grouping

• Even more visual structure

Rotate X Y Z Zoom In Out
12
Gestalt Dialogue Box Example
13
Gestalt Dialogue Box Example
14
Gestalt Dialogue Box Example
15
Gestalt Dialogue Box Example
16
Gestalt Dialogue Box Example

• Weak visual structure

17
Gestalt Dialogue Box Example

• Strong visual structure

18
Gestalt Closure Allows a Spartan Display to
Convey Structure

• placeholder for images

19
Gestalt Proximity

• Items close together appear to have a
  relationship
• Distance implies no relationship

Time
Time
20
Gestalt Proximity to Create Structure
Name
Name
Name
Addr1
Addr1
Addr1
Addr2
Addr2
Addr2
City
City
City
State
State
State
Phone
Phone
Phone
Fax
Fax
Fax
21
Gestalt Use of Proximity to Form Structure
Aids Data Entry Speed

• 171 343 735 vs 171343735
• 20 25 54 83 28 vs 2025548328

McCormick, Human Factors in Engineering and
Design, McGraw Hill, 1976
22
Gestalt Application of Principles to Screen
Format

• Before

PART NUMBER FILE MISCELLANEOUS BRACKETS PART
0926431X LH BRONZE STUD BRACKET GROUP B BUDGET
GROUP 2413 CLASS R SUB-ACCOUNT 92 UNITS
DOZENS DEPRECIATION PERIOD 15 ACTION______ PRODUCT
STATUS NOT YET ALLOCATED ADDITION DATE 1 DEC
75 F. BRIGGS DES 9 LAST AMENDED 14 MAY 75 R.
SMITH PROC 11 DELETION DATE NONE MAIN
SUPPLIER J. BLOGGS SON, ROTHERHAM
T. Stewart, Displays and the Software Interface,
Applied Ergonomics, 1976, pp. 137-146
23
Gestalt Application of Principles to Screen
Format

• After

PART NUMBER FILE MISCELLANEOUS BRACKETS PART
0926431X LH BRONZE STUD BRACKET GROUP B BUDGET
GROUP 2413 CLASS R SUB-ACCOUNT 92 UNITS
DOZENS DEPRECIATION PERIOD 15 ACTION______ PRODUC
T STATUS NOT YET ALLOCATED ADDITION DATE 1 DEC
75 F. BRIGGS DES 9 LAST AMENDED 14 MAY 75 R.
SMITH PROC 11 DELETION DATE NONE MAIN
SUPPLIER J. BLOGGS SON, ROTHERHAM
24
Gestalt Application of Principles to Screen
Format

• Even Later.

Part Number File Miscellaneous Brackets Part
0926431X LH Bronze Stud Bracket Group B Budget
Group 2413 Class R Sub-account 92 Units
Dozens Depreciation Period 15 Action______ Produc
t Status Not Yet Allocated Addition Date 1 Dec
75 F. Brigs Des 9 Last Amended 14 May 75 R.
Smith Proc 11 Deletion Date None Main
Supplier J. Bloggs Son, Rotherham
25
Using Gestalt Principles is REALLY Important

• Use visual structure to reinforce the underlying
  logical structure

26
Principle Clarity

• Every element in an interface should have a
  reason to be there. Make that reason clear!
• Less is more form follows function
• Dont use clip art cliches, like gratuitous 3D
  buttons every decision should descend directly
  from your concept and metaphor, not because it is
  a standard default or because you just like it

27
Clarity

• White space (blank space)
• Directs the eye
• Provides balance through its use
• Strengthens impact of message
• Allows eye to rest between elements of activity
  
• Increases legibility, clarifies hierarchy
• Used to promote simplicity and elegance

28
Clarity

• Economy of Visual Elements
• Minimize borders, heavy outlining, section
  boundaries
• Use white space instead
• Reduce clutter
• Minimize the number of controls

29
Clarity via White Space

• White space

30
Clarity via White Space

• White Open

31
Clarity
32
Clarity via White Space Example

• Too much white space
• Do simple redesign
• Fonts?
• Weak gridding
• placeholder

33
Clarity via White Space Example

• Caused by underpopulated information space and
  graphic design problem
• placeholder for figure

34
Principle Consistency

• Be consistent in every aspect
• In layout, color, images, icons, typography, text
• Within screen, across screens
• Stay within metaphor everywhere
• Platform may have a style guide follow it!

35
Inconsistent Visual Design

• Sports Flash has no icons
• Other five screens on the same level do
• placeholder for images

36
Inconsistent Visual Design

• Inconsistent icon placement
• placeholder for image

37
Inconsistent Structure Example

• Multiple paths from 4 screens
• No way back from Sports Flash
• Keyword Grandstand
• placeholder for figure

38
Inconsistency

• Result when local and global designs arent
  balanced
• Color Palette conflict
• Conflict between local and global design
• placeholder for figure

39
Inconsistent Use of Graphical Elements to Depict
Logical Structure

• Icons used with list items
• placeholder for figure
• Icons NOT used with list items
• placeholder for figure

40
Principle Hierarchy

• What are the relative levels of importance?
• What should the user see first? Second?

41
Hierarchy

• What are the relative levels of importance?
• What should the user see first? Second?
• Remember this one!

42
Hierarchy

• What are the relative levels of importance?

43
Hierarchy
44
Typographical Hierarchy
45
Typographical Hierarchy plus Indentation
46
Principle Balance

• Good example
• placeholder for figure
• Bad example
• placeholder for figure

47
Principle Grids

• Western world
• Start from top left
• Allows eye to parse display more easily

48
Grids

• (Hidden) horizontal and vertical lines to help
  locate window components
• Align related things
• Group items logically

49
Grids Examples
50
Grid Alignment

• Grid the invisible, underlying structure of a
  site
• Grid essential you must use one

51
Grid Aligment

• Grid the invisible, underlying structure of a
  site
• Grid essential you must use one

52
Grid Alignment

• Grids
• Help locate window components
• Align related things
• Group items logically
• Minimize number of controls, reduce clutter

53
Grid Alignment

• Grids
• Help locate window components
• Align related things
• Group items logically
• Minimize number of controls, reduce clutter

54
Grid Example
55
Grids

• Good example
• placeholder for figure
• Bad example
• placeholder for figure

56
Example Balance/Proximity/Grids

• Too many icons
• Unclear what is hot
• Is balanced
• Weak gridding
• placeholder for figure

57
Principles Contrast

• Pulls you in
• Guides your eyes around the interface
• Supports skimming
• Take advantage of contrast to guide user through
  hierarchy of information add focus or to
  energize an interface with texture
• Can be used to distinguish active control

58
Contrast

• Can be used to set off most important item
• Allow it to dominate
• Ask yourself what is the most important item in
  the interface, highlight it
• Use geometry to help sequencing

59
Contrast Techniques

• Blinking
• Good for grabbing attention, but use very
  sparingly
• Reverse video, bold
• Good for making something stand out
• Again, use sparingly

60
Contrast Example
Importantelement
www.delta.com
61
Example
Clear, clean appearance Opinion?
www.schwab.com
62
Example
Clear, clean appearance Opinion?
www.schwab.com
63
Poor Graphic Design

• Inconsistent tone
• Marble conflicts with icons
• Varied hue, saturation and brightness
• Unbalanced heavy on left.
• No Gridding
• placeholder for figure

64
Poor Graphic Design

• Colors conflict
• Conflict between global and local icons
• Font unreadable
• placeholder for figure

65
Poor Graphic Design

• Violates proximity and hierarchy rules
• Breaks from grid
• Unclear whats hot
• placeholder for figure

66
Principle Background Textures to Convey Mood or
Context

• Conveys mood
• Respectable
• Solid
• Secure
• Muted

67
Background Texture

• Conveys mood
• Exciting
• Energetic
• Professional

68
Background Texture

• Conveys mood
• Playful
• Bright
• Chaotic

69
Background Texture

• Conveys Context

70
Evaluating Screen Organizations

• Logical grouping
• Visual reinforcement of logical groupings
• Aesthetics
• Eye movements
• Hand movements to devices
• Consistency

71
Screen Design Aesthetics

• placeholder

72
Screen Design Aesthetics

• By removing the box around the menu area, the
  meaningless but attention getting ragged right
  border is created.
• placeholder

73
The Best of AOL

• Excellent icon use to represent most commonly
  accessed items
• Works well in greyscale
• Note Icons Boxing, clustering with and without
  boxes
• placeholder

74
Example
Home page
Content page 1
Content page 2
www.santafean.com
75
UI Exercise

• Look at interface and see where your eye is
  initially drawn (what dominates?)
• Is that the most important thing in the
  interface?
• Sometimes this can (mistakenly) even be white
  space!

76
BadExample
Disorganized
77
Bad Example
Visual noise
78
Bad Example
Overuse of 3D effects