Visual design principles & practices for web and mobile apps

Tania Schlatter
Tania SchlatterUX design consultant, educator & author
Visual design principles
& practices
for web and mobile apps

Tania Schlatter & Deborah Levinson
Work intentionally blurred –
under NDA

UX & IA
Nimble Partners

UX & IA + UI & visual design
Schedule

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
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

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

Mint.com @ 2012
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

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

• Latency
Reduction

iOS 6 Human Interface
Guidelines’ Principles:

• Recognition
rather than
recall

• Defer to content
• Provide clarity

• Aesthetic integrity
• Consistency

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

Usability.gov
guidelines

iOS 7 Human Interface Guidelines:

• Let color simplify the UI
• Use system fonts

• Direct manipulation
• Feedback

• Embrace borderless buttons
• Use depth to communicate

• Metaphors
• User control

Gestalt principles:
Android Design Principles:
• Enchant me

1
2
3

• Simplify my Life
• Make me Amazing

4
5
6

Proximity
Similarity
Prägnanz
(Figure-Ground)
Symmetry
"Common Fate"
Closure
Consistency, Hierarchy & Personality
Consistency: establishing or adopting appropriate patterns

Hierarchy: calling attention to the most important things

Personality: choosing appropriate expressive characteristics
Consistency, hierarchy & personality
are communicated via “the tools”
of visual design: layout, type, color, imagery
+
controls & affordances

from Understanding Comics by Scott McCloud
Visual design principles & practices for web and mobile apps
Schedule

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
Telling a story with
consistency, hierarchy,
and personality
Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile apps
Visual design principles & practices for web and mobile apps
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

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
Consistency: managing expectations and patterns
Like spoken language, a UI must have patterns or conventions so
people can understand.
Goal: define a consistent framework that can flex

Meta-principles: consistency
Internal consistency
Establish patterns within your app and use them consistently to create visual language.

Meta-principles: consistency
Indicating difference is important to
communicating effectively as well
Differences in function – style

Differences in types of text – font

Meta-principles: consistency

Differences in content types – layout
External consistency
Decisions about consistency are linked to overall app strategy and UX.

MS Word

Google

Consistency helps ease changes through familiarity.

Meta-principles: consistency
External consistency

MS Word

750 Words

Inconsistency helps differentiate.

Meta-principles: consistency
Some expectations can be anticipated, some cannot
User

location
c
expe

int
erp

exp

e ri e n c e

n

tatio

c
pi

reens
other sc
other
ions
applicat

other
sc
same reens
applic
ation

backgrou
nd
ge,
a

method an
ery
dt
v
o
eli
d
active
screen

ret
ati
on

sit u ati o n

Past experiences and interpretations

p atte r n s

Active experience and interpretation

Goal: balance familiarity with strategic differences.

Meta-principles: consistency
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?

Meta-principles: consistency
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.

Meta-principles: consistency
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

Meta-principles: hierarchy
Improving hierarchy

Meta-principles: hierarchy
Gestalt principles
Psychological principles outlining perception of
spatial relationships

•
•
•

Proximity implies grouping

•

Our eye is drawn to differences

Similarity implies grouping
Figure and ground imply space and
hierarchy

Help us understand how to place things
Contrast is the key ingredient
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm

Meta-principles: hierarchy
Stylistic details affect visual hierarchy
Color: muted vs. saturated

Treatment: plain vs. fancy

Meta-principles: hierarchy
Complexity adds to the challenge
The more elements you have, the harder it is to establish a clear hierarchy.

Meta-principles: hierarchy
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

Meta-principles: personality
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/

Meta-principles: personality
Functionality vs. appeal

Meta-principles: personality
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

Meta-principles: personality
Classical

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

http://www.flickr.com/photos/wwarby/4790992757/
Criteria for decisions about personality
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

Meta-principles: personality
Selecting expressive qualities
•

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.

Meta-principles: personality
Selecting expressive qualities
How functional does it need to be?

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

Meta-principles: personality
Selecting expressive qualities
How narrow is the user base?

Meta-principles: personality
Selecting expressive qualities
Is there a lot of competition?

Meta-principles: personality
Selecting expressive qualities
Do the expressive qualities support cognitive mapping?

