design method for visualizing complex data for users

UXPA 2016VICTOR YOCCO & ASHLEY PULLI

A Design Method for Visualizing Complex Data

We work together seamlessly across disciplines as well as with clients of all sizes in just about every industry. Our end goal: superior apps, websites, and software that make customer’s experiences the best they can be.

Strategists Researchers Designers Technologists

USER CENTERED DESIGN

WE ARE A TEAM OF

#UXPA2016 ©2016

[email protected]

USER EXPERIENCE DESIGNERAshley Pulli

@ashpulli

• Has worked on interactive projects ranging from tablet applications to responsive websites

• Values simple, effective design that incorporates data visualization

#UXPA2016 ©2016

[email protected]

RESEARCH DIRECTORVictor Yocco

@VictorYocco

• Author of over 20 articles on user experience research and the application of principles of psychology to digital design

• Author of “Design for the Mind”, a Manning Publications book on the application of principles of psychology to design

#UXPA2016 ©2016

Who? What? Why?Group Introductions

#UXPA2016 ©2016

Why social math?

#UXPA2016 ©2016

1 ActivitySOCIAL MATH OR NOT?

Workshop Agenda

23 Activity

LET’S MAKE SOCIAL MATH!

WHAT IS

Social Math?WHY DO

Social Math?

Social Math

SOCIAL MATH

HOW TO DO

1WHAT IS

Social Math?A method of framing information that makes a

relevant comparison, utilizes good visual design, and incorporates a strong call to

action.

#UXPA2016 ©2016

A way of telling a compelling story using data, or relate them to concepts that people find familiar.

STORYTELLING

Makes complex statistical and numerical data more approachable to the audience

APPROACHABLE

Making information meaningful and actionable. while asking people to engage in a behavior to promote a cause.

VISUAL & MEANINGFUL

1WHAT IS

Social Math?

#UXPA2016 ©2016

Makes complex statistical and numerical data more approachable to the audience

APPROACHABLE

#UXPA2016 ©2016

A way of telling a compelling story using data, or relate them to concepts that people find familiar.

STORYTELLING

#UXPA2016 ©2016

Making information meaningful and actionable, while asking people to engage in a behavior to

promote a cause.

VISUAL & MEANINGFUL

The Social Math “Formula”

#UXPA2016 ©2016

Used to draw attention to a certain element of design. Our eyes are immediately drawn to bold, contrasting pops of color.

COLOR

An effective tool for guiding a viewer’s eye to a specific element of a design. Our minds associate size with importance.

SCALE

Dramatic shifts in color or text-size signal that something is different which grabs attention.

CONTRAST

THE BASICS OF

Visual Hierarchy

Used to separate and group elements of a design; it’s the quickest way to relate similar content or distinguish one group of content from another.

PROXIMITY

Examples of Social Math!

#UXPA2016 ©2016

THE FACTS

Eating a large buttered popcorn while watching the latest Marvel

Comics superhero-based movie at Regal Cinemas causes you to consume 1,200 calories and 60

grams of saturated fat.

#UXPA2016 ©2016

Number of calories in

Movie PopcornNumber of calories in

Movie PopcornNumber of rotations for

Mars to cirlcethe Sun

Number of rotations for

Mars to cirlcethe Sun

BAD EXAMPLE OF SOCIAL MATH

#UXPA2016 ©2016

GOOD EXAMPLE OF SOCIAL MATH

#UXPA2016 ©2016

1100CALORIES1100CALORIES

1200CALORIES

1200CALORIES

Next time you attend a movie, rememberthere are healthier options.

Next time you attend a movie, rememberthere are healthier options.

60GRAMS FAT

60GRAMS FAT

16GRAMS FAT

16GRAMS FAT

THE FACTS

Drinking too much, including binge drinking, cost the United States $249 billion in 2010, or $2.05 a

drink, from losses in productivity, health care, crime, and other

expenses.

#UXPA2016 ©2016

GOOD EXAMPLE OF SOCIAL MATH

Learn more about binge drinking at: http://www.cdc.gov/alcohol/fact-sheets/binge-drinking.htm

Cost the US $249 billionDRINKING TOO MUCH

$2.05 a drink

=

http://www.cdc.gov/alcohol/fact-sheets/binge-drinking.htm

Social Math or not?

Determine if each example does or does not meet our

definition of social math

Make it Social Math!

What is missing? How would you make this fit the definition of social

math?

&

#UXPA2016 ©2016

2WHY DO

Social Math?Promotes action on an issue and has the opportunity to be very evocative when combined with effective visual design.

GREATER IMPACT

Alleviates confusion by making the message clear, and motivates behavior.

FAMILIAR & RELATABLE

#UXPA2016 ©2016

Alleviates confusion by making the message clear, and motivates behavior.

FAMILIAR & RELATABLE

#UXPA2016 ©2016

Promotes action on an issue and has the opportunity to be very evocative when combined

with effective visual design.

GREATER IMPACT

#UXPA2016 ©2016

Go get some coffee!You look like you could use some.

#UXPA2016 ©2016

Social Math

Identify your audience

Determine the focus of your data

Visualize your story

Double check your data

2

3

5

7

6

Identify a meaningful comparison

4 Find reliable data

Define your issue1

Social Math





2

3

5

7

6



Define your issue1First you need to understand the topic you are creating your message to address.

Social Math





2

3

5

7

6



Define your issue1

Define the characteristics of the audience you want your message to reach.

Social Math





2

3

5

7

6



Define your issue1

Narrow down your issue to one specific topic so that your message is as focused as possible. Keep it simple.

Social Math





2

3

5

7

6



Define your issue1

Social Math



2

3

5 Identify a meaningful comparison


Define your issue1

Reputable source

Length of time source had been active

Verify how data were collected

Transparency

Social Math





2

3

5

7

6



Define your issue1

The story you tell must be familiar and relevant.

Social Math





2

3

5

7

6



Define your issue1

You should find another source to verify your information. This is critical; if you don’t double check your facts, someone else will.





2

3

5

7

6



Define your issue1

Remember…Scale, Color, Contrast, Proximity!

Social Math





2

3

5

7

6



Define your issue1

21

Define your issue Identify your audienceFirst you need to understand the topic you are

creating your message to address.Define the characteristics of the audience you

want your message to reach.

43

Determine the focus of your

dataFind reliable data

Narrow down your issue to one specific topic so that your message is as focused as possible.

Keep it simple.

Reputable source

Length of time source had been active

Verify how data were collected

Transparency

5

Identify a meaningful comparisonThe story you tell must be familiar and relevant.

Interview 2-3 people to find a meaningful comparison using the data that you collected.

6

Double check your dataYou should find another source to verify your

information. This is critical; if you don’t double check your facts, someone else will.

7


Use the hierarchy of the visual to emphasize key facts

Cater to your audience with the appropriate visual style

Thank [email protected]@ey.co

m@ashpulli@VictorYocco

#UXPA2016 ©2016

Session Survey: www.uxpa2016.org/survey/135

http://www.uxpa2016.org/survey/

design method for visualizing complex data for users

Technology