Your SlideShare is downloading. ×
0
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Visual interface design and design for scan
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Visual interface design and design for scan

1,061

Published on

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

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,061
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

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

    ×