These slides are from a one-day tutorial presented at the UXPA 2013 conference. The class is designed to help product teams bridge the gap between applications that look great or are highly functional. This class provides guidelines and examples about how to make visual design decisions that reinforce usability best practices and create interfaces that people value. Participants learn the characteristics of “visually usable” apps to know what to shoot for, and get an introduction to the visual design “tools” for digital apps – layout, type, color, imagery, and controls and affordances – and how to use them to create appealing applications people can easily understand and use.

1. Visual Usability:
Visual Design Principles and Practices for Creating
Great Web and Mobile Application Interfaces
Tania Schlatter and Deborah Levinson

2. UX & IA UX & IA + UI design

3. http://www.flickr.com/photos/comedynose/7865159650/
Define an appropriate target

4. Work toward the goal
http://www.onecenteryoga.com/default.asp?iID=GFKEEK&item=GFMDDH

5. Schedule
9-10:30am Intro and lecture: what is visual usability?
Exercise 1: storytelling through abstraction
10:30-11am Break
11: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

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

7. The “tools”
Everything we put forth is interpreted
High tech?

8. What can I do
here?
Is this for me?
What is this?
How does it
help me?

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

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

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

12. Patterns of recommendations
Consistency: place elements similarly from screen to screen
Hierarchy: call attention to most important areas to guide the eye

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

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

15. 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 to
pic
expectation
interpretation
patterns
active
screen
other screens
other
applications
other screenssame
application

16. 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?

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

18. 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?

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

20. Differences in function
Differences in types of text
Differences in content elements
Indicating difference is important to
communicating effectively

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

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

23. Which dot is more important?

24. Which is more important?

25. Other characteristics of hierarchy
Treatment: plain vs. fancy
Color: saturated (center) vs. muted

26. Hierarchy and complexity
Vs.

27. Unclear hierarchy

28. Improving hierarchy
• Reduce/hide elements to show what’s necessary first
• Make most important clearly biggest and in most prominent spot

29. Personality
• Don Norman’s framework from Emotional Design: Why We Love
(or Hate) Everyday Things
• Visceral design: appearance
• Behavioral design: pleasure and effectiveness
• Reflective design: self-image, personal satisfaction, memories

30. Applying Norman’s framework to app design
2. Behavioral
User interpretation forms over time Content and delivery characteristics
1. Visceral
“Looksg
ood – can I do what
Iwant?”
“This app is a great tool for me.”
3. Reflective
Contentexpectation
“Icando
m
ost of what I want, ma be m
o
reifItr.”
interpretation

31. How much appeal do we need?
Goal is notthe app equivalent of Stark’s Alessi gold-plated juicer
http://www.flickr.com/photos/dickyfeng/6254476990/

32. Functionality vs. appeal
How“likable”does an app
need to be?

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

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

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

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

37. Thoughtful decisions about:
• use
• expression or differentiation
grounded in:
• how people understand
• what is being communicated by whom
Criteria for aesthetic appeal

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

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

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

41. Selecting expressive qualities
Is there a lot of competition?
The more competition, the more style plays a role.

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

43. Selecting expressive qualities
Are the messages your UI sends appropriate for the situation of
use and audience?
VS.
Business
casual 
High
school? 

44. Selecting expressive qualities
Do the qualities support cognitive mapping?
Does blue indicate
water sports?
What color indicates cycling?

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

46. Exercise 1
Telling a story with consistency, hierarchy, and personality:
Little Blue and Little Yellow

50. 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?

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

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

53. Requirements & constraints
Exercise 1: color, ripping, frames
Real-world:
• Company logo, brand standards
• Features/content
• User characteristics
• Technology platform

54. 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
Organization Stakeholders/team
location
situation
age, background
experience
role
location
situation
age, background
experience
role
location
situation
age, background
experience
role
patterns

55. 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 define the area you have to design in.
It may contain:

56. Exercise 2: design persona
Define personality of a weight-loss app – a version of SuperTracker
for teens
• Goal: define 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/

57. 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!

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

59. Layout
• Position/location of elements needs to match flow.
• Tease flow out of user scenarios. Treatment (size, color, finish)
affects this.
• 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.

60. Interpreting flow with layout
Does the layout
help us know what
to do?

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

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

63. Layout reveals hierarchy of information
Time-sensitive info comes first. Common ingredient searches
come first.

64. Creating relationships: grouping

65. Creating relationships: nesting
Nesting elements
implies relationship with
parent element
Grouping and nesting is clear in some
areas and not in others

66. Alignment
• Alignment provides organization, supports page flow
• Default should be flush left. Decide what needs to be treated
differently from there.
• Align to fewest possible (grid) lines.

67. Avoid common layout mistakes
• Provide just enough information
• Align elements unless emphasizing difference
• Group like elements
• Position elements to help make hierarchy clear

68. Type helps convey hierarchy
• For functional apps, choose type for readability
• Type size and weight = contrast = hierarchy and impact

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

70. Epicurious’ typography
Helvetica in roman and bold weights doing 95% of the work with two typographic accents

71. Century Gothic
(original)
Helvetica Light Rockwell LightEurostile
Experiments with the accent font

72. Choose type personality wisely

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

74. Color
• Draws the eye
• Helps establish hierarchy
• Makes relationships visible
• Adds aesthetic appeal and conveys personality

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

76. Tints and shades
• Tints are lighter hue variations; shades are darker ones
• Using tints with shades creates contrast

77. Color and contrast
Color contrast is contextual – it fluctuates and depends on
the whole
Same color, different
warm/cool effect
Muted color, saturation effect changes based on contextual colors

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

79. Color and error messaging
Too much contrast –
“visual spanking”
Polite use of contrast

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

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

82. Tips for choosing color
Color used strategically to direct the eye.

83. Color template
“lead”color shade, tint or
tone
lighter
tint or tone
even lighter
tint or tone
accent
color
text color darker shade
or tone
lighter tint
or tone
even lighter
tint or tone
support
color
shade, tint or
tone
lighter tint
or tone
even lighter
tint or tone
add shades, tints, and tones if needed
add colors
if needed
shade,
tint, or tone
of accent color

84. Epicurious color palette
accent
color
“lead”
shades, tints
and tones
secondary
accent color
text color
“lead”color

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

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

87. Defining rationale for imagery
There are strategic and tactical aspects of each image type and image
General
Specific
Purpose Type Presentation
Role
Subject
matter
Qualities
Strategic Tactical
Early in process Later in process

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

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

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

91. Logos
Like a flag represents a country, logos are visual symbols that
represent a product, service or organization

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

93. 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?

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

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

96. http://fathom.info/salaryper/
Can I click
this?

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

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

99. Maps

100. Maps

101. Textures
Image effects that
change the surface
of the screen

102. Backgrounds
Any image or solid
color appearing
behind content

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

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

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

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

107. Default vs. custom

108. Consistent cross-platform personality
through styling of controls

109. Cross-platform personality

110. Avoid common mistakes
• Only interactive areas should feel interactive; read-only areas
should not
• Provide feedback
• Apply visual design to form controls

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

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

113. Thank you!
Tania Schlatter
@taniaschlatter
tania@nimblepartners.com
Debby Levinson
@nimblepartners
debby@nimblepartners.com
@visualusability