Week 5 - Visual Hierarchies

1,312 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,312
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
50
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Week 5 - Visual Hierarchies

  1. 1. IMD09117 and IMD09118 Web Design and Development Unit 5 Visual hierarchies and perceptual layering
  2. 2. Visual hierarchy Version A Unit 5 ©2008 Napier University <ul><li>Users first see large masses of shape and colour </li></ul><ul><li>Secondarily see information in graphics </li></ul><ul><li>Finally read individual words and phrases from text </li></ul>When users see a visual interface
  3. 3. Visual hierarchy Version A Unit 5 ©2008 Napier University <ul><li>Creates a centre of interest that attracts the viewer’s attention </li></ul><ul><li>Creates a sense of order and balance </li></ul><ul><li>Establishes a pattern of movement to guide a viewer through a composition </li></ul>
  4. 4. Visual weight Version A Unit 5 ©2008 Napier University <ul><li>Visual weight is the degree to which an element demands our attention and also keeps our interest </li></ul><ul><li>It is a relative concept </li></ul>
  5. 5. Visual weight Version A Unit 5 ©2008 Napier University Hello
  6. 6. Visual weight Version A Unit 5 ©2008 Napier University Hello
  7. 7. Visual weight Version A Unit 5 ©2008 Napier University Hello
  8. 8. Figure and ground relation Version A Unit 5 ©2008 Napier University
  9. 9. Figure and ground relation Version A Unit 5 ©2008 Napier University
  10. 10. Figure and ground relation Version A Unit 5 ©2008 Napier University
  11. 11. Figure and ground relation Version A Unit 5 ©2008 Napier University
  12. 12. Figure and ground relation Version A Unit 5 ©2008 Napier University
  13. 13. Figure and ground relation Version A Unit 5 ©2008 Napier University
  14. 14. Figure and ground relation Version A Unit 5 ©2008 Napier University
  15. 15. Figure and ground relation Version A Unit 5 ©2008 Napier University
  16. 16. Directing the viewer’s eye Version A Unit 5 ©2008 Napier University <ul><li>Primary scanning pattern is vertical-horizontal referents </li></ul><ul><li>Secondary scanning pattern is the left-lower perceptual pull </li></ul>
  17. 17. Directing the viewer’s eye Version A Unit 5 ©2008 Napier University Primary scanning
  18. 18. Directing the viewer’s eye Version A Unit 5 ©2008 Napier University Secondary scanning
  19. 19. Directing the viewer’s eye Version A Unit 5 ©2008 Napier University How do your eyes move?
  20. 20. Directing the viewer’s eye Version A Unit 5 ©2008 Napier University How do your eyes move?
  21. 21. Visual recognition Version A Unit 5 ©2008 Napier University Layout
  22. 22. Visual recognition Version A Unit 5 ©2008 Napier University Points to consider <ul><li>Visual recognition occurs in first few seconds of viewing </li></ul><ul><li>Squint test – tells you which elements are prominent </li></ul><ul><li>Graphic balance is important with visual contrast </li></ul>
  23. 23. Visual recognition Version A Unit 5 ©2008 Napier University Points to consider <ul><li>Pastel shades are best for background and minor elements </li></ul><ul><li>Use bold, saturated primary colours in areas of maximum emphasis </li></ul><ul><li>But with caution </li></ul>
  24. 24. Perceptual layering Version A Unit 5 ©2008 Napier University <ul><li>Perceptual layering uses colour to create apparent layers on the screen </li></ul><ul><li>Place most important items on the upper layers and less important below </li></ul><ul><li>Allows viewers to concentrate on the important areas and ignore noise </li></ul>
  25. 25. Perceptual layering Version A Unit 5 ©2008 Napier University <ul><li>Perceptual layering is used in other application areas such as cartography </li></ul><ul><li>To be effective, take into consideration human factors, colour science and colour perception </li></ul>
  26. 26. Perceptual layering Version A Unit 5 ©2008 Napier University
  27. 27. Perceptual layering Version A Unit 5 ©2008 Napier University <ul><li>Can link related but non-contiguous areas </li></ul><ul><li>Allows more effective scanning </li></ul><ul><li>Provides consistency </li></ul><ul><li>Reduces clutter </li></ul>Colour coding
  28. 28. Perceptual layering Version A Unit 5 ©2008 Napier University Colour coding
  29. 29. Perceptual layering Version A Unit 5 ©2008 Napier University Colour coding
  30. 30. Perceptual layering Version A Unit 5 ©2008 Napier University Colour coding <ul><li>http://www.enjoyburlington.com/ </li></ul><ul><li>http://www.bbc.co.uk </li></ul>
  31. 31. Experimental conclusions Version A Unit 5 ©2008 Napier University <ul><li>Size - larger text dominates over smaller text. </li></ul><ul><li>Text style is secondary to size </li></ul><ul><li>Images must be much larger than text to act as entry points </li></ul>
  32. 32. Experimental conclusions Version A Unit 5 ©2008 Napier University <ul><li>Scanning – left-right, top-bottom used for text and bullet points, not between images, titles or links </li></ul><ul><li>Non-contiguous areas of common background colour did not cause sequencing </li></ul>
  33. 33. Experimental conclusions Version A Unit 5 ©2008 Napier University <ul><li>Middle top of the page appears dominant, the left hand bottom are secondary </li></ul><ul><li>Example http://www.espc/co/uk </li></ul>
  34. 34. Summary Version A Unit 5 ©2008 Napier University <ul><li>A visual hierarchy creates a centre of interest that attracts the viewer’s attention, creates a sense of order and balance, and guides a viewer through a page </li></ul><ul><li>Visual weight is the degree to which an element demands our attention and also keeps our interest </li></ul>
  35. 35. Summary Version A Unit 5 ©2008 Napier University <ul><li>The primary scanning pattern is vertical-horizontal referents. The secondary scanning pattern is the left-lower perceptual pull. </li></ul><ul><li>The overall graphic balance and organisation of the page is crucial to drawing the user into your content </li></ul>
  36. 36. Summary Version A Unit 5 ©2008 Napier University <ul><li>Perceptual layering uses colour to create apparent layers on the screen. </li></ul><ul><li>The most task relevant details are highlighted by being placed on the upper layers, whilst the lower layers are used to contain less important information. </li></ul>

×