Visual Usability:

Visual Design Principles and Practices for Creating Great Web and Mobile Application Interfaces

Tania Schlatter and Deborah Levinson

UX & IA UX & IA + UI design

http://www.!ickr.com/photos/comedynose/7865159650/

Define an appropriate target

Work toward the goal

http://www.onecenteryoga.com/default.asp?iID=GFKEEK&item=GFMDDH

Schedule

9-10:30am Intro and lecture: what is visual usability?

Exercise 1: storytelling through abstraction

10:30-11am Break11:00am-12:30pm Review exercise 1

Lecture: the meta-principles of visual usability

Exercise 2: personality design requirements

12:30pm-1:45pm Lunch

1:45pm-3:00pm Lecture: the visual usability tools 3:00pm-3:30pm Break

3:30pm-5:15pm Exercise 3: applying what you’ve learned to a sample app

Digital interfaces communicate visually via:• layout/position • type• color• imagery• controls and motion

People look for patterns to understand what we see

How these tools are used affect interpretation.

The “tools”

The “tools”Everything we put forth is interpreted

High tech?

What can I do here?

Is this for me?

What is this?

How does it help me?

• Attractive things work better (Don Norman)

• Presentation affects interpretation and use

• Appearance and function must work together

• Role-agnostic approach – concerned with what and not who

Visual usability

• There are many design principles, but we focus on three:

• Consistency

• Hierarchy

• Personality

The meta-principles

125 in Universal Principles of Design, but no “personality”

Why these three?

Pattern of visual design issues in our heuristic reviews and usability tests

• people not seeing what to do

• people not understanding what they see

• people expecting something different than what they see

Patterns of recommendations

Consistency: place elements similarly from screen to screen

Hierarchy: call attention to most important areas to guide the eye

Patterns of recommendations

Personality: determine how an application should feel to its users to dictate how things should look in a way that is appropriate for the organization.

Consistency

In order for communication to occur, an app must have patterns or conventions with shared or discernible meaning.

Consistency is the key to the interface functioning as a system and a visual language.

User expectations play a role in perception of consistency

Base decisions on what users expect as well as app goals

situation

User

location

age, background

experience

Past experiences and interpretations Active experience and interpretation

delivery method and topic

expectation

interpretation patterns

active screen

other screens

other applications

other screenssame application

External consistency

Are the application’s design, content, and behavior similar to other applications used by the same audience?

• Is your application part of a family or suite?

• Are there particular UI patterns that your users expect based on using other apps?

Internal consistency

Establish patterns within your app and use them consistently to create visual language.

If your users share similar characteristics and are familiar with an existing app, why not make everything consistent?

Why not just copy another app?

Why not just use the iOS or Android standards?

Starting with defaults

Defaults are a good starting point to create usable apps – but these results lack distinct personalities, and clearer visual cues could help use.

Differences in function

Differences in types of text

Differences in content elements

Indicating difference is important to communicating effectively

Defining differences: hierarchy

Consistency is about making things look and behave the same to take advantage of user familiarity and expectations

Hierarchy is about indicating differences that help people know how the app works, what’s important, and what to do.

Gestalt principles

Psychology principles outlining perception of spatial relationships

• Proximity implies grouping

• Similarity implies grouping

• Regular, simple patterns imply grouping

Help us understand how to place things

Which dot is more important?

Which is more important?

Other characteristics of hierarchy

Treatment: plain vs. fancy

Color: saturated (center) vs. muted

Hierarchy and complexity

Vs.

Unclear hierarchy

Improving hierarchy

• Reduce/hide elements to show what’s necessary #rst• Make most important clearly biggest and in most prominent spot

Personality

• Don Norman’s framework from Emotional Design: Why We Love (or Hate) Everyday Things

• Visceral design: appearance

• Behavioral design: pleasure and effectiveness

• Re!ective design: self-image, personal satisfaction, memories

Applying Norman’s framework to app design

2. Behavioral

User interpretation forms over time Content and delivery characteristics

1. Visceral

“Looks good – can I do what I wan

t?”

“This app is a great tool for me.”

3. Re!ective

Contentexpectation

“I can do most of what I want, ma be more

if I t

r.”

interpretation

How much appeal do we need?

Goal is not the app equivalent of Stark’s Alessi gold-plated juicer

http://www.flickr.com/photos/dickyfeng/6254476990/

Functionality vs. appeal

How “likable” does an app need to be?

Appeal affects interpretation of use

