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.