My talk at DrupalCon Chicago, 2011. http://chicago2011.drupal.org/sessions/visual-hierarchy-1-2-3-must-be-important Whether you're designing a homepage, the next Views interface, or a car dashboard, visual hierarchy is one of the most important design principles that comes into play. We'll look at real world examples of visual hierarchy gone good and bad and some basic fundamentals, tips and tricks to ensure that the important things win in your designs. We'll dive into Drupal for some real world examples of visual hierarchy decisions that affect us Drupalers every day. We'll also take a look at some of the unique challenges and benefits when establishing visual hierarchy on mobile devices like smart phones and tablets.

1. Visual Hierarchy 1, 2, 3
Jared Ponchot
Design Lead at Lullabot
twitter: @jponch

2. Visual Hierarchy 1, 2, 3
JARED PONCHOT * DrupalCon CHICAGO 2011
twitter: @jponch

3. Consulting | Development | Training
P O W E R E D b y S E R V I C E™

4. The Lullabot Learning Series
Available via DVD & Download at http://store.lullabot.com

5. Get instant access to an unrivaled library of Drupal training from top-tier experts
streaming to your computer, tablet, smart phone, & tv.

6. Visual Hierarchy

7. Visual Hierarchy
‣ What is this visual hierarchy thing?

8. Visual Hierarchy
‣ What is this visual hierarchy thing?
‣ Why is visual hierarchy awesome?

9. Visual Hierarchy
‣ What is this visual hierarchy thing?
‣ Why is visual hierarchy awesome?
‣ I can haz visual hierarchies?

10. What is visual hierarchy?
Visual hierarchy is the emphasis and classification of
elements according to a) relative importance within
the composition as a whole and b) parent, child, and
sibling relationships.
- CAMERON MOLL

11. Jared’s Definition
Visual Hierarchy refers to a visual system of relative
importance within a defined space or context.

12. Somethin’s Gotta Win

13. Visual hierarchy is important!

14. Solve problems, don’t create them

15. What problem are we solving?

16. A nicer approach

17. Why is visual hierarchy awesome?
It can help create order out of seeming chaos.
It can help create more meaningful
communication.

18. I can haz visual hierarchies?
‣ Know your elements dear Watson
‣ Some basic fundamentals
‣ Some nifty tricks

19. Boeing 777 cockpit

20. Notice the handy cup-holder

21. Complex things are complex!

22. Visual Hierarchy Requires Hierarchy
You can’t actually utilize visual hierarchy without
first knowing the intended hierarchy of the
information or elements you’re working with!

23. What are the things users can do here?

