Visual Structure

1
Visual Structure
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

• placeholder

22
Gestalt Application of Principles to Screen
Format

• Placeholder

23
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

24
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

25
Clarity

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

26
Clarity via White Space

• White space

27
Clarity via White Space

• White Open

28
Clarity
29
Clarity via White Space Example

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

30
Clarity via White Space Example

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

31
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!

32
Inconsistent Visual Design

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

33
Inconsistent Visual Design

• Inconsistent icon placement
• placeholder for image

34
Inconsistent Structure Example

• Multiple paths from 4 screens
• No way back from Sports Flash
• Keyword Grandstand
• placeholder could make this one but goes with
  others that I cant make

35
Inconsistency

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

36
Inconsistent Use of Graphical Elements to Depict
Logical Structure

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

37
Principle Hierarchy

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

38
Hierarchy

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

39
Hierarchy

• What are the relative levels of importance?

40
Hierarchy
41
Typographical Hierarchy
42
Typographical Hierarchy plus Indentation
43
Principle Balance

• Good example
• placeholder not sure where to get these from
• Bad example
• placeholder

44
Principle Grids

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

45
Grids

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

46
Grids Examples
47
Grid Alignment

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

48
Grid Aligment

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

49
Grid Alignment

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

50
Grid Alignment

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

51
Grid Example
52
Grids

• Good example
• placeholder not sure where to get these from
• Bad example
• placeholder

53
Example Balance/Proximity/Grids

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

54
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

55
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

56
Contrast Techniques

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

57
Contrast Example
Importantelement
www.delta.com
58
Example
Clear, clean appearance Opinion?
www.schwab.com
59
Example
Clear, clean appearance Opinion?
www.schwab.com
60
Poor Graphic Design

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

61
Poor Graphic Design

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

62
Poor Graphic Design

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

63
Principle Background

• Respectable
• Solid
• Secure
• Muted
• placeholder

64
Principle Background Textures

• Under Construction

65
Background Textures

• Exciting
• Energetic
• Professional
• placeholder

66
Background Textures

• Playful
• Bright
• Chaotic
• placeholder

67
Evaluating Screen Organizations

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

68
Screen Design Aesthetics

• placeholder

69
Screen Design Aesthetics

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

70
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

71
Example
Home page
Content page 1
Content page 2
www.santafean.com
72
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!

73
Example
Disorganized
74
Example
Visual noise
75
Example
Overuse of 3D effects