Upload
zhihua-dong
View
1.056
Download
0
Tags:
Embed Size (px)
DESCRIPTION
A course presentation about principles of visual interface design, based on Cooper's book " About Face 3".
Citation preview
Visual Interface Design & Design for Scanning
Emma & DedeCGT512, 2011 Fall
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
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.
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.
What is VID?
Artists
Visual Medium
Visual Designers
Self-expression
Communication
What is VID?
Constrain aesthetic concerns within a functional framework.
Clear articulation of user experience goals and business objects.
Artists
Visual Medium
Visual Designers
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.
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.
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!!
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗
Size ✓ ✓ ✗ ✓
Value ✓ ✗ ✗ ✓
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗
Size ✓ ✓ ✗ ✓
Value ✓ ✗ ✗ ✓
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗iDVD iTunes
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗ Not good for calling attention;Important affordance cue.
Size ✓ ✓ ✗ ✓
Value ✓ ✗ ✗ ✓
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗ Not good for calling attention;Important affordance cue.
Size ✓ ✓ ✗ ✓
Value ✓ ✗ ✗ ✓
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗ Not good for calling attention;Important affordance cue.
Size ✓ ✓ ✗ ✓ Useful to convey hierarchies.
Value ✓ ✗ ✗ ✓ Good tool for drawing attention.
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗ Not good for calling attention;Important affordance cue.
Size ✓ ✓ ✗ ✓ Useful to convey hierarchies.
Value ✓ ✗ ✗ ✓ Good tool for drawing attention.
Orientation
✓ ✗ ✗ ✗
Position ✓ ✓ ✗ ✗
Hue ✗ ✗ ✗ ✗
Building Blocks of VID
Ordered
Quantitative
High-level attention
Dissociated
Note
Shape ✗ ✗ ✓ ✗ Not the best for contrast.
Texture ✗ ✗ ✓ ✗ Not good for calling attention;Important affordance cue.
Size ✓ ✓ ✗ ✓ Useful to convey hierarchies.
Value ✓ ✗ ✗ ✓ Good tool for drawing attention.
Orientation
✓ ✗ ✗ ✗ Useful to convey directional info.
Position ✓ ✓ ✗ ✗ Useful to convey hierarchies.
Hue ✗ ✗ ✗ ✗ Use carefully.
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.
Principles of VID
Group and Hierarchy
Use hue, saturation, value, size, and position to distinguish levels of hierarchy.
Spatial groupingVisual grouping
Hierarchy
Grouping
Principles of VID
Group and Hierarchy
Use hue, saturation, value, size, and position to distinguish levels of hierarchy.
Spatial groupingVisual grouping
http://www.ideo.com/
http://www.ibm.com/us/
Principles of VID
Visual Structure & Flow
Align and the grid Logical path Symmetry & balance
Principles of VID
Visual Structure & Flow
Align and the grid Logical path Symmetry & balance
Principles of VID
Avoid Visual Noise & Clutter Avoid “heavy”
elements Use grouping to
navigate information
Leave out “white space”
Principles of VID
Avoid Visual Noise & Clutter
NY Times MSNBC News
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.
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
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
Create a Clear Visual Hierarchy
Source: http://www.kschlenker.com/blog/_archives/2008/2/6/3508391.html
Create a Clear Visual Hierarchy
Source: http://www.magazines.com/
Create a Clear Visual Hierarchy
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
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
Follow Conventions
Follow Conventions
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 )
Keep the noise down
Source: http://activerain.com/blogsview/920986/shout-it-from-the-roof-top-up-to-10-properties-are-allowed-again-from-fannie-mae-
Page is too busy
Background noise
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
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.