On October 8, 2014, Tania Schlatter gave a talk entitled "Visual Usability."
Visual Usability
Bringing graphic and UI design together
Following UI design guidelines can help you have a usable app. Working with a graphic designer can help you have an attractive app. The reality is that it’s hard to create something that’s both usable and appealing. The more complex or functional the app, the greater the challenge.
“Visual usability” is an approach to designing interfaces that bridge the gap between “works well” and “looks great.” In this talk, Tania will explain three design principles critical to successful UI design, and show how they can be used to help or hinder the design of digital applications.
Tania Schlatter is a designer, author, and lecturer. She combines user-centered and visual design expertise to design application interfaces that help people understand and use technology. She co-founded of Nimble Partners, a Boston experience design firm; co-authored Visual Usability, Principles and Practices for Designing Digital Applications; and teaches interactive design to students at Northeastern University in Boston.
Tania has worked with over 14 MIT offices, Tufts University, Endeca Technologies, catapult.org, cafepress.com, and real-time labor data software company Burning Glass Technologies. Formal study includes an M.Des. in human-centered communication design from the Institute of Design in Chicago; a summer with Paul Rand and Armin Hofmann in Brissago, Switzerland; and a BFA in graphic design from Boston University.
20. People:
• seek patterns quickly and automatically
• notice differences
• are attracted to novelty
Key points about people
and visual perception
21. “[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
Attractive things work better
22. We have visceral reactions and make judgements
based on what we see
Is this
for
me?
24. Consistency: establishing or adopting appropriate patterns
Hierarchy: calling attention to the most important things
Personality: choosing appropriate expressive characteristics
29. A UI that uses patterns to communicate has a visual language. Patterns
and conventions help people understand what you are trying to say.
Meta-principles: consistency
Goal: define a consistent framework that can flex – a visual language
Epicurious iPhone/iPad UI 2012/2013
Consistency
31. Differences in function – style
Differences in types of text – font
Differences in content types – layout
Indicating difference is part of effective communication
Meta-principles: consistency
33. 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
35. 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
36. Defaults are a good starting point.
Appropriate visual cues are needed to create a
visual hierarchy.
A distinct personality inspires affinity.
Meta-principles
38. Meaningful hierarchies have visual indicators of importance, so people
know what’s what, and who’s who.
Goal: define levels of importance based on the most common
or desirable path, and indicate them clearly
Most mobile users
want to search for
a recipe
Hierarchy
Meta-principles: hierarchy
41. Gestalt principles
Psychological principles outlining perception of
spatial relationships – help to establish visual hierarchy.
• Proximity implies grouping, and similarity
• Similar characteristics imply grouping
• Figure and ground imply space – foreground
and background.
• Our eyes are drawn to differences
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
Meta-principles: hierarchy
42. Gestalt principles
Help us understand how to place and treat elements visually.
Contrast is the key ingredient
same color, shape
and style = related
different
color =
difference
different color,
size, and style =
different
Foreground/background
= photo is not important,
but buttons are
Meta-principles: hierarchy
43. Color: muted vs. saturated
Treatment: plain vs. fancy
Stylistic details affect visual hierarchy
Meta-principles: hierarchy
44. The more types of elements you have, the
harder it is to establish a clear hierarchy.
Complexity adds to the challenge
Meta-principles: hierarchy
46. Does style really
matter?
People just want to
catch their bus.
Personality
Visual characteristics affect interpretation.
Goal: characteristics that communicate appropriate difference
Meta-principles: personality
47. I thought we were
talking about complex
apps!
People download me,
even though they have
a free weather app.
Meta-principles: personality
48. If consistency and hierarchy are the grammar
of your visual language, personality is the tone and
choice of words you speak.
Hey everybody, listen up!
Friends, Romans, countrymen:
lend me your ears.
Meta-principles: personality
49. How much personality do we need?
Goal is not drama or novelty for the
sake of it.
No one wants to use the app
equivalent of Stark’s gold-plated
juicer for Alessi.
http://www.flickr.com/photos/dickyfeng/6254476990/
Meta-principles: personality
51. How functional does it need to be?
http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover
Selecting expressive qualities
http://new.pentagram.com/2009/09/craigs-list/
Meta-principles: personality
53. 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 personalitySuperTracker
changing the visual language without changing use
Case study: SuperTracker
54. Communicating consistency, hierarchy, and
personality through visual design
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?
Case study: SuperTracker
55. Visual interface design requirements
• Goals: help broad audience make healthy food choices, lose
weight, and get moving
• Users: create lightweight personas based on real-world scenarios
• Technical implications: quick competitive analysis suggested
plenty of room for nice-looking apps; mobile-first strategy
• Personality: what will be appropriate for users? Think about
personas
=
Outcome: a design rationale
Case study: SuperTracker
56. 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 personalityFocus on food tracking
Case study: SuperTracker
62. Exploring consistency, hierarchy, and personality
with color
Three requirements: approachability, adherence to standards, accessibility
Case study: SuperTracker