Top Banner

Click here to load reader

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

Aug 17, 2014

ReportDownload

Design

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.

  • 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 dierence
  • Is this for me?
  • Focusing on interface as a key part of the UX makes a dierence. It makes a dierence to people who are evaluating your app or org. It makes a dierence to people who use your app. It makes a dierence to design and development team morale. It makes a dierence to your organizations 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 GuidelinesPrinciples: 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 Prgnanz (Figure-Ground) 4 Symmetry 5 "Common Fate" 6 Closure NN/Gs 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 havegrammar: 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
  • Pattern recognition Establish patterns within an app and use them consistently to create visual language. Meta-principles: consistency
  • Dierences in function style Dierences in types of text font Dierences in content types layout Indicating dierence is part of eective 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: dening meaningful dierences through ranking systems Consistency is about creating similarities in location, appearance, and behavior to take advantage of expectations. Hierarchy is about indicating dierences in rank that help people know how the app works, whats important, and what to do. Meta-principles: hierarchy
  • Unclear hierarchy Meta-principles: hierarchy
  • Meta-principles: personality Personality: characteristics that aect interpretation [P]erceptions of interface aesthetic are closely related to apparent usability and thus increase the likelihood that aesthetics may considerably aect 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 dierentiation 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/_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.
  • Dening a visual language helps tell the story by enabling narrative ow.
  • Thoughtful decisions about expression and dierentiation 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 businessapplication 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-first strategy Personality: what will be appropriate for users? Think about personas = Outcome: a design rationale Case study: SuperTracker
  • Thoughtful decisions about expression and dierentiation 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 O