Meta-principles: personality
Selecting expressive qualities
Are the characteristics appropriate for the situation?

VS.

Meta-principles: personality
Selecting expressive qualities
Are the characteristics appropriate for the situation?

Meta-principles: personality
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

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
Exercise 2
• Define the personality for a weight-loss app: mobile phone version of
SuperTracker for teens
• Goal: begin to define an appropriate personality for your app.
• define 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

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
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
Layout

•

Position/location of elements needs to match flow – tease flow
out of user scenarios.

•

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

•

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 find 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

•

Guiding people to more detailed search options is another
high priority

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

Tools: layout
Layout reveals hierarchy of information

Time-sensitive info comes first.

Tools: layout

Common ingredient searches
come first.
Creating relationships: grouping

Tools: layout
Creating relationships: nesting

Tools: layout
Alignment

•
•

Alignment provides organization, supports page flow

•

Align to fewest possible (grid) lines.

Default should be flush left. Decide what needs to be treated
differently from there.

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: layout
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

Tools: type
Epicurious’ typography

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

Tools: type
Experiments with the accent font

Century Gothic
(original)

Tools: type

Helvetica Light

Eurostile

Rockwell Light
Choose type personality wisely

Tools: type
Avoid common type mistakes

•
•

Default: use one clear typeface with a variety of weights

•
•

Apply type styles to similar information across templates

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

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

Tools: type
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

Tools: color

Olympics app

Saturated + muted
Tints and shades

•
•

Tools: color

Tints are lighter hue
variations; shades
are darker ones
Using tints with
shades creates
contrast
Color and contrast
Color contrast is contextual – it fluctuates and depends on
the whole

Same color, different
warm/cool effect

Tools: color

Muted color, saturation effect changes based on contextual colors
Tips for choosing color to create contrast

•
•

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

•

Tools: color

Type color must
contrast sufficiently
with background

Shades and/or tints
make palettes work
Tips for choosing color to create contrast
Too much contrast –
“visual spanking”

Tools: color

Polite use of contrast
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.

Tools: color
Color template
text color

Tools: color

even lighter
tint or tone

shade, tint or
tone

lighter
tint or tone

even lighter
tint or tone

support
color

shade,
tint, or tone
of accent color

lighter tint
or tone

“lead” color

accent
color

darker shade
or tone

shade, tint or
tone

lighter tint
or tone

even lighter
tint or tone

add shades, tints, and tones if needed

add colors
if needed
Epicurious color palette

text color

“lead” color

secondary
accent color

Tools: color

accent
“lead”
color shades, tints
and tones
Avoid common mistakes

•

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: color
Imagery
Imagery has to play a role. It has a job to do:

•
•
•
•
•
•

Draw attention
General

Provide explanation or
show detail

Strategic

Purpose

Tactical

Type

Presentation

Subject
matter

Qualities

Represent content
Role

Express feeling, brand,
or style
Invite interaction
Reinforce similarities or
differences

Tools: imagery

Specific

Early in process

Later in process
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
Types of imagery
Animation

•
•

Giving the gist of a process, not the details

•
•

When motion helps convey personality

Communicating with diverse cultures, where details might not
translate

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

Tools: imagery
Types of imagery
Logos

•
•
•

On a product or branded service
To represent a product
To represent parent organization

Tools: imagery
Types of 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

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

Tools: imagery
Types of imagery
Maps

•

Use when people need to find 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

Tools: imagery

Gradations: fields of one or more
colors varying in shade to give the
illusion of depth
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
Avoid common mistakes

•
•
•
•
•

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: imagery
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

Tools: controls & affordances
Default vs. custom

Tools: controls & affordances
Cross-platform personality

Tools: controls & affordances
Cross-platform personality

Tools: controls & affordances
Avoid common mistakes

•

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

•
•

Provide feedback
Apply visual design to form controls

Tools: controls & affordances
Schedule

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50 -3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
Selecting expressive qualities
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.
Schedule

9-9:15 am
9:15-9:35
9:35-10:15
10:15-10:30
10:30-11:30
11:30-12:00
12:00-1:00 pm
1:00-2:10
2:10-2:50
2:50-3:00

