+ All Categories
Home > Design > Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

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

Date post: 17-Aug-2014
Category:
Upload: nimble-partners
View: 720 times
Download: 0 times
Share this document with a friend
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.
Popular Tags:
47
Speaking the Language of Meta-principles: Consistency, Hierarchy, and Personality Deborah Levinson
Transcript
Page 1: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

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

Deborah Levinson

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

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
Page 4: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

Complex, functional apps, not simple apps

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

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

Is this for me?

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

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

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

Consistency, Hierarchy, and Personality

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

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

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

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

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

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

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

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

Unclear hierarchy

Meta-principles: hierarchy

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

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

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

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

Meta-principles: personality

Functionality vs. appeal

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

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

Meta-principles: personality

Selecting expressive qualities

How narrow is the user base?

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

Meta-principles: personality

Selecting expressive qualities

Is there a lot of competition?

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

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

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

Telling a story visually with consistency, hierarchy, and personality

Footer

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

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

Defining a visual language helps tell the story by enabling narrative flow.

Page 30: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and 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

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

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

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

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

Exploring consistency and hierarchy with layout

Case study: SuperTracker

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

Exploring layout with wireframes

Case study: SuperTracker

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

Case study: SuperTracker

Exploring hierarchy/personality with type

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

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

Case study: SuperTracker

Exploring personality with imagery

Final icons

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

Case study: SuperTracker

Chart explorations

Final charts

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

Case study: SuperTracker

Logo explorations

Original logo

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

Case study: SuperTracker

Logo explorations

Original logo

supertracker

supertracker

trackersuper

1.

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

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

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

Case study: SuperTracker

Focus attention on key text and controls

Page 45: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality
Page 46: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality
Page 47: Speaking the Language of Meta-Principles: Consistency, Hierarchy, and Personality

Thank you!

Debby [email protected]

@nimblepartners

@visualusability


Recommended