Visual interface design and design for scan

1,599 views

Published on

A course presentation about principles of visual interface design, based on Cooper's book " About Face 3".

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

No Downloads
Views
Total views
1,599
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Share skill set, but must possess a deeper understanding and appreciation of the role of behavior.
  • Share skill set, but must possess a deeper understanding and appreciation of the role of behavior.
  • Visual interface design and design for scan

    1. 1. Visual Interface Design & Design for Scanning<br />Emma & Dede<br />CGT512, 2011 Fall<br />
    2. 2. Outlines <br />VISUAL Interface DESIGN <br />What is VID?<br />Building Blocks of VID<br />Design Principles of VID<br />DESIGN FOR SCANNING <br />Create a Clear Visual Hierarchy<br />Benefits of a good visual hierarchy<br />Follow Conventions<br />Keep the noise down<br />AVOID USING ALL CAPS<br />
    3. 3. What is VID?<br />Communicate product behavior through a display.<br />Skills:<br />Basic visual properties<br />Interaction principles and interface idioms<br />Function:<br />Convey behavior and information.<br />Create a mood or visceral response.<br />
    4. 4. What is VID?<br />Communicate product behavior through a display.<br />Skills:<br />Basic visual properties<br />Interaction principles and interface idioms<br />Function:<br />Convey behavior and information.<br />Create a mood or visceral response.<br />
    5. 5. What is VID?<br />Self-expression<br />Artists<br />Visual Medium<br />Communication<br />Visual Designers<br />
    6. 6. What is VID?<br />Artists<br />Visual Medium<br />Visual Designers<br />Constrain aesthetic concerns within a functional framework.<br />Clear articulation of user experience goals and business objects.<br />
    7. 7. What is VID?<br />Graphic Designer<br />✔ Visual principles<br />✗Adequate understanding of key concepts surrounding software interaction and behavior.<br /><ul><li>Visual Information Designer</li></ul>✔ Visualization of data, content, and navigation.<br />✗ Interactive function.<br />
    8. 8. What is VID?<br />Visual Interface Designer<br />✔ Visual principles<br />✔ Adequate understanding of key concepts surrounding software interaction and behavior.<br />✔ Visualization of data, content, and navigation.<br />✔Interactive function.<br />
    9. 9. What is VID?<br />Visual Interface Designer<br />✔ Visual principles<br />✔ Adequate understanding of key concepts surrounding software interaction and behavior.<br />✔ Visualization of data, content, and navigation.<br />✔Interactive function.<br />$ How economical it is to hire a visual interface designer!!<br />
    10. 10. Building Blocks of VID <br />
    11. 11. Building Blocks of VID <br />iDVD<br />iTunes<br />
    12. 12. Building Blocks of VID <br />
    13. 13. Building Blocks of VID <br />
    14. 14. Building Blocks of VID <br />
    15. 15. Building Blocks of VID <br />
    16. 16. Building Blocks of VID <br />
    17. 17. Principles of VID <br />Human brain: a pattern-processing computer<br />Use visual properties to group elements and create a clear hierarchy.<br />Provide visual structure and flow at each level of organization.<br />Use cohesive, consistent, and contextually appropriate imagery.<br />Integrate style and function comprehensively and purposefully.<br />Avoid visual noise and clutter.<br />
    18. 18. Principles of VID <br /><ul><li> Group and Hierarchy
    19. 19. Use hue, saturation, value, size, and position to distinguish levels of hierarchy.
    20. 20. Spatial grouping
    21. 21. Visual grouping</li></ul>Hierarchy<br />Grouping<br />
    22. 22. Principles of VID <br /><ul><li> Group and Hierarchy
    23. 23. Use hue, saturation, value, size, and position to distinguish levels of hierarchy.
    24. 24. Spatial grouping
    25. 25. Visual grouping</li></ul>http://www.ideo.com/<br />http://www.ibm.com/us/<br />
    26. 26. Principles of VID <br /><ul><li> Visual Structure & Flow
    27. 27. Align and the grid
    28. 28. Logical path
    29. 29. Symmetry & balance</li></li></ul><li>Principles of VID <br /><ul><li>Visual Structure & Flow
    30. 30. Align and the grid
    31. 31. Logical path
    32. 32. Symmetry & balance</li></li></ul><li>Principles of VID <br /><ul><li> Avoid Visual Noise & Clutter
    33. 33. Avoid “heavy” elements
    34. 34. Use grouping to navigate information
    35. 35. Leave out “white space”</li></li></ul><li>Principles of VID <br /><ul><li> Avoid Visual Noise & Clutter</li></ul>NY Times<br />MSNBC News<br />
    36. 36. Design for Scanning<br />According to Netcraft.com, as of December 2010 there were 255,287,546 websites.<br />This gives you only a few seconds to present to an individual what she needs<br />People are no longer willing to waste time sorting through your website for information they want.<br />
    37. 37. Design for Scanning<br />Design your website for scanning, not reading<br />Krug gave five key points that will make your website suitable for scanning and henceforth more attractive to the impatient individual who stumbles across your site<br />
    38. 38. Create a Clear Visual Hierarchy<br />Show the relation between everything on the page<br />Which things are related<br />Which things are part of other things<br />Which things are of most importance<br />
    39. 39. Create a Clear Visual Hierarchy<br />
    40. 40. Create a Clear Visual Hierarchy<br />Source: http://www.kschlenker.com/blog/_archives/2008/2/6/3508391.html<br />
    41. 41. Create a Clear Visual Hierarchy<br />Source: http://www.magazines.com/<br />
    42. 42. Benefits of a good visual hierarchy<br />A good visual hierarchy makes the page easy to understand. <br />Content is organized and prioritized and therefore show which things are important and which are not<br />Visitors can know quickly whether the page provides what they are looking for<br />
    43. 43. Go with what people are accustomed to<br />People read from left to right, top to bottom<br />Title is at the top of a page and not the bottom<br />Follow Conventions<br />
    44. 44. Follow Conventions<br />
    45. 45. Follow Conventions<br />
    46. 46. Make it obvious what’s clickable<br />Don’t make your visitors wonder whether something is clickable.<br />Don’t make people wonder how something works. Make it obvious<br />(Krug, 2000, p. 15 )<br />
    47. 47. Keep the noise down<br />Page is too busy<br />Background noise<br />Source: http://activerain.com/blogsview/920986/shout-it-from-the-roof-top-up-to-10-properties-are-allowed-again-from-fannie-mae-<br />
    48. 48. AVOID USING ALL CAPS<br />(Cooper 2007) “PEOPLE RECOGNIZE LETTERS PRIMARILY BY THEIR SHAPES. THE MORE DISTINCT THE SHAPE, THE EASIER THE LETTER IS TO RECOGNIZE, WHICH IS WHY WORDS TYPED IN ALL CAPITAL LETTERS ARE HARDER TO READ THAN UPPER/LOWERCASE” (p. 310)<br />CAPS force people to read because they are not able to recognize the words<br />
    49. 49. References <br />Krug, S. (2000). Don’t Make Me Think: A Common Sense Approach to Web Usability.<br />Cooper, A. (2007). About Face 3: The Essentials of Interaction Design. <br />Nielsen, J. (1999). Designing Web Usability.<br />

    ×