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

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.

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.

19. Use hue, saturation, value, size, and position to distinguish levels of hierarchy.

20. Spatial grouping

21. Visual groupingHierarchy Grouping

23. Use hue, saturation, value, size, and position to distinguish levels of hierarchy.

24. Spatial grouping

25. Visual groupinghttp://www.ideo.com/ http://www.ibm.com/us/

27. Align and the grid

28. Logical path

30. Align and the grid

31. Logical path

33. Avoid “heavy” elements

34. Use grouping to navigate information

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.