Download as PDF, PPTX
![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](https://image.slidesharecdn.com/chifoo0514v3public-140514113934-phpapp02/85/Speaking-the-Language-of-Meta-Principles-Consistency-Hierarchy-and-Personality-18-320.jpg)
Uploaded byTania Schlatter
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality
This document discusses the principles of consistency, hierarchy, and personality as meta-principles for designing user interfaces. It provides examples of how these principles can be applied when designing interfaces. Consistency establishes patterns to manage user expectations. Hierarchy indicates differences in importance to guide users. Personality involves expressive qualities to communicate appropriately for the context and users. The document also summarizes a case study where these principles were applied when redesigning the SuperTracker interface to help users make healthy choices.
Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality
- 1. Speaking the Languageof Meta-principles: Consistency, Hierarchy, and Personality Deborah Levinson
- 2. UX & IAUX & IA + UI & visual design Nimble Partners Work under NDA and intentionally blurred
- 4. Complex, functional apps,not simple apps
- 5. MailChimp.com @ 2009Mint.com @ 2012 Focusing on interface as a key part of the UX makes a difference
- 6. Is this forme?
- 7. Focusing on interface asa 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.
- 8. Tog says: • Errorprevention • 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
- 9. Consistency, Hierarchy, andPersonality
- 10. Consistency: establishing oradopting appropriate patterns Hierarchy: calling attention to the most important things Personality: choosing appropriate expressive characteristics
- 11. Consistency: managing expectationsand 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
- 12. Pattern recognition Establish patternswithin an app and use them consistently to create visual language. Meta-principles: consistency
- 13. Differences in function– style Differences in types of text – font Differences in content types – layout Indicating difference is part of effective communication Meta-principles
- 14. If your usersshare 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
- 15. Starting with defaults Defaultsare 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
- 16. Hierarchy: defining meaningfuldifferences 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
- 17.
- 18. Meta-principles: personality Personality: characteristicsthat 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
- 19. Meta-principles: personality If consistencyand 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!
- 20. Meta-principles: personality Thoughtful decisionsabout 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
- 21.
- 22. Meta-principles: personality How functionaldoes it need to be? http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover Selecting expressive qualities
- 23. Meta-principles: personality Selecting expressivequalities How narrow is the user base?
- 24. Meta-principles: personality Selecting expressivequalities Is there a lot of competition?
- 25. Meta-principles: personality Selecting expressivequalities Do the expressive qualities support cognitive mapping?
- 26. Meta-principles: personality Selecting expressivequalities Are the characteristics appropriate for the situation? VS.
- 27. Telling a storyvisually with consistency, hierarchy, and personality Footer
- 28. Visual storytelling exercise Goal:tell a story using only ripped construction paper and the principles of consistency, hierarchy, and personality.
- 29. Defining a visuallanguage helps tell the story by enabling narrative flow.
- 30. Thoughtful decisions aboutexpression 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
- 31. 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
- 32. Gathering visual interfacedesign 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
- 33. Thoughtful decisions aboutexpression 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
- 34. Exploring consistency andhierarchy with layout Case study: SuperTracker
- 35. Exploring layout withwireframes Case study: SuperTracker
- 36. Case study: SuperTracker Exploringhierarchy/personality with type
- 37. Case study: SuperTracker Exploringconsistency, hierarchy, and personality with color Three requirements: approachability, adherence to standards, accessibility
- 38. Case study: SuperTracker Exploringpersonality with imagery Final icons
- 39. Case study: SuperTracker Chartexplorations Final charts
- 40. Case study: SuperTracker Logoexplorations Original logo
- 41. Case study: SuperTracker Logoexplorations Original logo supertracker supertracker trackersuper 1.
- 42. Case study: SuperTracker Logoexplorations Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
- 43. Case study: SuperTracker Logoexplorations SUPER TRACKER SUPERTRACKER 3. Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
- 44. Case study: SuperTracker Focusattention on key text and controls
- 47.
Editor's Notes
- #3 Nimble Partners is a UI/UX firm based in Boston, Massachusetts. We design complex web and mobile applications.
- #4 Tania Schlatter and I are also the authors of Visual Usability: Principles and Practices for Designing Digital Applications.
- #5 There’s nothing wrong with simple apps that do only one or two things, like the Solar weather app shown at left. But this talk will focus on complex, functional applications.
- #7 We have visceral reactions and make judgments based on what we see. These reactions affect if we think the thing is useful or relevant to us in the short term, and over time. As studies by Don Norman and others have found, people think attractive things work better. (Model from Emotional Design of Everyday Things.) What something looks like plays a big role in visceral reactions, and it also affects perception of usefulness and overall value.
- #9 How do you know what guidelines to use?
- #10 Focusing on three primary principles – consistency, hierarchy, and personality – as the foundation for all other decisions – gives you a clear framework that addresses usability and visual design issues. They are so important, we call them the meta-principles.
- #11 Consistency involves establishing or adopting appropriate patterns. Understanding what people expect. Deciding to present just what people expect, or not. Applies to color, position or layout, typography – everything the user sees. Hierarchy is directing the eye. Personality is selecting expressive characteristics strategically to help create affinity and “likability” while drawing the eye appropriately.
- #13 Color: orange as an accent to identify active selections and key actions. All icons share the same minimalist style. Style and location of some of the type is consistent. Consistency affects the personality, and needs to support hierarchy. Consistency wouldn’t be successful if elements were consistent but highlighted the least important thing.
- #16 iOS 6 version of Grocery Gadget, left; OpenMBTA, right. The apps perform totally different functions but look exactly the same. I don’t necessarily need to fall in love with my grocery list or public transportation apps, but I wouldn’t mind if they looked nicer, either.
- #17 Hierarchy is about presenting elements in a way that directs the eye to help people do what they need to do. It is about using visual design to support flow. Knowing your users is important because it helps you approach how to direct them effectively, and/or helps you know what their goals are, so you can establish a hierarchy that supports them.
- #18 What’s the most important thing on this screen? It looks like the “users logged in” gauge, but is that really what’s most important on a dashboard about adoption statistics? Three equal column widths give everything the same weight, too.
- #19 The Tractinsky paper: http://www.sigchi.org/chi97/proceedings/paper/nt.htm
- #22 Likability isn’t always the most important thing. Millions of people use craigslist despite its plain interface.
- #23 Functional doesn’t have to mean ugly. Left: Lifelike Apps. Right: SimpleScott.
- #24 Clothia.com – relatively narrow user base. Not trying to appeal to everyone who wears clothes. How much expression you need and how concerned you need to be with what people think of the expressive qualities (do they “like” it?) depends. Clothia.com is a new product focusing on a particular market. The target market needs to like it! Narrower user base allows for more focused or specific personality. Not everyone needs to like it, just those for whom it is intended.
- #25 iOS 7 app (right) is generic-looking, but it has to appeal to a wide audience, and no one’s paying money for it anyway – it can and probably should be generic. Others are paid apps – people have to feel an affinity with them, or they won’t sell.
- #26 Color assignments in the London Olympics app appear to be random.
- #28 Consistency: Little Blue is always a small blue dot, and his friends are all the same size. Hierarchy: Little Blue and Little Yellow’s parents are larger than they are, and nested within a block that groups them all together. Personality: bright colors, motion on the page.
- #29 The Itsy-Bitsy Spider. How does this interpretation of it use consistency, hierarchy, and personality?
- #31 Not all applications have a narrative. But when people use them, they have a narrative – situations of use, reasons for use – that create a flow through the application. Visual language needs to support this flow. SuperTracker is the USDA’s food- and fitness-tracking application. It’s complicated, has a huge feature set, and isn’t very attractive.
- #34 Food search filter dropdown likely unnecessaryTracking food is most important task, but feels overwhelmed by other itemsFood group chart/tabs too large relative to food-tracking“Copy Meals” placement/treatment has hierarchy issuesAction buttons too big
- #35 Mobile-first strategy: look at reinterpreting food-tracking features in a layout on a handheld device
- #36 Tablet layout with sliding drawer (left) and popover (right) options for charts; improved hierarchy for “find a food” feature; improved readability of daily consumption info
- #37 The typewriter font didn’t quite express the confident, friendly, but firm personality we wanted. Compare original type (Arial, bottom left) to revised type (Museo heads, Meta body text) – more approachable, less formal, good differentiation between heads & body
- #38 USDA’s ChooseMyPlate graphic standards guide
- #39 Icon evolution. Tested dinner icon with vegetarians/vegans to see if it would offend them; got 50-50 positive-negative feedback and decided to play it safe with a soup bowl.
- #40 Initial take on charts was too busy. Final approach was a refinement of ST’s existing charts. Also simplified color usage for daily limits charts and added a tiny alert icon to remind users they’d exceeded a limit – kinder and less visually jarring than ST’s “visual spanking” approach of turning everything bright red.
- #41 First attempts looked at incorporating food/fitness message. Second looked at charts as visual metaphor, and used type (Gotham) from graphic standards guide. Final logos refined a chart option.
- #42 • Prominent placement of “find a food” search bar • Blue for text, yellow for items meant to grab your attention, like active nav states and icons accompanying functional controls • Icons to draw attention to meal subheads (both in contrasting color w/blue, which also draws attention) • Rounded corners and light drop shadows on tabs to give depth and promote clickability/tappability
- #43 All of these changes were backed by rationale that included consideration of use and interpretation, combined with aesthetics. Visual (and likely functional) improvement over original. As we said at the beginning, applications that are more pleasant to look at, whose visuals support instead of hinder their usability, are more satisfying to use.
- #44 One last story: while working on the book, I continued to track my food through ST, and lost nearly 35lbs. as a result. But it wasn’t fun, and it wasn’t easy – not that weight loss ever is, but if you’ve ever dieted, you know that every little hurdle or barrier that’s placed in your way can feel gigantic and depressing. A more appealing visual design wouldn’t have made losing weight any easier, but it would have made it a little more pleasant – and why not make people’s lives better with design?