Creation and Implementation

The collaboration between Design and UX development

DockYard

Amanda Cheung, Lead UX Developer

Ashley Treni, UX Designer

Data Visualization

Tonight’s Agenda:

  • Presentation
    • Design process
    • Development considerations
    • Collaborative techniques
    • Case study
  • Workshop
  • Recap
    • Our solution

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

Click, hover, scroll, etc.

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

Table alternative?

Color Vision Deficiency

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

Transition

Quality Assurance

Check-ins:

During discovery and design phase

 

  • Sketches
  • Wireframes
  • Demos
  • Research & prototype unknowns

 

Meet ~once a week

Design heavy, dev light

Sketches

Wireframes

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

Workshop time!

Break into groups

Pass out handouts/templates/visualizations

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

Made with Slides.com