Tania Schlatter – Visual Usability

Visual UsabilityBringing Graphic and UI Design Together

Tania Schlatter

Who am I?

UX & IA | Catapult.org

UX & IA | IDIN @ MIT

work obscured – under NDA

UX & IA + UI & visual design | reAssemble.net

What is visual usability?

Graphic design background

How do we make more

strategic and less arbitrary decisions about

visual design?

Human-centered design

Early dynamic web

applications

How do we make things

people understand and want to use?

Lots of reviews!

Same UI problems across

different site/app types

No consistent visual standards

No clear next step

No inspiration, not inspiring

Research on vision and

perception for design

People:

• seek patterns quickly and automatically

• notice differences

• are attracted to novelty

Key points about people

and visual perception

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

Attractive things work better

We have visceral reactions and make judgementsbased on what we see

Is this for me?

Consistency, Hierarchy, and Personality

Ah-ha moment

Consistency: establishing or adopting appropriate patterns

Hierarchy: calling attention to the most important things

Personality: choosing appropriate expressive characteristics

Details matter. One of these is “just right.”

Complex, functional apps

Focusing on interface as a key

part of the UX makes a difference

What’s the big deal?

A UI that uses patterns to communicate has a visual language. Patterns and conventions help people understand what you are trying to say.

Meta-principles: consistency

Goal: de"ne a consistent framework that can #ex – a visual language

Epicurious iPhone/iPad UI 2012/2013

Consistency

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


Internal consistency

Consistent use of type and button style across screens


External consistency

Decisions about consistency are linked to overall app strategy and UX.

MS Word

Google

Consistency helps ease changes through familiarity.


External consistency

Inconsistency helps differentiate.

MS Word

750 Words


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?


Defaults are a good starting point.

Appropriate visual cues are needed to create a visual hierarchy.

A distinct personality inspires affinity.

Meta-principles

Squint. Can you tell the difference?

Meta-principles

Meaningful hierarchies have visual indicators of importance, so people know what’s what, and who’s who.

Goal: de"ne levels of importance based on the most common or desirable path, and indicate them clearly

Most mobile users want to search for a recipe

Hierarchy

Meta-principles: hierarchy

Unclear hierarchy


Improving hierarchy


Gestalt principles

Psychological principles outlining perception of spatial relationships – help to establish visual hierarchy.

• Proximity implies grouping, and similarity

• Similar characteristics imply grouping

• Figure and ground imply space – foreground and background.

• Our eyes are drawn to differences

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm




Gestalt principles

Help us understand how to place and treat elements visually.

Contrast is the key ingredient

same color, shape and style = related

different color = difference

different color, size, and style = different

Foreground/background = photo is not important, but buttons are


Color: muted vs. saturated

Treatment: plain vs. fancy

Stylistic details affect visual hierarchy


The more types of elements you have, the harder it is to establish a clear hierarchy.

Complexity adds to the challenge


work obscured. Under NDA.

Does style really matter?

People just want to catch their bus.

Personality

Visual characteristics affect interpretation.

Goal: characteristics that communicate appropriate difference

Meta-principles: personality

I thought we were talking about complex apps!

People download me, even though they have a free weather app.


If consistency and hierarchy are the grammar of your visual language, personality is the tone and choice of words you speak.

Hey everybody, listen up!

Friends, Romans, countrymen:

lend me your ears.


How much personality do we need?

Goal is not drama or novelty for the sake of it.

No one wants to use the app equivalent of Stark’s gold-plated juicer for Alessi.

http://www.flickr.com/photos/dickyfeng/6254476990/


http://www.onecenteryoga.com/default.asp?iID=GFKEEK&item=GFMDDH

http://www.onecenteryoga.com/default.asp?iID=GFKEEK&item=GFMDDH

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

http://new.pentagram.com/2009/09/craigs-list/






How to apply in practice?

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 personalitySuperTrackerchanging the visual language without changing use

Case study: SuperTracker

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?


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


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 personalityFocus on food tracking


Exploring consistency and hierarchy with layout


Exploring layout with wireframes


Logo explorations

SUPERTRACKER

SUPERTRACKER

3.

Original logo

supertracker

supertracker

trackersuper

1. SUPERTRACKER

SUPERTRACKER

SUPERtracker

SUPERtracker

SUPERTRACKER

SUPERTRACKER

2.


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 & image explorations

Final charts


Divide full-view into two areasFocus attention on key text and controls


Thank you!

Tania [email protected]

@taniaschlatter

@visualusability

mailto:[email protected]

mailto:[email protected]

Tania Schlatter – Visual Usability

Technology

Transcript of Tania Schlatter – Visual Usability