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

1. Speaking the Language of Meta-principles: Consistency, Hierarchy, and Personality Deborah Levinson
2. UX & IA UX & IA + UI & visual design Nimble Partners Work under NDA and intentionally blurred
3. Complex, functional apps, not simple apps
4. MailChimp.com @ 2009 Mint.com @ 2012 Focusing on interface as a key part of the UX makes a diﬀerence
5. Is this for me?
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. 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. Consistency, Hierarchy, and Personality
9. Consistency: establishing or adopting appropriate patterns Hierarchy: calling attention to the most important things Personality: choosing appropriate expressive characteristics
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. Pattern recognition Establish patterns within an app and use them consistently to create visual language. Meta-principles: consistency
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. 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. 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. 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. Unclear hierarchy Meta-principles: hierarchy
17. Meta-principles: personality Personality: characteristics that aﬀect interpretation “[P]erceptions of interface aesthetic are closely related to apparent usability and thus increase the likelihood that aesthetics may considerably aﬀect system acceptability.” - Noam Tractinsky
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. Meta-principles: personality Thoughtful decisions about expression and diﬀerentiation 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. Meta-principles: personality Functionality vs. appeal
21. Meta-principles: personality How functional does it need to be? http://www.wired.com/entertainment/theweb/magazine/17-09/ﬀ_craigslist_makeover Selecting expressive qualities
22. Meta-principles: personality Selecting expressive qualities How narrow is the user base?
23. Meta-principles: personality Selecting expressive qualities Is there a lot of competition?
24. Meta-principles: personality Selecting expressive qualities Do the expressive qualities support cognitive mapping?
25. Meta-principles: personality Selecting expressive qualities Are the characteristics appropriate for the situation? VS.
26. Telling a story visually with consistency, hierarchy, and personality Footer
27. Visual storytelling exercise Goal: tell a story using only ripped construction paper and the principles of consistency, hierarchy, and personality.
28. Deﬁning a visual language helps tell the story by enabling narrative ﬂow.
29. Thoughtful decisions about expression and diﬀerentiation 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. 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. 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. Thoughtful decisions about expression and diﬀerentiation 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. Exploring consistency and hierarchy with layout Case study: SuperTracker
34. Exploring layout with wireframes Case study: SuperTracker
35. Case study: SuperTracker Exploring hierarchy/personality with type
36. Case study: SuperTracker Exploring consistency, hierarchy, and personality with color Three requirements: approachability, adherence to standards, accessibility
37. Case study: SuperTracker Exploring personality with imagery Final icons
38. Case study: SuperTracker Chart explorations Final charts
39. Case study: SuperTracker Logo explorations Original logo
40. Case study: SuperTracker Logo explorations Original logo supertracker supertracker trackersuper 1.
41. Case study: SuperTracker Logo explorations Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
42. Case study: SuperTracker Logo explorations SUPER TRACKER SUPERTRACKER 3. Original logo supertracker supertracker trackersuper 1. SUPERTRACKER SUPERTRACKER SUPERtracker SUPERtracker SUPERTRACKER SUPERTRACKER 2.
43. Case study: SuperTracker Focus attention on key text and controls
44. Thank you! Debby Levinson debby@nimblepartners.com @nimblepartners @visualusability

Editor's Notes

Nimble Partners is a UI/UX firm based in Boston, Massachusetts. We design complex web and mobile applications.
Tania Schlatter and I are also the authors of Visual Usability: Principles and Practices for Designing Digital Applications.
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.
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.
How do you know what guidelines to use?
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.
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.
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.
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.
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.
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.
The Tractinsky paper: http://www.sigchi.org/chi97/proceedings/paper/nt.htm
Likability isn’t always the most important thing. Millions of people use craigslist despite its plain interface.
Functional doesn’t have to mean ugly.
Left: Lifelike Apps. Right: SimpleScott.
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.
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.
Color assignments in the London Olympics app appear to be random.
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.
The Itsy-Bitsy Spider. How does this interpretation of it use consistency, hierarchy, and personality?
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.
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
Mobile-first strategy: look at reinterpreting food-tracking features in a layout on a handheld device
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
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
USDA’s ChooseMyPlate graphic standards guide
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.
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.
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.
• 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
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.
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?

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

You are reading a preview.

Check these out next

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

More Related Content

Similar to Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality (20)

Recently uploaded (20)

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

Editor's Notes

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

You are reading a preview.

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

Recommended

More Related Content

Similar to Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality (20)

Recently uploaded (20)

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

Editor's Notes