Design process

Creating a data visualization

Ben Fry’s
data visualization process

User Experience Design

Target Audience and Major Variables

• Frames the investigation
• Allows us to ask questions about the data
• Helps define major variables
• Major variables (content) define the visualization form

Networks

Maps

Timelines

Trees

Graphs

Visualization Forms

Context

Ambient visualization

Participatory visualization

Data journalism 

Poster

Delightfully miscellaneous

Web visualization

Interaction & 

Presentation

The way we frame information in context

Presentation: Zoom in + Whole view

Interaction: Click + Animation

Presentation: Isolated Views

Interaction: Select to Redisplay

Presentation: Small multiples

Interaction: Hover to Display

Design Review:

• Target audience and major variables
• Visualization Form
• Context
• Interaction types
• Presentation
• Visual Design

Development considerations

Implementing a data visualization

Considerations:

• Performance
• Accessibility
• Responsive web design
• Maintainability

Performance

Speed to load

Performant CSS

Performant user interactions

Click, hover, scroll, etc.

Performant transitions

Designing for performance

“Designers are in a unique position to impact overall page load time and perceived performance. The decisions that are made during the design process have an enormous impact on the end result of a site.”

- Lara Hogan

Accessibility

Visual

Motor

Auditory

Cognitive

Screen reader accessible

Table alternative?

Color Vision Deficiency

Unambiguous colors

Focus states

Smart TVs / game consoles

Responsive web design

Flexible dimensions

Touch vs. mobile

Maintainability

Code bloat:

• Number of colors
• Repeatable components / interactions
• Ease of implementation
• Responsive web design media queries changes
• Style guide

Let’s connect the two

How design maps to development considerations

HAPPY BIRTHDAY

DAN!!!!!!!

HAPPY BIRTHDAY

DAN!!!!!!!

HAPPY BIRTHDAY DAN!!!!!!!

Collaboration

Communication strategies and methods

Designer

Developer

Discovery & Design

Development

Points of collaboration

Start of project

Check-ins:

During discovery and design phase

• Sketches
• Wireframes
• Demos
• Research & prototype unknowns

Meet ~once a week

Design heavy, dev light

Sketches

Wireframes

• CodePens are good for demonstrating
• And for showing animations

Demos:

Transition:

Design near completion. Preparing handoff. The most overlap happens here!

• Annotated designs
• Documentation
• Prototypes
• Review all comps
• Come up with a list of questions

Meet for long periods

Design heavy, dev heavy

Annotated designs

List of questions

Quality Assurance:

During development phase after each feature completion. Ensure expected user experience

• In-browser demo

Meet ~once a week

Dev heavy, design light

Workshop

Case study

NY Philharmonic performance history variables

• Conductor
• Orchestra
• Location
• Event type
• Venue
• 1st performance
• Number of performances
• Soloists

Target Audience:

Major Variable:

Visualization form:

Context: 

Internal tool for research team at the NY Philharmonic

Event types, Seasons

Timeline, Graph

Interactive web visualization

Tasks

• Annotate Visualization
• Find examples of interactions
• Consider responsive layout
• Conversation with UX Dev

Our solution:

• Final visualization
• Review our process, wireframes and documentation
• Go over decisions that were made
• See our implementation

Examples to facilitate discussion

Show final design w/ annotations and interaction proposal

Performance:

list items

Responsive:

list items

Accessibility:

list items

Maintainability:

list items