UXPA BOSTON 2013 - Visual Communication in UX research and design

Download UXPA BOSTON 2013 - Visual Communication in UX research and design

Post on 22-Oct-2014

1.017 views

Category:

Design

6 download

Embed Size (px)

DESCRIPTION

Communicating strategies, concepts, ideas and user research data to key decision-makers is a major challenge that user experience designers continuously face in the product design cycle. A big part of this challenge lies in the fact that user experience deliverables need to be communicated to a wide audience with various skills and expertise at different stages of the product development. This presentation focuses on providing user experience researchers and designers with real examples on how infographics and information visualization methods have been used in the different stages of a user-centered design cycle to convey solutions to complex business problems in a visually more consumable format. According to various cognition and perception research literature, visualization has been proven to improve the reception of information and knowledge compared to text. The content of this presentation reinforces those findings by examining the different visualization techniques and principles invoked in the literature and adapting them to promote the user experience being designed. Various visual representations have been explored as a replacement to more traditional formats of conveying ideas such as text for example. Those include"day-in-a-life charts", experience maps, color-coded dashboards and many more. Best practices and lessons learned will be shared during the session such as how to best apply Tufte's design principles to improve the effectiveness of visual representation. The session will be an interactive discussion where the audience is encouraged to start thinking on how the knowledge around information visualization could be leveraged to help us, designers and UX researchers, better communicate design problems and solutions.

TRANSCRIPT

UXPA_Presentation_2013

VISUAL COMMUNICATION IN UX RESEARCH & DESIGN

MAY 2013

UXPA

MENG YANG | DORY A.AZARKRONOS

SETTING THE STAGE

We are Interaction Designers, we apply visualization research findings

MAY 2013

:) Basically, we leave the brain-teasing work toresearchers

xkcd.com

SETTING THE STAGE

Today, we shed light on research findings that helped us effectively communicate our UX deliverables

MAY 2013

xkcd.com

SETTING THE STAGE

MAY 2013

VISUAL COMMUNICATION

VISUALIZATION

:s

?

!#!

!#!

SETTING THE STAGE

MAY 2013

COMMUNICATION

EXPRESSED

Transfer of information from a human being to another

SETTING THE STAGE

MAY 2013

VISUAL COMMUNICATION

REPRESENTED

VISUALS

Transfer of information through visuals from a human being to an-other

SETTING THE STAGE

MAY 2013

VISUAL COMMUNICATION

VISUALIZATION

REPRESENTED

VISUALS

Transfer of information through visuals from a human being to another. The transfor-mation of information into visuals is visual-ization

MAY 2013

WHY VISUALIZATION?

VISUAL COMMUNICATION

MAY 2013

WHY VISUALIZATION?

VISUAL COMMUNICATION

MAY 2013

WHY VISUALIZATION?

REVEAL INFORMATION

MAY 2013

WHY VISUALIZATION?

REVEAL INFORMATION

MAY 2013

ART & INSPIRATION

WHY VISUALIZATION?

MAY 2013

ART & INSPIRATION

WHY VISUALIZATION?

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

WHAT IS THE INFORMATION THAT YOU ARE TRYING TO COMMUNICATE?(Relationships, Comparisons, Distributions,Compositions, Descriptions)

NOT SURE?VISUALIZATION CAN HELP YOUREVEAL PATTERNS. SKETCH IT OUT, USE TOOLS AND LOOK AT THE SHAPE OF YOUR DATA

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

WHERE AND WHEN DID THISINFORMATION TAKE PLACE?(In what context)

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

WHY DO I WANT TO COMMUNICATE THIS INFORMATION?(Informational/Reporting, Proposal, Request, Feedback, Justification, Convincing, etc.)

KIM REES

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

WHO IS THE AUDIENCE

WHO IS THE INFORMATION ABOUT

KNOW YOUR TARGET AUDIENCE(Interests, Expectations, Physical/Mental charateristics, Age etc.)

IS THE INFORMATION ABOUT LIVINGAND BREATHING BEINGS?KNOW YOUR SUBJECT(Interests, Expectations, Physical/Mental charateristics, Age, Feelings, etc.)

KIM REES

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

HOW DO I REPRESENT THE INFORMATION APPROPRIATELY?

GREAT!CAN I DO BETTER?

KNOW THE DESIGN PRINCIPLES,BEST PRACTICES, DOs & DONTs

SELECT THE APPROPRIATEVISUAL REPRESENTATION

USE THE TOOL OF YOUR CHOICE

YOU HAVE THE 5WsUSE WHAT YOU LEARNEDFROM THEM

VISUALIZATION FOR COMMUNICATION

MAY 2013

WHAT

WHERE & WHEN WHY

WHO HOW

CREATIV

ITY

VISUAL COMMUNICATION FRAMEWORK

HOW DO I MAKE THE VISUALIZATION MORE INTERESTING?

USE PERTINENT METAPHORS(i.e. The Polar Bear)

USE DESIGN TOOLS: AI, PS etc.

SEARCH FOR INSPIRATIONSCREATIVITY CAN BE LEARNED

