Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

0 views

Published on

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.

Published in: Design, Technology
  • Be the first to comment

Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

  1. 1. Speaking the Language of Meta-principles: Consistency, Hierarchy, and Personality Deborah Levinson
  2. 2. UX & IA UX & IA + UI & visual design Nimble Partners Work under NDA and intentionally blurred
  3. 3. Complex, functional apps, not simple apps
  4. 4. MailChimp.com @ 2009 Mint.com @ 2012 Focusing on interface as a key part of the UX makes a difference
  5. 5. Is this for me?
  6. 6. 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.
  7. 7. 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 Proximity 2 Similarity 3 Prägnanz (Figure-Ground) 4 Symmetry 5 "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
  8. 8. Consistency, Hierarchy, and Personality
  9. 9. Consistency: establishing or adopting appropriate patterns Hierarchy: calling attention to the most important things Personality: choosing appropriate expressive characteristics
  10. 10. 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: define a consistent framework that can flex Epicurious iPhone/iPad UI 2012/2013
  11. 11. Pattern recognition Establish patterns within an app and use them consistently to create visual language. Meta-principles: consistency
  12. 12. Differences in function – style Differences in types of text – font Differences in content types – layout Indicating difference is part of effective communication Meta-principles
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Unclear hierarchy Meta-principles: hierarchy
  17. 17. 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
  18. 18. 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!
  19. 19. 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
  20. 20. Meta-principles: personality Functionality vs. appeal
  21. 21. 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
  22. 22. Meta-principles: personality Selecting expressive qualities How narrow is the user base?
  23. 23. Meta-principles: personality Selecting expressive qualities Is there a lot of competition?
  24. 24. Meta-principles: personality Selecting expressive qualities Do the expressive qualities support cognitive mapping?
  25. 25. Meta-principles: personality Selecting expressive qualities Are the characteristics appropriate for the situation? VS.
  26. 26. Telling a story visually with consistency, hierarchy, and personality Footer
  27. 27. Visual storytelling exercise Goal: tell a story using only ripped construction paper and the principles of consistency, hierarchy, and personality.
  28. 28. Defining a visual language helps tell the story by enabling narrative flow.
  29. 29. 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
  30. 30. 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
  31. 31. 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-first strategy • Personality: what will be appropriate for users? Think about personas = Outcome: a design rationale Case study: SuperTracker
  32. 32. 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
  33. 33. Exploring consistency and hierarchy with layout Case study: SuperTracker
  34. 34. Exploring layout with wireframes Case study: SuperTracker
  35. 35. Case study: SuperTracker Exploring hierarchy/personality with type
  36. 36. Case study: SuperTracker Exploring consistency, hierarchy, and personality with color Three requirements: approachability, adherence to standards, accessibility
  37. 37. Case study: SuperTracker Exploring personality with imagery Final icons
  38. 38. Case study: SuperTracker Chart explorations Final charts
  39. 39. Case study: SuperTracker Logo explorations Original logo
  40. 40. Case study: SuperTracker Logo explorations Original logo supertracker supertracker trackersuper 1.
  41. 41. Case study: SuperTracker Logo explorations Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
  42. 42. Case study: SuperTracker Logo explorations SUPER TRACKER SUPERTRACKER 3. Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
  43. 43. Case study: SuperTracker Focus attention on key text and controls
  44. 44. Thank you! Debby Levinson debby@nimblepartners.com @nimblepartners @visualusability

×