Visual interface design and design for scan
Download as PPTX, PDF4 likes1,545 views
The document outlines principles of visual interface design, emphasizing the importance of creating a clear visual hierarchy and reducing visual noise for effective user interaction. It discusses the role of visual interface designers and the skills needed to communicate product behavior and organization effectively. Additionally, it highlights the necessity of designing for scanning rather than reading, offering strategies to improve website usability.
Visual interface design and design for scan
- 1. Visual Interface Design & Design for ScanningEmma & DedeCGT512, 2011 Fall
- 2. Outlines VISUAL Interface DESIGN What is VID?Building Blocks of VIDDesign Principles of VIDDESIGN FOR SCANNING Create a Clear Visual HierarchyBenefits of a good visual hierarchyFollow ConventionsKeep the noise downAVOID USING ALL CAPS
- 3. What is VID?Communicate product behavior through a display.Skills:Basic visual propertiesInteraction principles and interface idiomsFunction:Convey behavior and information.Create a mood or visceral response.
- 4. What is VID?Communicate product behavior through a display.Skills:Basic visual propertiesInteraction principles and interface idiomsFunction:Convey behavior and information.Create a mood or visceral response.
- 5. What is VID?Self-expressionArtistsVisual MediumCommunicationVisual Designers
- 6. What is VID?ArtistsVisual MediumVisual DesignersConstrain 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 iDVDiTunes
- 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 computerUse 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
- 22. Principles of VID Group and Hierarchy
- 23. Use hue, saturation, value, size, and position to distinguish levels of hierarchy.
- 24. Spatial grouping
- 26. Principles of VID Visual Structure & Flow
- 27. Align and the grid
- 28. Logical path
- 29. Symmetry & balancePrinciples of VID Visual Structure & Flow
- 30. Align and the grid
- 31. Logical path
- 32. Symmetry & balancePrinciples of VID Avoid Visual Noise & Clutter
- 34. Use grouping to navigate information
- 35. Leave out “white space”Principles of VID Avoid Visual Noise & ClutterNY TimesMSNBC News
- 36. Design for ScanningAccording 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 needsPeople are no longer willing to waste time sorting through your website for information they want.
- 37. Design for ScanningDesign your website for scanning, not readingKrug 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 HierarchyShow the relation between everything on the pageWhich things are relatedWhich things are part of other thingsWhich things are of most importance
- 39. Create a Clear Visual Hierarchy
- 40. Create a Clear Visual HierarchySource: http://www.kschlenker.com/blog/_archives/2008/2/6/3508391.html
- 41. Create a Clear Visual HierarchySource: http://www.magazines.com/
- 42. Benefits of a good visual hierarchyA good visual hierarchy makes the page easy to understand. Content is organized and prioritized and therefore show which things are important and which are notVisitors can know quickly whether the page provides what they are looking for
- 43. Go with what people are accustomed toPeople read from left to right, top to bottomTitle is at the top of a page and not the bottomFollow Conventions
- 46. Make it obvious what’s clickableDon’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 downPage is too busyBackground noiseSource: 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.