• Helps people know what to do, how to do it; makes people feel positive about your app

• “[P]erceptions of interface aesthetic are closely related to apparent usability and thus increase the likelihood that aesthetics may considerably affect system acceptability.” (Noam Tractinsky http://www.sigchi.org/chi97/proceedings/paper/nt.htm)

• Necessary degree of appeal varies based on situation and application, but you cannot not communicate with what you put forth.

Terms to help qualify design aesthetics

• Terms used to gauge website appeal in 2004 paper from Noam Tractinsky and Talia Lavie (Assessing dimensions of perceived visual aesthetics of web sites. International Journal of Human-Computer Studies, (60), 269-298)

• Classical: organized, clean, symmetric

• Expressive: design harmony, color harmony, dynamic expression

Classical

http://www.!ickr.com/photos/edwardlangley/8318320976/

Expressive

http://www.!ickr.com/photos/wwarby/4790992757/

Thoughtful decisions about:

• use

• expression or differentiation

grounded in:

• how people understand

• what is being communicated by whom

Criteria for aesthetic appeal

• How much appeal do you need?

• How much expression do you need?

Visual usability = useful appeal:

Select type, color, and images, and present them in keeping with the content, users, and organization.

Selecting expressive qualities

Selecting expressive qualities

How narrow is the user base? More focused users = more expressive personality may be appropriate

Selecting expressive qualities Wide user bases still want appeal. Classical aesthetics used to reveal structure and direct the eye are appropriate

http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover

Selecting expressive qualities

Is there a lot of competition?The more competition, the more style plays a role.

Selecting expressive qualities

How functional is your app? There are ways to make your highly functional application appealing in ways that support use

Smart, effective,appropriate, attractive

Selecting expressive qualities

Are the messages your UI sends appropriate for the situation of use and audience?

VS.

Business casual

High school?

Selecting expressive qualities

Do the qualities support cognitive mapping?

Does blue indicate water sports?

What color indicates cycling?

Strive for useful appeal

• Select color, type, and images to indicate similarities/differences, relative importance, and behavior.

• Get the cognitive mapping right.

• Limit expressive visual characteristics to create discernible patterns – so similarities and differences are clear.

When expression aids consistency, helps establish visual hierarchy, and is appropriate for the content, use, and organization, you have visual usability.

Exercise 1

Telling a story with consistency, hierarchy, and personality: Little Blue and Little Yellow

Exercise 1

Telling a story with consistency, hierarchy, and personality

A. Intro: Little Blue and Little Yellow - 6 mins.

Use the principles and tools to tell a simple story.

B. Using four colors of ripped paper and 4 frames, students will tell part of a simple story. Materials will be supplied – 4 sheets with frames, 4 colors each. 14-19 mins.

C. Share stories in teams. 10 mins

D. Discuss which principles were used and how. 10 mins.

• How did you establish consistency?

• How did you establish hierarchy?

• How did you establish personality?

Translating to features & pixels

In app design:

• Content and features are presented through layout, type, color, imagery and controls. Like the ripped paper, these are abstractions.

• Choose and use the tools to establish consistency and hierarchy and express appropriate personality, as in the exercise.

Consistency (what people expect)+Personality (expressive qualities that create affinity)+Hierarchy (creating clear organization)

people can make sense of what they see quickly, like Little Blue and Little Yellow

Requirements & constraints

Exercise 1: color, ripping, frames

Real-world:

• Company logo, brand standards

• Features/content

• User characteristics

• Technology platform

Gathering visual interface design requirements

• What are the application goals?

• What do we know/what can we learn about the users?

• What are technical implications?

• Document in brief – the rationale for current and future decision-making

situation

Users

location

age, background

goals

experience

delivery method& topic

expectation

interpretation

User situation, characteristics,& expectations

Organization’s goals, content, & delivery method

research & scenarios of use methods of delivery types of contentorganization’s goals

Organization Stakeholders/team

location situation

age, background

experience

role

location situation

age, background

experience

role

location situation

age, background

experience

role

patterns

Gathering visual interface design requirements

• Business goals

• Pointers to brand or identity standards that apply

• Technical information, such as platform

• Survey of competitors

• Content type

• User research

• User scenarios

• Adjectives describing the ideal personality

• A proposed approach, or starting point for the visual design

A Design Brief helps de#ne the area you have to design in. It may contain:

Exercise 2: design persona

De#ne personality of a weight-loss app – a version of SuperTracker for teens

• Goal: de#ne adjectives, traits, brand personality, voice, and engagement methods or approaches

• Format: tablet or phone

• See existing app for functionality:

https://www.choosemyplate.gov

http://aarronwalter.com/author/

Exercise 2: design persona

When reviewing docs:

• Popular apps for teens: what does this tell us about expectations?

• Personas: what does this tell us about devices? What about characteristics for appropriate app personality?

• Competitor apps: what, if anything, is appropriate for our users? Why or why not?

When reviewing decisions:

• Need to be able to state your reasons for your decisions.

• Rationale needs to be grounded in the information provided.

• See functionality at https://www.choosemyplate.gov

login: uxpatutorial pw: uxp4!

The visual usability tools

• Layout

• Type

• Color

• Imagery

• Controls and affordances

Contrast is the key to using the tools effectively to create consistency, hierarchy, and personality.

Layout

• Position/location of elements needs to match !ow.

• Tease !ow out of user scenarios. Treatment (size, color, #nish) affects this.

• Interface standards (e.g., iOS) provide familiarity, but may not match user’s !ow.

• Some position conventions, like search on the web, are written in stone at this point and would need a major reason to change.

Interpreting flow with layout

Does the layout help us know what to do?

Example: Epicurious iPhone app

• Typical scenarios:

• “It’s really hot today. What can I cook outside on the grill so I don’t have to heat up my kitchen?”

• “I want to #nd a chicken recipe for dinner.”

• “I have zucchini, peppers, and beef. What can I make with those ingredients?”

Feature implications

• Each scenario implies a different type of search

• Seasonal/promotional searches get priority – timely, demonstrate Epicurious’ unique value

• Guiding people to more detailed search options is another high priority

Layout reveals hierarchy of information

Time-sensitive info comes #rst. Common ingredient searches come #rst.

Creating relationships: grouping

Creating relationships: nesting

Nesting elements implies relationship with parent element

Grouping and nesting is clear in some areas and not in others

Alignment

• Alignment provides organization, supports page !ow

• Default should be !ush left. Decide what needs to be treated differently from there.

• Align to fewest possible (grid) lines.

Avoid common layout mistakes

• Provide just enough information

• Align elements unless emphasizing difference

• Group like elements

• Position elements to help make hierarchy clear

Type helps convey hierarchy

• For functional apps, choose type for readability

• Type size and weight = contrast = hierarchy and impact

Choosing type

• More choices than ever: Google Fonts, Typekit, embedding with @font-face ...

• But less is more: choose two or three weights of one typeface, or a couple weights of only two typefaces, one of which is for “visual accent”

Expression is possible with one font!

http://www.thinkingwithtype.com/contents/text/#Project:_Hierarchy

Epicurious’ typography

Helvetica in roman and bold weights doing 95% of the work with two typographic accents

Century Gothic (original)

Helvetica Light Rockwell LightEurostile

Experiments with the accent font

Choose type personality wisely

Avoid common type mistakes

• Default: use one clear typeface with a variety of weights

• Use type styles as the grammar of your visual language – as a consistent system

• Apply type styles to similar information across templates

• Try emphasizing difference and/or directing the eye with contrast via size and color before using an expressive font

Color

• Draws the eye

• Helps establish hierarchy

• Makes relationships visible

• Adds aesthetic appeal and conveys personality

Hue and saturation

• Hue: what we perceive as distinct colors

• Saturation: relative purity of color compared to gray

• Both factor into color contrast

Traffic light Olympics app Saturated + muted

Tints and shades

• Tints are lighter hue variations; shades are darker ones

• Using tints with shades creates contrast

Color and contrast

Color contrast is contextual – it !uctuates and depends on the whole

Same color, different warm/cool effect

Muted color, saturation effect changes based on contextual colors

Color and contrast

How much contrast do you want? Where do you want to draw the eye, and why?

• Which element is the “star” of the screen? Which elements are supporting players?

• Do you need to draw attention to many small controls? Consider an accent color.

Color and error messaging

Too much contrast – “visual spanking”

Polite use of contrast

Tips for choosing color

• Type color must contrast sufficiently with background

• Pick a “lead” color that will either have the job of conveying personality or will support a palette of colors used in small amounts

• Pick an accent color to highlight small controls or important information

• Shades and/or tints make palettes work

Tips for choosing color

It’s not the color; it’s the use of the color that makes it work or not.

Netflix successfully uses red as a background color, to draw the eye to important elements, and help to communicate their brand

Target successfully uses red to create visual hierarchy and communicate their brand

Santaner does not use red successfully. Too much red, too many similar sizes of red elements, too evenly distributed

Tips for choosing color

Color used strategically to direct the eye.

Color template

“lead” color shade, tint or tone

lighter tint or tone

even lighter tint or tone

accentcolor

text color darker shadeor tone

lighter tintor tone

even lighter tint or tone

supportcolor

shade, tint or tone

lighter tintor tone

even lighter tint or tone

add shades, tints, and tones if needed

add colors if needed

shade, tint, or tone

of accent color

Epicurious color palette

accentcolor

“lead” shades, tints and tones

secondaryaccent color

text color

“lead” color

Avoid common color mistakes

• Not enough contrast

• Too much contrast

• Too many colors

• Not enough color

• Use of color as the only means of differentiation

• Color applied randomly, not strategically or systematically

Imagery

Images need to play a role:

• Draw attention

• Provide explanation or show detail

• Represent content

• Express feeling, brand, or style

• Invite interaction

• Reinforce similarities or differences

Defining rationale for imagery

There are strategic and tactical aspects of each image type and image

General

Speci!c

Purpose Type Presentation

Role Subjectmatter Qualities

Strategic Tactical

Early in process Later in process

Photography

Use when realism matters, for example when people are considering a place to visit, or a purchase of goods or personal services

Video

Use when explaining a process, for example when describing details best revealed through motion

Animation

• Use when giving the gist, not the details

• When motion helps convey personality

• When still images aren’t enough to attract attention, or novelty is needed/appropriate for the personality

Logos

Like a !ag represents a country, logos are visual symbols that represent a product, service or organization

Symbols

• Represent an object, action, or idea, but don’t need to look like what they represent

• Use when communicating something universally understood by your audience

Icons

• Use when you can represent something with a simple picture, and want to add variety for visual interest

• When app standards call for an icon

Cute, but any relationship to content, org, or users?

Icon tips

• Non-obvious icons should include type.

• All icons that play the same role need to use the same style.

These food icons are consistent in style and have type to be completely clear.

Data visualizations:

• Use when visually representing factual or quantitative data with charts, graphs, etc. enhances understanding

• When comparing multiple data sets to quickly understand differences

http://fathom.info/salaryper/

Can I click this?

More on charts & graphs

• All graphics that play the same role need to speak the same visual language.

• Manipulate contrast and hierarchy with choice of color and size to highlight signi#cance.

Maps:

• Use when people need to #nd a destination or visualize relationships between locations

• When providing visual reference for a location adds meaning/recognition/context

Maps

Maps

Textures

Image effects that change the surface of the screen

Backgrounds

Any image or solid color appearing behind content

Gradations

Fields of one or more colors varying in shade give the illusion of depth

Patterns, textures, backgrounds, gradations

Use when content of pattern or texture adds meaning:

• Affecting mood

• Conveying sense of space or depth

• Differentiating sections of content

• Communicating personality or brand

• Connecting visual design across platforms and mediums

Avoid common imagery mistakes

• All images need to play a role

• Present images clearly

• Present only essential info. in an image

• Design and present images of the same type consistently

• Include a caption or supporting info unless image meaning is obvious

Controls and affordances

• Apply to visual usability because visual design can help or hinder identifying a control and revealing its affordances

• “Visual” extends to motion here: rollovers, sliding drawers, control animation, etc.

• Details matter, especially for app personality

• Styling controls supports personality

Default vs. custom

Consistent cross-platform personality through styling of controls

Cross-platform personality

Avoid common mistakes

• Only interactive areas should feel interactive; read-only areas should not

• Provide feedback

• Apply visual design to form controls

Exercise 3

• Applying what you’ve learned to a sample application: mobile version of SuperTracker for teens

• We provide rough wireframes as a starting point, along with the information from the design brief exercise.

Step 1: Analyze wireframes for consistency, hierarchy, and personality.

• What would improve them? Discuss in your group. Why?

• Option: rework the wireframes to improve them.

Step 2: Use “the tools” to communicate consistency, hierarchy, and personality for the screens provided.

• If you don’t have time to try something, write down your rationale or thinking for the choices you’d make.

Exercise 3

Thank you!

Tania Schlatter@taniaschlattertania@nimblepartners.com

Debby Levinson@nimblepartnersdebby@nimblepartners.com

@visualusability