speaking the language of meta-principles: consistency, hierarchy, and personality
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.TRANSCRIPT
![Page 1: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/1.jpg)
Speaking the Language of Meta-principles: Consistency, Hierarchy, and Personality
Deborah Levinson
![Page 2: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/2.jpg)
UX & IA UX & IA + UI & visual design
Nimble Partners
Work under NDA and intentionally blurred
![Page 3: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/3.jpg)
![Page 4: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/4.jpg)
Complex, functional apps, not simple apps
![Page 5: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/5.jpg)
MailChimp.com @ 2009 Mint.com @ 2012
Focusing on interface as a key part of the UX makes a difference
![Page 6: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/6.jpg)
Is this for me?
![Page 7: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/7.jpg)
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.
![Page 8: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/8.jpg)
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
![Page 9: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/9.jpg)
Consistency, Hierarchy, and Personality
![Page 10: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/10.jpg)
Consistency: establishing or adopting appropriate patterns
Hierarchy: calling attention to the most important things
Personality: choosing appropriate expressive characteristics
![Page 11: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/11.jpg)
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
![Page 12: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/12.jpg)
Pattern recognition
Establish patterns within an app and use them consistently to create visual language.
Meta-principles: consistency
![Page 13: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/13.jpg)
Differences in function – style
Differences in types of text – font
Differences in content types – layout
Indicating difference is part of effective communication
Meta-principles
![Page 14: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/14.jpg)
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
![Page 15: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/15.jpg)
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
![Page 16: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/16.jpg)
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
![Page 17: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/17.jpg)
Unclear hierarchy
Meta-principles: hierarchy
![Page 18: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/18.jpg)
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
![Page 19: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/19.jpg)
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!
![Page 20: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/20.jpg)
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
![Page 21: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/21.jpg)
Meta-principles: personality
Functionality vs. appeal
![Page 22: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/22.jpg)
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
![Page 23: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/23.jpg)
Meta-principles: personality
Selecting expressive qualities
How narrow is the user base?
![Page 24: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/24.jpg)
Meta-principles: personality
Selecting expressive qualities
Is there a lot of competition?
![Page 25: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/25.jpg)
Meta-principles: personality
Selecting expressive qualities
Do the expressive qualities support cognitive mapping?
![Page 26: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/26.jpg)
Meta-principles: personality
Selecting expressive qualities
Are the characteristics appropriate for the situation?
VS.
![Page 27: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/27.jpg)
Telling a story visually with consistency, hierarchy, and personality
Footer
![Page 28: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/28.jpg)
Visual storytelling exercise
Goal: tell a story using only ripped construction paper and the principles of consistency, hierarchy, and personality.
![Page 29: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/29.jpg)
Defining a visual language helps tell the story by enabling narrative flow.
![Page 30: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/30.jpg)
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
![Page 31: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/31.jpg)
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
![Page 32: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/32.jpg)
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
![Page 33: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/33.jpg)
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
![Page 34: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/34.jpg)
Exploring consistency and hierarchy with layout
Case study: SuperTracker
![Page 35: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/35.jpg)
Exploring layout with wireframes
Case study: SuperTracker
![Page 36: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/36.jpg)
Case study: SuperTracker
Exploring hierarchy/personality with type
![Page 37: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/37.jpg)
Case study: SuperTracker
Exploring consistency, hierarchy, and personality with color
Three requirements: approachability, adherence to standards, accessibility
![Page 38: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/38.jpg)
Case study: SuperTracker
Exploring personality with imagery
Final icons
![Page 39: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/39.jpg)
Case study: SuperTracker
Chart explorations
Final charts
![Page 40: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/40.jpg)
Case study: SuperTracker
Logo explorations
Original logo
![Page 41: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/41.jpg)
Case study: SuperTracker
Logo explorations
Original logo
supertracker
supertracker
trackersuper
1.
![Page 42: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/42.jpg)
Case study: SuperTracker
Logo explorations
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
![Page 43: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/43.jpg)
Case study: SuperTracker
Logo explorations
SUPERTRACKER
SUPERTRACKER
3.
Original logo
supertracker
supertracker
trackersuper
1. SUPERTRACKER
SUPERTRACKER
SUPERtracker
SUPERtracker
SUPERTRACKER
SUPERTRACKER
2.
![Page 44: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/44.jpg)
Case study: SuperTracker
Focus attention on key text and controls
![Page 45: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/45.jpg)
![Page 46: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality](https://reader036.vdocuments.mx/reader036/viewer/2022081717/53f007008d7f72a64f8b45ca/html5/thumbnails/46.jpg)