Intros
Visual usability & UX. Meta-principles
Exercise 1: storytelling through abstraction
Break
Lecture: the meta-principles
Exercise 2: design personas
Lunch
Lecture: the visual usability tools
Exercise 3: applying what you’ve learned
Discussion & wrap up
Thank you!
Tania Schlatter
tania@nimblepartners.com
@taniaschlatter
Debby Levinson
debby@nimblepartners.com
@nimblepartners

@visualusability
1 of 103

More Related Content

Viewers also liked(20)

Visual Design Fundamentals Visual Design Fundamentals
Visual Design Fundamentals
Oen Michael Hammonds3K views
Visual Design BasicsVisual Design Basics
Visual Design Basics
Sumeet Moghe45.9K views
Visual Design Thinking WorkshopVisual Design Thinking Workshop
Visual Design Thinking Workshop
Alli McKee31.1K views
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design Principles
Mohamad Sani1.8K views
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design Principles
Doaa El Fadally2K views
Intro to visual design workshopIntro to visual design workshop
Intro to visual design workshop
Nicole Saidy1.3K views
Elements Of Visual DesignElements Of Visual Design
Elements Of Visual Design
hweeling34K views
Gestalt Design Principles for DevelopersGestalt Design Principles for Developers
Gestalt Design Principles for Developers
Erin 'Folletto' Casali53K views
Visual Design with DataVisual Design with Data
Visual Design with Data
Seth Familian2.9M views
Design Isn't VisualDesign Isn't Visual
Design Isn't Visual
Thomas Drach4.7K views
The principles of designThe principles of design
The principles of design
Trinity Dwarka951 views
Basic visual design principlesBasic visual design principles
Basic visual design principles
Ahmet Durmaz1.6K views
Visual basic للجميع 2Visual basic للجميع 2
Visual basic للجميع 2
hassan14885.7K views
Engaging mobile and website applicationsEngaging mobile and website applications
Engaging mobile and website applications
Panos Virvilios153 views
Framing and compositionFraming and composition
Framing and composition
KatherineGrainge182 views

Similar to Visual design principles & practices for web and mobile apps(20)

Recently uploaded(20)

Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views
polarispolaris
polaris
scribddarkened352233 views
Viking passive.pdfViking passive.pdf
Viking passive.pdf
Matis Velt15 views
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris80 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 views
TISFLEET WEB DESIGN PROJECTTISFLEET WEB DESIGN PROJECT
TISFLEET WEB DESIGN PROJECT
Rabius Sany38 views
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper216 views
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman258 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe239 views
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman10 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 views
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media12 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 views