24. • clone a panel page • update the above selection • view a panel variant's content settings
• export a panel page • update and save the above selection • edit a panel variant's display settings
• disable a panel page • view a summary of a panel variant • view a listing of a panel variant's regions
• add a variant to a panel page • disable a panel variant • view the various content within each region
• import a variant to a panel page • edit a panel variant's selection rule of a panel variant
• view a summary of a panel's information • change a panel variant's layout • add or remove content to and from a panel
• disable a panel • edit a panel variant's layout's content variant's regions
• edit a panel's description • preview a panel variant's layout • change the style of a panel variant's region
• edit a panel's path • view general stuff about a panel variant • disable a content pane within a region of a
• edit a panel's access settings • edit a panel variant's administrative title panel variant
• edit a panel's menu settings • disable Drupal blocks and regions on a • access the panel title settings for a pane
• disable a panel panel variant within a panel variant region
• edit a panel's selection rule • choose a panel variant's renderer (Standard • access the CSS properties assigned to a pane
• change a panel's layout or In-Place Editor) within a region of a panel variant
• edit a panel's layout's content • edit a panel variant's CSS ID • change the style of a pane within a region of
• preview a panel's layout • edit a panel variant's CSS code a panel variant
• add a new variant to a panel • update the above edits • add new rules to a pane within a region of a
• view a summary of a panel's basic settings • update and save the above edits panel variant
• edit a panel's admin title • view a panel variant's selection rules • access visibility rules settings for a pane
• edit a panel's home page • view a panel variant's control criteria within a region of a panel variant
• edit a panel's path • add Context exists, Current theme, PHP • change the caching settings of a pane
• update the above edits Code, String: URL path, User: permission, within a region of a panel variant
• update and save the above edits User: Role to a panel variant's access settings • remove a pane within a region of a panel
• view a summary of a panel's access settings • choose whether all access criteria must pass variant
• view a panel's' access rules or not • update the above changes
• add Context exists, Current theme, PHP • choose whether only one criteria must pass • update and save the above changes
Code, String: URL path, User: permission, or not • update and preview the above changes
User: Role to a panel's access settings • update the above edits • preview the output of a panel variant
• choose whether all access criteria must pass • update and save the above edits • clone a panel variant's preview?
or not • view a panel variant's contexts • export a panel variant's preview?
• choose whether only one criteria must pass • add a context to a panel variant • disable a panel variant's preview?
or not • update the above changes • save changes to a panel page
• update the above edits • update and save the above changes • cancel changes to a panel page
• update and save the above edits • view a panel variants layout settings
• view a summary of a panel's menu settings • select a category of layouts to choose from
• select the type of menu desired for your • choose a speci c layout for a panel variant
panel • continue

25. • clone a panel page • update the above selection • continue
• export a panel page • update and save the above selection • view a panel variant's content settings
• disable a panel page • view a summary of a panel variant • edit a panel variant's display settings
• add a variant to a panel page • disable a panel variant • view a listing of a panel variant's regions
• import a variant to a panel page • edit a panel variant's selection rule • view the various content within each region
• view a summary of a panel's information • change a panel variant's layout of a panel variant
• disable a panel • edit a panel variant's layout's content • add or remove content to and from a panel
• edit a panel's description • preview a panel variant's layout variant's regions
• edit a panel's path • view general stuff about a panel variant • change the style of a panel variant's region
• edit a panel's access settings • edit a panel variant's admin title • disable a content pane within a region of a
• edit a panel's menu settings • disable Drupal blocks and regions on a panel panel variant
• disable a panel variant • access the panel title settings for a pane
• edit a panel's selection rule • choose a panel variant's renderer (Standard within a panel variant region
• change a panel's layout or In-Place Editor) • access the CSS properties assigned to a pane
• edit a panel's layout's content • edit a panel variant's CSS ID within a region of a panel variant
• preview a panel's layout • edit a panel variant's CSS code • change the style of a pane within a region of
• add a new variant to a panel • update the above edits a panel variant
• view a summary of a panel's basic settings • update and save the above edits • add new rules to a pane within a region of a
• edit a panel's admin title • view a panel variant's selection rules panel variant
• edit a panel's home page • view a panel variant's control criteria • access visibility rules settings for a pane
• edit a panel's path • add Context exists, Current theme, PHP within a region of a panel variant
• update the above edits Code, String: URL path, User: permission, • change the caching settings of a pane within
• update and save the above edits User: Role to a panel variant's access a region of a panel variant
• view a summary of a panel's access settings settings • remove a pane within a region of a panel
• view a panel's' access rules • choose whether all access criteria must variant
• add Context exists, Current theme, PHP pass or not • update the above changes
Code, String: URL path, User: permission, • choose whether only one criteria must • update and save the above changes
User: Role to a panel's access settings pass or not • update and preview the above changes
• choose whether all access criteria must • update the above edits • preview the output of a panel variant
pass or not • update and save the above edits • clone a panel variant's preview?
• choose whether only one criteria must • view a panel variant's contexts • export a panel variant's preview?
pass or not • add a context to a panel variant • disable a panel variant's preview?
• update the above edits • update the above changes • save changes to a panel page
• update and save the above edits • update and save the above changes • cancel changes to a panel page
• view a summary of a panel's menu settings • view a panel variants layout settings
• select the type of menu desired for your • select a category of layouts to choose from
panel • choose a speci c layout for a panel variant

26. edit panel page screen

27. edit panel page screen

28. • clone a panel page • update the above selection • view a panel variant's content settings
• export a panel page • update and save the above selection • edit a panel variant's display settings
• disable a panel page • view a summary of a panel variant • view a listing of a panel variant's regions
• add a variant to a panel page • disable a panel variant • view the various content within each region
• import a variant to a panel page • edit a panel variant's selection rule of a panel variant
• view a summary of a panel's information • change a panel variant's layout • add or remove content to and from a panel
• disable a panel • edit a panel variant's layout's content variant's regions
• edit a panel's description • preview a panel variant's layout • change the style of a panel variant's region
• edit a panel's path • view general stuff about a panel variant • disable a content pane within a region of a
• edit a panel's access settings • edit a panel variant's administrative title panel variant
• edit a panel's menu settings • disable Drupal blocks and regions on a • access the panel title settings for a pane
• disable a panel panel variant within a panel variant region
• edit a panel's selection rule • choose a panel variant's renderer (Standard • access the CSS properties assigned to a pane
• change a panel's layout or In-Place Editor) within a region of a panel variant
• edit a panel's layout's content • edit a panel variant's CSS ID • change the style of a pane within a region of
• preview a panel's layout • edit a panel variant's CSS code a panel variant
• add a new variant to a panel • update the above edits • add new rules to a pane within a region of a
• view a summary of a panel's basic settings • update and save the above edits panel variant
• edit a panel's admin title • view a panel variant's selection rules • access visibility rules settings for a pane
• edit a panel's home page • view a panel variant's control criteria within a region of a panel variant
• edit a panel's path • add Context exists, Current theme, PHP • change the caching settings of a pane
• update the above edits Code, String: URL path, User: permission, within a region of a panel variant
• update and save the above edits User: Role to a panel variant's access settings • remove a pane within a region of a panel
• view a summary of a panel's access settings • choose whether all access criteria must pass variant
• view a panel's' access rules or not • update the above changes
• add Context exists, Current theme, PHP • choose whether only one criteria must pass • update and save the above changes
Code, String: URL path, User: permission, or not • update and preview the above changes
User: Role to a panel's access settings • update the above edits • preview the output of a panel variant
• choose whether all access criteria must pass • update and save the above edits • clone a panel variant's preview?
or not • view a panel variant's contexts • export a panel variant's preview?
• choose whether only one criteria must pass • add a context to a panel variant • disable a panel variant's preview?
or not • update the above changes • save changes to a panel page
• update the above edits • update and save the above changes • cancel changes to a panel page
• update and save the above edits • view a panel variants layout settings
• view a summary of a panel's menu settings • select a category of layouts to choose from
• select the type of menu desired for your • choose a speci c layout for a panel variant
panel • continue

29. How Panels Attempt to Group Stuff
‣ Summary ‣ Selection Rules
‣ Settings ‣ Contexts
‣ Basic ‣ Layout
‣ Access ‣ Content
‣ Menu ‣ Preview
‣ Variants
‣ Panel
‣ Summary
‣ General

30. edit panel page screen

31. panel page admin screen

32. Gestalt & Other Fun-damentals

33. Gestalt & Other Fun-damentals
‣ position

34. Gestalt & Other Fun-damentals
‣ position
‣ proportion

35. Gestalt & Other Fun-damentals
‣ position
‣ proportion
‣ proximity

36. Gestalt & Other Fun-damentals
‣ position
‣ proportion
‣ proximity
‣ symmetry

37. Gestalt & Other Fun-damentals
‣ position
‣ proportion
‣ proximity
‣ symmetry
‣ similarity

38. Gestalt & Other Fun-damentals
‣ position
‣ proportion
‣ proximity
‣ symmetry
‣ similarity
‣ alignment

39. Gestalt & Other Fun-damentals
‣ position ‣ contrast
‣ proportion
‣ proximity
‣ symmetry
‣ similarity
‣ alignment

40. Gestalt & Other Fun-damentals
‣ position ‣ contrast
‣ proportion ‣ color
‣ proximity
‣ symmetry
‣ similarity
‣ alignment

41. Gestalt & Other Fun-damentals
‣ position ‣ contrast
‣ proportion ‣ color
‣ proximity ‣ isomorphism
‣ symmetry
‣ similarity
‣ alignment

42. Gestalt & Other Fun-damentals
‣ position ‣ contrast
‣ proportion ‣ color
‣ proximity ‣ isomorphism
‣ symmetry ‣ unity
‣ similarity
‣ alignment

43. Gestalt & Other Fun-damentals
‣ position ‣ contrast
‣ proportion ‣ color
‣ proximity ‣ isomorphism
‣ symmetry ‣ unity
‣ similarity ‣ pause
‣ alignment

44. Gestalt? Ge-what?
Gestalt psychology was founded by Max
Wertheimer in 1912 and expanded upon by
others like Kurt Koffka.
Gestalt psychology is based on the observation
that we often experience things that are not a part
of our simple sensations.

45. Gestalt? Ge-what?
Especially visually, the whole is often more than
the sum of its parts.

46. Position
1
2 3

47. Position
E U H Y D A
S R I O T N
A C

48. Position
C A N Y O U
R E A D T H
I S

49. Proportion

50. Proportion
2
1
3

51. Did you look at the giant rectangle first?

52. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

53. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

54. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

55. Proximity
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

56. Proximity

57. Proximity

58. Proximity

59. Symmetry
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{}{}{}

60. Symmetry
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{ }{ }{ }

61. Symmetry
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{ }{ }{ }

62. Similarity
Things that are similar are perceived to be more
related than things that are dissimilar.

63. Similarity
Things that are similar are perceived to be more
related than things that are dissimilar.

64. Similarity
Things that are similar are perceived to be more
related than things that are dissimilar.

65. Alignment

66. Alignment

67. Contrast

68. Color & Visual Importance
‣ Warm colors stand out
‣ Cool colors recede

71. Isomorphism

72. Aoccdrnig to rscheearch at Cmabrigde uinervtisy,
it deosn't mttaer waht oredr the ltteers in a wrod
are, the olny iprmoetnt tihng is taht the frist and
lsat ltteres are at the rghit pclae. The rset can be a
tatol mses and you can sitll raed it wouthit a
porbelm. Tihs is bcuseae we do not raed ervey
lteter by it slef but the wrod as a wlohe.
- INTERNET MEME FROM 2003 (LANGUAGEHAT.COM)

73. According to a research at Cambridge University, it
doesn't matter in what order the letters in a word
are, the only important thing is that the first and last
letter be at the right place. The rest can be a total
mess and you can still read it without problem. This
is because the human mind does not read every
letter by itself but the word as a whole.
- INTERNET MEME FROM 2003 (LANGUAGEHAT.COM)

74. Patterns are important!
Relating interfaces to real physical
space can also be VERY helpful

75. Unity

76. Unity

77. Pause

78. Nifty visual hierarchy trick

79. Nifty visual hierarchy trick

80. Nifty visual hierarchy trick

81. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

82. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

83. Double Click to Insert Title
Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Ut malesuada diam at mauris
cursus sodales. Nam ac dapibus lectus. Etiam
tortor purus, dignissim a elementum.

84. panel page edit screen

85. panel page edit screen

86. panel page edit screen

87. panel page edit screen

88. Visual Hierarchy in Typography
A LOT can be accomplished with proportion,
proximity, contrast and color

89. Come Party with Us! Announcing Geek to
Chic, the first ever Drupal fashion show and
party extravaganza! Geek to Chic.
Wednesday March 9th.

90. Come Party with Us!
Announcing Geek to Chic, the first ever Drupal
fashion show and party extravaganza!
Geek to Chic. Wednesday March 9th.

91. Come Party with Us!
Announcing Geek to Chic, the first ever Drupal fashion
show and party extravaganza!
Geek to Chic. Wednesday March 9th.

92. Visual Hierarchy Goes Mobile

93. Visual Hierarchy Goes Mobile
Physical interaction
bottom corners are prime

94. So let’s recap!
‣ Visual hierarchy simply refers to a visual
system of relative importance within a defined
space or context.
‣ Visual hierarchy is awesome because it can
help make order out of chaos
‣ YOU can create great visual hierarchy using
some basic fundamentals

95. Questions? Comments?
via dharmesh mehta on fwdmsgsnpics.blogspot.com
JARED PONCHOT * DrupalCon CHICAGO 2011
twitter: @jponch

96. What did you think?
Locate this session on the DCC website:
http://chicago2011.drupal.org/sessions
Click the “Take the Survey” link.
Thanks!