SELECTING THE VISUAL REPRESENTATION

MAY 2013

A THOUGHT STARTER - A. ABELA

SELECTING THE VISUAL REPRESENTATION

MAY 2013

A THOUGHT STARTER

What would you like to show?

COMPARISONS

RELATIONSHIPS

DESCRIPTIONS & STORY TELLING

DISTRIBUTIONS

TREES

PROCESSMAPS

CONCEPTMAPS

WORK-FLOWS

STORY-BOARDING

PROCESSMAPS

EXPERIENCEMAPS

TIMELINES

GEO MAPS

WORD CLOUDS

SEMANTICNETWORKS

BUBBLECHARTS

RADIALVIS.

ZONEMAPS

over time

over geolocation

Any 2 dimensions

Text1 Dimension

1 Dimension N Dimensions

Hierarchies and composition

Logical sequence

Connections

Non-overlapping tasks

Meaning oriented

Abstractionof Details

LogicalSequence

One UserStory

EXAMPLES

MAY 2013

EXAMPLES OF UX DELIVERABLES

DISCOVER

DESIGNEVALUATE

CONTEXTUAL INQUIRIES [Workflows]

PERSONAS [Trees, Geo Maps, Rad Vis, Bar Charts, Word Cloud]

NARRATIVES [Storyboarding]

USER EVALUATIONS[Storyboarding]

USER JOURNEY [Process map]

UX STRATEGY [Zone maps]

UX CONCEPT [Concept map]

EXPERIENCE MAP

USER SURVEY REPORT[Bubble Chart, Bar Chart]

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWCustomers observed in their context of work (CI)

Describe how customers use Kronos in their env.

Audience: DesignersSubject: 46 customers

WorkflowsUnderstand the relation-ships between Kronos & env

DISCOVER

x 46

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWAggregated feedback from observed customers (CI)

Reveal the common main tasks that users perform

Audience: DesignersSubject: Capabilities

WorkflowsCompare the frequency of use of Kronos capabilities

DISCOVER

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWAfter contextual inquiries with users from different ind.

Reduce the number of perso-nas

Audience: All stakeholdersSubject: Personas

TreesUnderstand the relationshipsbetween persona of diff. ind.

DISCOVER PERSONA FAMILIES

Michael Martin, the Department Manager

X-Vertical

Ryan Martin, the Retail Store Manager

Retail

Robert Martin, the Retail Communications Specialist (a.k.a Gatekeeper)

Retail

Nancy Martin, the Nurse Manager

Healthcare

Cindy Martin, the Central Staffing Manager

Healthcare & Retail

Primary persona

Secondary personas

Polly Martin, the Promotional Merchandising Mgr.

Retail

Manny Martin, the Manufacturing Manager

Manufacturing

x 7

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWBased on CI and user research for Retail customers

We want designers and stakeholders to use them

Audience: PM & DesignersSubject: Michael (Persona)

Tree, Geo Maps, Rad Vis, Bar Charts, Word Cloud

Reveal the primary character-istics of a Persona

Customer & Employee Satisfaction Monitor attendance

Legal complianceEnsure Coverage Stay within Budget

Job GoalsExperience & Skill

Job Experience:

Familiarity with WFC:

Technical Skill:

Use of Mobile WFM:

Low High Moderate

Michael Martin Department Manager

Herb Peterson

Howard Edwards

Peter Edwards

Organizational Structure Age

yrs yrs %42 WFC Experience Hobbies

Frequency of Use12 30*

Manager

Michael Martin

Headquarters

San Francisco

Michaels Workforce Distribution Tasks

Workforce< 50 50 - 100 >100

De

ne Y

early

Budg

etCr

eate

Sche

dule

Monit

or

Workl

oad

Record

Worked Hour

sManageAttendance

Analyze

Performance

Develop

Action Plan

100% 75% 50% 25% 0 25% 50% 75% 100%50 mi

n

45min

120

min

45min

60min

120min

60min

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWCustomer interviews with Retail employees

Identify (justify) opportuni-ties design improvements

Audience: DesignersSubject: Retail Employees

Process mapsReveal the Retail Employee experience with Kronos tasks

DISCOVER - EXPERIENCE MAP

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWLitterature review and own learnings after 3 releases

Justification for selecting platforms for templates

Audience: StakeholdersSubject: Kronos platforms

Zone MapsCompare the effort needed to adapt design on diff. plat.

DESIGN - UX STRATEGY: PLATFORM SELECTION

PC BROWSER (WIDESCREEN)TABLET (Land.)

LAYO

UT

ADAP

TATI

ON

INTERACTION ADAPTATIONMINIMUM

MAXIMUM

MAXIMUM

BB & Reg. Smartphones (Portrait)(iOS and And.)

Smartphones (Land.)(iOS and And.)

TABLET (Portrait)

EASIER TRANSITION HARDER TRANSITION DESIGN FOR

EXAMPLES

MAY 2013

WHAT WHERE & WHEN WHY WHO HOWAfter capabilities and need assessment

Describe a high-level infor-mation flow and architecture

Audience: DesignersSubject: Persona Intentions