1. September 28 th, 2009

2. Visual Hierarchy, Visual Flow, Grouping and Alignment

3. Visual Hierarchy  The most important content should stand out the most, the least important the least  Consider titles, secondary content, footnotes, etc. Each should look like what they represent  A user should be able to deduce informational structure of the page from it’s layout

4. Visual Flow  Paths user’s eye moment follows as they scan the page  Related to Visual Hierarchy in that when the VH is well designed focal points will draw user’s attention in an appropriate order  Focal points are the spots that a user has trouble avoiding, it’s natural to find them  The fewer the focal points the better

5. Visual Flow  Visual disconnect for right to left languages  The view’s eye movement wants to move in the wrong direction given the screen flow.

6. Visual Flow  Correct text flow given a western language  The view’s eye movement goes with the flow and text

7. Grouping and Alignment  Grouping and Alignment like focal points are necessary in forming a clear visual hierarchy  They also help visual flow as they may guide user’s eyes from group to group  Human nature desires visual order, making larger forms from smaller forms  You can take advantage of this by grouping and aligning things into distinct groups and using whitespace appropriately

8. Gestalt Principle - Proximity  Users will associate things that are close together 9 separate items 1 group

9. Gestalt Principle - Similarity  If two things are the same shape, size, color or orientation, users will associate them together Shape and Size Similarity Shape Similarity

10. Gestalt Principle - Similarity  If two things are the same shape, size, color or orientation, users will associate them together Color Similarity Orientation Similarity

11. Gestalt Principle - Continuity  Our eyes want to see continuous lines and curves formed by the alignment of smaller elements

12. Gestalt Principle - Closure  People want to see simple closed forms, like rectangles and blobs of whitespace – implicitly  1, 3, 5, __, 9  Th prchas of a hme s lkely th sngle mst mprtant fnancl dcisn y’ll evr mke  Ofur recso nad venes eyasr gao…  http://vimeo.com/5732745

13. Gestalt Principle - Closure

14. The power of power of the allows us to deduce information from images and layout. We are the ultimate super computer.

15. Where are the Lions?

16. From where should the Lions attack?

17. In depth examples

18.  Good Grouping and Alignment  Poor Visual Hierarchy  Poor Visual Flow

19.  Poor Navigation

20.  Same site, new look  Good hierarchy  Good Flow  Great Navigation  Great Grouping and Alignment

21.  Avg-Good Hierarchy focal points may not be as intended Good Diagonal and Overall Balance  Average Flow Clear path, but against human nature  Poor Navigation  Color Scheme = Analogic base color, neighbor color, complementary color Purple, blue, orange Used to draw attention to 2 nd two colors, neighbor will be more subtle than complementary

22.  Start on “Home"

23.  Click on “Design it”  Note loss of context

24.  Click on “Our Software”  Return of Context

25.  Click on “Build it”  Loss of context again  Visually two levels of nested navigation.  In reality, two separate navigation systems

26.  Poor Visual Hierarchy  Poor Visual Flow  Good Grouping and Alignment  Poor Navigation  Poor implementation of a complementary color scheme, ruins hierarchy and flow  Navigation scheme suffers from same pitfalls as the last example

27.  Average Hierarchy  Poor Flow  Good Grouping/Alignment  Poor Navigation  Too many fonts  Inconsistent font direction  Inconsistent image direction  Primarily slow image direction  Inconsistent product image perspective  Least important content occupies center  Color Scheme = Accented Analogic  Base, neighbor, comp, base comp (accent)  Incorrect usage. Orange, Red, Yellow are analogic, so blue is the accent color. It’s used as the base.

28.  Good Visual Hierarchy  Good Visual Flow  Great Grouping & Alignment  Great Navigation

29.  Top of Hierarchy

30.  2 nd Tier of Hierarchy

31.  3rd Tier of Hierarchy  Hierarchy = Flow in this screen

32.  Strong grouping and alignment using Titled panels  Good use of sub hierarchy to distinguish titles from text/links and footer information

33.  Poor/No Visual Hierarchy  No Visual Flow  Poor Grouping and Alignment  Poor/No Navigation

36.  Average Hierarchy  Good Grouping & Alignment  Good Navigation  Avg - Poor Visual Flow

38.  Abstract technique to conceptualize your visual hierarchy, flow and grouping & alignment  What is the hierarchy?  Possible page flows?

39.  Possible Flow #1

40.  Possible Flow #2

41.  Possible Flow #3

42.  Primary Visual Hierarchy through Grouping

43.  Secondary Visual Hierarchy

44.  Great on all fronts!  Which hierarchy principles are used?  What is the flow?  Which Gastalt principles?

45.  Visual Hierarchy Site Image Font Weight, Size and Color

46.  Possible Flow #1

47.  Possible Flow #2

48.  Possible Flow #3 – All good!

49.  Grouping and Alignment - Proximity

50.  Grouping and Alignment - Similarity

51.  Grouping and Alignment - Closure

52.  Good Visual Hierarchy  Good Flow  Good Grouping & Alignment  Good Navigation  Color Scheme ruins the flow/usability

53.  A minor change to background color cleans this up

54.  Poor Visual Hierarchy  Poor Flow  Good Grouping & Alignment  Average Navigation  Color Scheme kills it all

55.  Only unifying the color scheme – no layout changes

56.  Almost great…. What can be improved?

57.  User follows the blue initially

58.  Better, but the right side of the page may still draw user and there seems to be a lack of balance

59.  Subtle Option

60.  Subtle, more balanced option. Also brings presence to the center column with drop shadow

61.  What’s not wrong with this?

63.  Duplicated Domain Search/Buy Entry Points

64.  Duplicated Account/Login Information

65.  Orange and Red make these focal points

66. =  The only real use of whitespace

67.  Site name and tag line are lost in the noise

68.  Blur test…. Failed.

69. How much whitespace?  ~70% for optimum usability

73. Size and Position  I’ve followed all the Visual Hierarchy, Visual Flow, Grouping and Alignment principles  I’ve even implemented several the Gestalt principles  Something still looks off… What can I check next?

74. Golden Section  Natures perfect ratio: geometry of a pinecone, spiral of a sea shell, seeds of a sunflower, rotation of the leaves of some plants  It’s been used in art, architecture, music for centuries  “The ratio of the whole to the greater is the ratio of the greater to the lesser” – Pythagoras  Based on Fibonacci series: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34… Mathematically: ~1:1.619

75. Golden Section in Screen Layout 745 1 32 6

76. Multiple Panel Window

77. Rule of Thirds  0,1,1,2,3,5…  3/2 = 1.5 …. close to 1.619

78. Other Visual Interesting or Common Ratios  Square-Root-of-2 Rectangles. 1:414 A rectangle of this proportion when divided in half results in 2 rectangles that are also square-root-of-2 rectangles  3 x 4 Rectangles: 1:1.333 3, 4, 5 = Simple. GUI: 640x480, 800x600, 1024x768  3 x 5 Rectangles: 1.6667 Close to golden section but the rectangles are perceptively different due to the extra width. Can create a heavier, more stable impression  Square-Root-of-3 Rectangles: 1.1732 Wider than 3x5 rectangles, it accentuates the longer dimension GUIs that feature this ratio often seem wide open on 3x4 screen resolution