Layout and Navigation Putting it all Together

1. September 28th, 2009 Layout and NavigationPutting it all Together

2. Visual Hierarchy, Visual Flow, Grouping and Alignment Quick Review

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 Similarity Shape and Size Similarity

10. Gestalt Principle - Similarity • If two things are the same shape, size, color or orientation, users will associate them together Orientation Similarity Color 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 • Thprchas of a hme s lkelythsnglemstmprtantfnancldcisny’llevrmke • Ofurrecsonadveneseyasrgao… • 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. Human Intelligence

15. Where are the Lions?

16. From where should the Lions attack?

17. In depth examples Layout and NavigationPutting it all Together

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

19. Poor Navigation

20. Same site, new look • Goodhierarchy • 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 2nd 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. 2nd 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