visual design principles & practices for web and mobile apps

Visual design principles& practicesfor web and mobile apps

Tania Schlatter & Deborah Levinson

UX & IA UX & IA + UI & visual design

Nimble Partners

Work intentionally blurred – under NDA

Schedule

9-9:15 am Intros 9:15-9:35 Visual usability & UX. Meta-principles 9:35-10:15 Exercise 1: storytelling through abstraction 10:15-10:30 Break 10:30-11:30 Lecture: the meta-principles 11:30-12:00 Exercise 2: design personas 12:00-1:00 pm Lunch 1:00-2:10 Lecture: the visual usability tools 2:10-2:50 Exercise 3: applying what you’ve learned 2:50-3:00 Discussion & wrap up

Complex, functional apps, not simple apps

Visual is part of the experience!

...so why do some organizations treat it as a separate effort?

MailChimp.com @ 2009 Mint.com @ 2012

Focusing on interface as a key part of the UX makes a difference

Does this interface inspire you to apply for a job?

Details matter. One of these is “just right.”

Is this for me?

Focusing on interface as a key part of the UX

makes a difference.

• It makes a difference to people who are evaluating your app or org.• It makes a difference to people who use your app.

• It makes a difference to design and development team morale.• It makes a difference to your organization’s bottom line.

We can do better.

Tog says:

• Error prevention

• Fitts' Law

• Latency Reduction

• Recognition rather than recall

4 graphic design principles:Contrast, Repetition, Alignment, Proximity = CRAP

iOS 6 Human Interface Guidelines’ Principles:

• Aesthetic integrity• Consistency• Direct manipulation• Feedback• Metaphors• User control

Android Design Principles:

• Enchant me

• Simplify my Life

• Make me Amazing

Gestalt principles:

1 Proximity2 Similarity3 Prägnanz

(Figure-Ground)4 Symmetry5 "Common Fate"6 Closure

NN/G’s reports have 2,397 usability guidelines!

Usability.gov guidelines

iOS 7 Human Interface Guidelines:

• Defer to content• Provide clarity• Let color simplify the UI• Use system fonts• Embrace borderless buttons• Use depth to communicate

Consistency, Hierarchy & Personality

Consistency: establishing or adopting appropriate patterns

Hierarchy: calling attention to the most important things

Personality: choosing appropriate expressive characteristics

Consistency, hierarchy & personalityare communicated via “the tools”

of visual design: layout, type, color, imagery+

controls & affordances

from Understanding Comics by Scott McCloud

Schedule


Telling a story with consistency, hierarchy, and personality

Exercise 1

• Use the principles to help tell a simple story

• Use 4 colors of paper and 4 frames

• Share stories in teams

• Group: discuss which principles were used and how

- How did you establish consistency?

- How did you establish hierarchy?

- How did you convey personality?

Schedule


Consistency: managing expectations and patterns

Like spoken language, a UI must have patterns or conventions so people can understand.

Meta-principles: consistency

Goal: de"ne a consistent framework that can #ex

Internal consistency

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


Differences in function – style

Differences in types of text – font

Differences in content types – layout

Indicating difference is important to communicating effectively as well


External consistency

Decisions about consistency are linked to overall app strategy and UX.


MS Word

Google

Consistency helps ease changes through familiarity.

External consistency

Inconsistency helps differentiate.


MS Word

750 Words

Some expectations can be anticipated, some cannot

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


Goal: balance familiarity with strategic differences.

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 – but visual cues could help use and these apps lack distinct personalities that can help make them successful.


Hierarchy: defining meaningful differences

• Consistency is about making decisions about how and where elements appear, look and behave to take advantage of expectations.

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

Meta-principles: hierarchy

Unclear hierarchy


Improving hierarchy


Gestalt principles

Psychological principles outlining perception of spatial relationships

• Proximity implies grouping

• Similarity implies grouping

• Figure and ground imply space and hierarchy

• Our eye is drawn to differences

Help us understand how to place things

Contrast is the key ingredient


http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm



Color: muted vs. saturated

Treatment: plain vs. fancy

Stylistic details affect visual hierarchy


The more elements you have, the harder it is to establish a clear hierarchy.

Complexity adds to the challenge


Meta-principles: personality

Personality: characteristics that affect interpretation

