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

4. Complex, functional apps,
not simple apps

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

9. Is this for me?

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

12. Consistency, Hierarchy & Personality

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

33. Unclear hierarchy
Meta-principles: hierarchy

34. Improving hierarchy
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

40. Functionality vs. appeal
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

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

43. Expressive
http://www.flickr.com/photos/wwarby/4790992757/

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.

62. Creating relationships: grouping
Tools: layout

63. Creating relationships: nesting
Tools: layout

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

96. Cross-platform personality
Tools: controls & affordances

97. Cross-platform personality
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