Upload
nimble-partners
View
731
Download
0
Tags:
Embed Size (px)
DESCRIPTION
When designing or redesigning an application, Nimble Partners focuses on three core principles: consistency, hierarchy, and personality. We can think of these principles as if they’re part of a language. Consistency and hierarchy are the grammar people learn while using an application: the basic elements that define how a language is spoken. The “words” we speak—that is, the visual design characteristics we choose to convey a message—create an application’s personality. These principles are so fundamental to creating successful interfaces that we call them “meta-principles.” While technology that affects interfaces changes, the underlying meta-principles hold true. Nimble Partners arrived at these three meta-principles after years of heuristic reviews, usability studies, and informal observation of digital applications. In this talk, Deborah will introduce these principles and show how they apply in examples, including a case study redesign of a web and mobile application to help users track diet and exercise. Talk presented at the CHIFOO May 2014 meeting.
Citation preview
Speaking the Language of Meta-principles: Consistency, Hierarchy, and Personality
Deborah Levinson
UX & IA UX & IA + UI & visual design
Nimble Partners
Work under NDA and intentionally blurred
Complex, functional apps, not simple apps
MailChimp.com @ 2009 Mint.com @ 2012
Focusing on interface as a key part of the UX makes a difference
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
• Latency Reduction
• Recognition rather than recall
4 graphic design principles:Contrast, Repetition, Alignment, Proximity = CRAP
iOS 6 Human Interface Guidelines’ Principles:
• Aesthetic integrity• Consistency• Direct manipulation• Feedback• Metaphors• User control
Android Design Principles:
• Enchant Me
• Simplify My Life
• Make Me Amazing
Gestalt principles:
1 Proximity2 Similarity3 Prägnanz
(Figure-Ground)4 Symmetry5 "Common Fate"6 Closure
NN/G’s reports have 2,397 usability guidelines!
Usability.gov guidelines
iOS 7 Human Interface Guidelines:
• Defer to content• Provide clarity• Let color simplify the UI• Use system fonts• Embrace borderless buttons• Use depth to communicate
Consistency, Hierarchy, and Personality
Consistency: establishing or adopting appropriate patterns
Hierarchy: calling attention to the most important things
Personality: choosing appropriate expressive characteristics
Consistency: managing expectations and patterns
Like spoken language, a UI must have “grammar”: patterns and conventions so people understand your message.
Meta-principles: consistency
Goal: de!ne a consistent framework that can "ex
Epicurious iPhone/iPad UI 2012/2013
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
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 improve ease of use, and these apps lack distinct personalities to help make them successful.
Meta-principles: consistency
Hierarchy: defining meaningful differences through ranking systems
• Consistency is about creating similarities in location, appearance, and behavior to take advantage of expectations.
• Hierarchy is about indicating differences in rank that help people know how the app works, what’s important, and what to do.
Meta-principles: hierarchy
Unclear hierarchy
Meta-principles: hierarchy
Meta-principles: personality
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
If consistency and hierarchy are the grammar of your visual language, personality is the “words” you speak.
Friends, Romans, countrymen: lend me your ears.
Hey, everybody: listen up!
Meta-principles: 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
Making decisions about personality
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
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.
Telling a story visually with consistency, hierarchy, and personality
Footer
Visual storytelling exercise
Goal: tell a story using only ripped construction paper and the principles of consistency, hierarchy, and personality.
Defining a visual language helps tell the story by enabling narrative flow.
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 personality
Case study: SuperTracker
SuperTracker case study: changing a visual language without changing a narrative
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
Gathering 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 personality
Case study: SuperTracker
Focus on food tracking
Exploring consistency and hierarchy with layout
Case study: SuperTracker
Exploring layout with wireframes
Case study: SuperTracker
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 explorations
Final charts
Case study: SuperTracker
Logo explorations
Original logo
Case study: SuperTracker
Logo explorations
Original logo
supertracker
supertracker
trackersuper
1.
Case study: SuperTracker
Logo explorations
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
Case study: SuperTracker
Logo explorations
SUPERTRACKER
SUPERTRACKER
3.
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
Case study: SuperTracker
Focus attention on key text and controls