“[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


How much appeal do we need?

Goal is not novelty for novelty’s sake – the app equivalent of Stark’s Alessi gold-plated juicer

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

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

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


Functionality vs. appeal


Terms to help qualify design aesthetics

Terms used to gauge website appeal in 2004 paper from Noam Tractinsky and Talia Lavie

• Classical: organized, clean, symmetric

• Expressive: design harmony, color harmony, dynamic expression

Classical

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

http://www.flickr.com/photos/edwardlangley/8318320976/


Expressive

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




Thoughtful decisions about expression and differentiation grounded in:

1. users and context

• brain: how people see and understand

• individual: age, demographics, experiences & expectations

• situation: device, setting, goals

2. what is being communicated by whom

• content: what is being represented

• sender: who the information & interactions are from

Criteria for decisions about personality


• 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


How functional does it need to be?

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






How narrow is the user base?



Is there a lot of competition?



Do the expressive qualities support cognitive mapping?



Are the characteristics appropriate for the situation?

VS.



Are the characteristics appropriate for the situation?

Gathering visual interface design requirements

• What are the business’ application goals?

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

• What are technical implications?

+• What personality do we want to convey?

Schedule


Exercise 2

• De"ne the personality for a weight-loss app: mobile phone version of SuperTracker for teens

• Goal: begin to de"ne an appropriate personality for your app.

• de"ne 5-7 traits for your app – what it should be like

• complete a personality map

Resources: MailChimp example, simple ad-hoc personas, existing app

https://www.choosemyplate.gov

login: uxpatutorial pw: uxp4!

Need to be able to state your reasons for your decisions!

http://aarronwalter.com/design-personas/





Schedule


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.

Tools: intro

Tools: layout

Layout

• Position/location of elements needs to match #ow – tease #ow out of user scenarios.

• 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.

Tools: layout

Interpreting flow with layout

Tools: layout

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?”

Tools: layout

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

Tools: layout

Layout reveals hierarchy of information

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

Tools: layout

Creating relationships: grouping

Tools: layout

Creating relationships: nesting

Tools: layout

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.

Tools: layout

Avoid common mistakes

• Provide just enough information

• Align elements unless emphasizing difference

• Group like elements

• Position elements to help make hierarchy clear

Tools: type

Type

• For functional apps, choose type for readability

• Type size and weight = contrast = hierarchy and impact

Tools: type

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

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

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

Tools: type

Epicurious’ typography

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

Tools: type

Century Gothic (original)

Helvetica Light Rockwell LightEurostile

Experiments with the accent font

Tools: type

Choose type personality wisely

Tools: type

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

Tools: color

Color

• Draws the eye

• Helps establish hierarchy

• Makes relationships visible

• Adds aesthetic appeal and conveys personality

Tools: color

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

Tools: color

Tints and shades

• Tints are lighter hue variations; shades are darker ones

• Using tints with shades creates contrast

Tools: color

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

Tools: color

Tips for choosing color to create contrast

• 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

Tools: color

Tips for choosing color to create contrast

Too much contrast – “visual spanking”

Polite use of contrast

Tools: color

Tips for choosing color

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

In two of these three examples, use of red is successful.

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


supportcolor

shade, tint or tone

lighter tintor tone


add shades, tints, and tones if needed

add colors if needed

shade, tint, or tone

of accent color

Tools: color

Epicurious color palette

accentcolor

“lead” shades, tints and tones

secondaryaccent color

text color

“lead” color

Tools: color

Tools: color


• Use color to emphasize similarities and differences, which support use

• Color has its own tone of voice – shout or whisper with intent

• Follow accessibility guidelines for color use and contrast

Tools: imagery

Imagery

Imagery has to play a role. It has a job to do:

General

Speci!c

Purpose Type Presentation

Role Subjectmatter Qualities

Strategic Tactical

Early in process Later in process

• Draw attention

• Provide explanation or show detail

• Represent content

• Express feeling, brand, or style

• Invite interaction

• Reinforce similarities or differences

Tools: imagery

Types of imagery

Photography

• Use when realism matters

• When people consider a visit, or a purchase of goods or personal services

Video

• Use when explaining a process

• Describing details best revealed through motion

Tools: imagery

Animation

• Giving the gist of a process, not the details

• Communicating with diverse cultures, where details might not translate

• When motion helps convey personality

• When still images aren’t enough, or novelty is needed

Types of imagery

Tools: imagery

Types of imagery

Logos

• On a product or branded service

• To represent a product

• To represent parent organization

Tools: imagery

Icons

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

• When app standards call for an icon

• Non-obvious icons should include type

• Icons with the same role should use the same style

Symbols

• Represent object, action, or idea, but don’t need to resemble it

• Use when communicating something your audience universally understands

• Use when common symbols exist for the concept represented

Types of imagery

Tools: imagery

Types of imagery

Charts and graphs, including interactive data visualizations

• When visually representing factual or quantitative data with enhances understanding

• When comparing data sets to quickly understand differences

• Need visual relationships to other elements – all graphics need to speak the same language.

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

Tools: imagery

Types of imagery

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

Tools: imagery

Types of imagery

Patterns: repeated areas of an image

Tools: imagery

Types of imagery

Textures: image effects that change the surface of the screen

Tools: imagery

Types of imagery

Backgrounds: any image or solid color appearing behind content

Gradations: "elds of one or more colors varying in shade to give the illusion of depth

Tools: imagery

Types of imagery

Use patterns, textures, backgrounds, or gradations when their content 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

Tools: imagery


• Only use images that play a role in the overall story

• Choose the right type of image for the job

• Present images clearly

• Design and present images of the same type consistently

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

Tools: controls & affordances

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


Cross-platform personality



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

• Provide feedback

• Apply visual design to form controls

Schedule

9-9:15 am Intros 9:15-9:35 Visual usability & UX. Meta-principles 9:35-10:15 Exercise 1: storytelling through abstraction 10:15-10:30 Break 10:30-11:30 Lecture: the meta-principles 11:30-12:00 Exercise 2: design personas 12:00-1:00 pm Lunch 1:00-2:10 Lecture: the visual usability tools 2:10-2:50 Exercise 3: applying what you’ve learned 2:50 -3:00 Discussion & wrap up

Strive for useful appeal

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

• Get the cognitive mapping right.

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


Apply: overall tips

Exercise 3

• Work in groups of 3. Evaluate the wireframes in terms of consistency, hierarchy and personality.

• Imagine, discuss and sketch options and variations the next round. How can you design using the three principles?

- Think about consistency. What needs to be consistent? - Manipulate the layout to help with hierarchy. - How would you apply visual design to these or other controls

to address/improve consistency, hierarchy, and personality?

• Fill out the Visual Lexicon template.

Use the content/features provided. ~15 mins.

Dropbox: http://bit.ly/1aCnceD

• Share what would change, why, and how.

http://bit.ly/1aCnceD

http://bit.ly/1aCnceD

Schedule


Thank you!

Tania [email protected]

@taniaschlatter

Debby [email protected]

@nimblepartners@visualusability

mailto:[email protected]




visual design principles & practices for web and mobile apps

Design

metaprinciples exercise

android design principles

internal consistency

tools of visual design

ui visual design

intros visual usability

visual language

visual cues