Post on 29-Nov-2014
description
Visual UsabilityBringing Graphic and UI Design Together
Tania Schlatter
Who am I?
UX & IA | Catapult.org
UX & IA | IDIN @ MIT
work obscured – under NDA
UX & IA + UI & visual design | reAssemble.net
What is visual usability?
Graphic design background
How do we make more
strategic and less arbitrary decisions about
visual design?
Human-centered design
Early dynamic web
applications
How do we make things
people understand and want to use?
Lots of reviews!
Same UI problems across
different site/app types
No consistent visual standards
No clear next step
No inspiration, not inspiring
Research on vision and
perception for design
People:
• seek patterns quickly and automatically
• notice differences
• are attracted to novelty
Key points about people
and visual perception
“[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
We have visceral reactions and make judgementsbased on what we see
Is this for me?
Consistency, Hierarchy, and Personality
Ah-ha moment
Consistency: establishing or adopting appropriate patterns
Hierarchy: calling attention to the most important things
Personality: choosing appropriate expressive characteristics
Details matter. One of these is “just right.”
Complex, functional apps
Focusing on interface as a key
part of the UX makes a difference
What’s the big deal?
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: de"ne a consistent framework that can #ex – a visual language
Epicurious iPhone/iPad UI 2012/2013
Consistency
Pattern recognition
Establish patterns within an app and use them consistently to create visual language.
Meta-principles: consistency
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
Internal consistency
Consistent use of type and button style across screens
Meta-principles: consistency
External consistency
Decisions about consistency are linked to overall app strategy and UX.
MS Word
Consistency helps ease changes through familiarity.
Meta-principles: consistency
External consistency
Inconsistency helps differentiate.
MS Word
750 Words
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
Defaults are a good starting point.
Appropriate visual cues are needed to create a visual hierarchy.
A distinct personality inspires affinity.
Meta-principles
Squint. Can you tell the difference?
Meta-principles
Meaningful hierarchies have visual indicators of importance, so people know what’s what, and who’s who.
Goal: de"ne 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
Unclear hierarchy
Meta-principles: hierarchy
Improving hierarchy
Meta-principles: hierarchy
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
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
Color: muted vs. saturated
Treatment: plain vs. fancy
Stylistic details affect visual hierarchy
Meta-principles: hierarchy
The more types of elements you have, the harder it is to establish a clear hierarchy.
Complexity adds to the challenge
Meta-principles: hierarchy
work obscured. Under NDA.
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
I thought we were talking about complex apps!
People download me, even though they have a free weather app.
Meta-principles: personality
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
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
Functionality vs. appeal
Meta-principles: personality
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
How to apply in practice?
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 personalitySuperTrackerchanging the visual language without changing use
Case study: SuperTracker
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
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-"rst strategy
• Personality: what will be appropriate for users? Think about personas
=Outcome: a design rationale
Case study: SuperTracker
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
Exploring consistency and hierarchy with layout
Case study: SuperTracker
Exploring consistency and hierarchy with layout
Case study: SuperTracker
Exploring layout with wireframes
Case study: SuperTracker
Logo explorations
SUPERTRACKER
SUPERTRACKER
3.
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
Case study: SuperTracker
Exploring hierarchy/personality with type
Case study: SuperTracker
Exploring consistency, hierarchy, and personality with color
Three requirements: approachability, adherence to standards, accessibility
Case study: SuperTracker
Exploring personality with imagery
Final icons
Case study: SuperTracker
Chart & image explorations
Final charts
Case study: SuperTracker
Divide full-view into two areasFocus attention on key text and controls
Case study: SuperTracker
Thank you!
Tania Schlattertania@nimblepartners.com
@taniaschlatter
@visualusability