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

transcript

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 difference

Is this for me?

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.

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

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 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

Pattern recognition

Establish patterns within an app and use them consistently to create visual language.

Differences in function – style

Differences in types of text – font

Differences in content types – layout

Indicating difference is part of effective 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?

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.

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

Unclear hierarchy

Meta-principles: hierarchy

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

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!

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

Functionality vs. appeal

How functional does it need to be?

http://www.wired.com/entertainment/theweb/magazine/17-09/ff_craigslist_makeover

Selecting expressive qualities

How narrow is the user base?

Is there a lot of competition?

Do the expressive qualities support cognitive mapping?

Are the characteristics appropriate for the situation?

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.

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

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 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?

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

Criteria for decisions about personality

Focus on food tracking

Exploring consistency and hierarchy with layout

Exploring layout with wireframes

Exploring hierarchy/personality with type

Exploring consistency, hierarchy, and personality with color

Three requirements: approachability, adherence to standards, accessibility

Exploring personality with imagery

Final icons

Chart explorations

Final charts

Logo explorations

Original logo

Logo explorations

Original logo

supertracker

trackersuper

Logo explorations

Original logo

supertracker

trackersuper

1. SUPERTRACKER

SUPERTRACKER

SUPERtracker

SUPERTRACKER

Logo explorations

SUPERTRACKER

Original logo

supertracker

trackersuper

1. SUPERTRACKER

SUPERTRACKER

SUPERtracker

SUPERTRACKER

Focus attention on key text and controls

Thank you!

Debby Levinsondebby@nimblepartners.com

@nimblepartners

@visualusability