Visual design principles & practices for web and mobile apps

  • 1. Visual design principles & practices for web and mobile apps Tania Schlatter & Deborah Levinson
  • 2. Work intentionally blurred – under NDA UX & IA Nimble Partners UX & IA + UI & visual design
  • 3. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 5. Visual is part of the experience! ...so why do some organizations treat it as a separate effort?
  • 6. MailChimp.com @ 2009 Focusing on interface as a key part of the UX makes a difference Mint.com @ 2012
  • 7. Does this interface inspire you to apply for a job?
  • 8. Details matter. One of these is “just right.”
  • 10. 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.
  • 11. Tog says: • Error prevention • Fitts' Law 4 graphic design principles: Contrast, Repetition, Alignment, Proximity = CRAP • Latency Reduction iOS 6 Human Interface Guidelines’ Principles: • Recognition rather than recall • Defer to content • Provide clarity • Aesthetic integrity • Consistency NN/G’s reports have 2,397 usability guidelines! Usability.gov guidelines iOS 7 Human Interface Guidelines: • Let color simplify the UI • Use system fonts • Direct manipulation • Feedback • Embrace borderless buttons • Use depth to communicate • Metaphors • User control Gestalt principles: Android Design Principles: • Enchant me 1 2 3 • Simplify my Life • Make me Amazing 4 5 6 Proximity Similarity Prägnanz (Figure-Ground) Symmetry "Common Fate" Closure
  • 13. Consistency: establishing or adopting appropriate patterns Hierarchy: calling attention to the most important things Personality: choosing appropriate expressive characteristics
  • 14. Consistency, hierarchy & personality are communicated via “the tools” of visual design: layout, type, color, imagery + controls & affordances from Understanding Comics by Scott McCloud
  • 16. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 17. Telling a story with consistency, hierarchy, and personality
  • 22. 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?
  • 23. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 24. Consistency: managing expectations and patterns Like spoken language, a UI must have patterns or conventions so people can understand. Goal: define a consistent framework that can flex Meta-principles: consistency
  • 25. Internal consistency Establish patterns within your app and use them consistently to create visual language. Meta-principles: consistency
  • 26. Indicating difference is important to communicating effectively as well Differences in function – style Differences in types of text – font Meta-principles: consistency Differences in content types – layout
  • 27. External consistency Decisions about consistency are linked to overall app strategy and UX. MS Word Google Consistency helps ease changes through familiarity. Meta-principles: consistency
  • 28. External consistency MS Word 750 Words Inconsistency helps differentiate. Meta-principles: consistency
  • 29. Some expectations can be anticipated, some cannot User location c expe int erp exp e ri e n c e n tatio c pi reens other sc other ions applicat other sc same reens applic ation backgrou nd ge, a method an ery dt v o eli d active screen ret ati on sit u ati o n Past experiences and interpretations p atte r n s Active experience and interpretation Goal: balance familiarity with strategic differences. Meta-principles: consistency
  • 30. 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? Meta-principles: consistency
  • 31. 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. Meta-principles: consistency
  • 32. 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
  • 35. Gestalt principles Psychological principles outlining perception of spatial relationships • • • Proximity implies grouping • Our eye is drawn to differences Similarity implies grouping Figure and ground imply space and hierarchy Help us understand how to place things Contrast is the key ingredient http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm Meta-principles: hierarchy
  • 36. Stylistic details affect visual hierarchy Color: muted vs. saturated Treatment: plain vs. fancy Meta-principles: hierarchy
  • 37. Complexity adds to the challenge The more elements you have, the harder it is to establish a clear hierarchy. Meta-principles: hierarchy
  • 38. 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 Meta-principles: personality
  • 39. 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/ Meta-principles: personality
  • 41. 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 Meta-principles: personality
  • 44. Criteria for decisions about personality 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 Meta-principles: personality
  • 45. Selecting expressive qualities • 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. Meta-principles: personality
  • 46. Selecting expressive qualities How functional does it need to be? http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover Meta-principles: personality
  • 47. Selecting expressive qualities How narrow is the user base? Meta-principles: personality
  • 48. Selecting expressive qualities Is there a lot of competition? Meta-principles: personality
  • 49. Selecting expressive qualities Do the expressive qualities support cognitive mapping? Meta-principles: personality
  • 50. Selecting expressive qualities Are the characteristics appropriate for the situation? VS. Meta-principles: personality
  • 51. Selecting expressive qualities Are the characteristics appropriate for the situation? Meta-principles: personality
  • 52. 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?
  • 53. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 54. Exercise 2 • Define the personality for a weight-loss app: mobile phone version of SuperTracker for teens • Goal: begin to define an appropriate personality for your app. • define 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/
  • 55. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 56. 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
  • 57. Layout • Position/location of elements needs to match flow – tease flow out of user scenarios. • Interface standards (e.g., iOS) provide familiarity, but may not match user’s flow. • 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
  • 58. Interpreting flow with layout Tools: layout
  • 59. 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 find a chicken recipe for dinner.” “I have zucchini, peppers, and beef. What can I make with those ingredients?” Tools: layout
  • 60. Feature implications • • Each scenario implies a different type of search • Guiding people to more detailed search options is another high priority Seasonal/promotional searches get priority – timely, demonstrate Epicurious’ unique value Tools: layout
  • 61. Layout reveals hierarchy of information Time-sensitive info comes first. Tools: layout Common ingredient searches come first.
  • 64. Alignment • • Alignment provides organization, supports page flow • Align to fewest possible (grid) lines. Default should be flush left. Decide what needs to be treated differently from there. Tools: layout
  • 65. Avoid common mistakes • • • • Provide just enough information Align elements unless emphasizing difference Group like elements Position elements to help make hierarchy clear Tools: layout
  • 66. Type • • For functional apps, choose type for readability Type size and weight = contrast = hierarchy and impact Tools: type
  • 67. 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 Tools: type
  • 68. Epicurious’ typography Helvetica in roman and bold weights doing 95% of the work with two typographic accents Tools: type
  • 69. Experiments with the accent font Century Gothic (original) Tools: type Helvetica Light Eurostile Rockwell Light
  • 70. Choose type personality wisely Tools: type
  • 71. Avoid common type mistakes • • Default: use one clear typeface with a variety of weights • • Apply type styles to similar information across templates Use type styles as the grammar of your visual language – as a consistent system Try emphasizing difference and/or directing the eye with contrast via size and color before using an expressive font Tools: type
  • 72. Color • • • • Draws the eye Helps establish hierarchy Makes relationships visible Adds aesthetic appeal and conveys personality Tools: color
  • 73. 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 Tools: color Olympics app Saturated + muted
  • 74. Tints and shades • • Tools: color Tints are lighter hue variations; shades are darker ones Using tints with shades creates contrast
  • 75. Color and contrast Color contrast is contextual – it fluctuates and depends on the whole Same color, different warm/cool effect Tools: color Muted color, saturation effect changes based on contextual colors
  • 76. Tips for choosing color to create contrast • • 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 • Tools: color Type color must contrast sufficiently with background Shades and/or tints make palettes work
  • 77. Tips for choosing color to create contrast Too much contrast – “visual spanking” Tools: color Polite use of contrast
  • 78. 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. Tools: color
  • 79. Color template text color Tools: color even lighter tint or tone shade, tint or tone lighter tint or tone even lighter tint or tone support color shade, tint, or tone of accent color lighter tint or tone “lead” color accent color darker shade or tone shade, tint or tone lighter tint or tone even lighter tint or tone add shades, tints, and tones if needed add colors if needed
  • 80. Epicurious color palette text color “lead” color secondary accent color Tools: color accent “lead” color shades, tints and tones
  • 81. Avoid common mistakes • 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: color
  • 82. Imagery Imagery has to play a role. It has a job to do: • • • • • • Draw attention General Provide explanation or show detail Strategic Purpose Tactical Type Presentation Subject matter Qualities Represent content Role Express feeling, brand, or style Invite interaction Reinforce similarities or differences Tools: imagery Specific Early in process Later in process
  • 83. 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
  • 84. Types of imagery Animation • • Giving the gist of a process, not the details • • When motion helps convey personality Communicating with diverse cultures, where details might not translate When still images aren’t enough, or novelty is needed Tools: imagery
  • 85. Types of imagery Logos • • • On a product or branded service To represent a product To represent parent organization Tools: imagery
  • 86. Types of 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 Tools: imagery
  • 87. 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 significance. Tools: imagery
  • 88. Types of imagery Maps • Use when people need to find a destination or visualize relationships between locations • When providing visual reference for a location adds meaning/ recognition/context Tools: imagery
  • 89. Types of imagery Patterns: repeated areas of an image Tools: imagery
  • 90. Types of imagery Textures: image effects that change the surface of the screen Tools: imagery
  • 91. Types of imagery Backgrounds: any image or solid color appearing behind content Tools: imagery Gradations: fields of one or more colors varying in shade to give the illusion of depth
  • 92. 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
  • 93. Avoid common mistakes • • • • • 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: imagery
  • 94. 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 Tools: controls & affordances
  • 95. Default vs. custom Tools: controls & affordances
  • 98. Avoid common mistakes • Only interactive areas should feel interactive; read-only areas should not • • Provide feedback Apply visual design to form controls Tools: controls & affordances
  • 99. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50 -3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 100. Selecting expressive qualities 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
  • 101. 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.
  • 102. Schedule 9-9:15 am 9:15-9:35 9:35-10:15 10:15-10:30 10:30-11:30 11:30-12:00 12:00-1:00 pm 1:00-2:10 2:10-2:50 2:50-3:00 Intros Visual usability & UX. Meta-principles Exercise 1: storytelling through abstraction Break Lecture: the meta-principles Exercise 2: design personas Lunch Lecture: the visual usability tools Exercise 3: applying what you’ve learned Discussion & wrap up
  • 103. Thank you! Tania Schlatter tania@nimblepartners.com @taniaschlatter Debby Levinson debby@nimblepartners.com @nimblepartners @visualusability