DataStax | Meaningful User Experience with Graph Data (Chris Lacava, Expero) | Cassandra Summit 2016

Copyright 2016 Expero, Inc. All Rights Reserved

Meaningful UX with Graph Data

(c) 2016 Expero. All Rights Reserved 8/16/2016

Chris LaCavaSenior UX DesignerExpero www.experoinc.com Chris has spent the past two decades defining, designing and building software for a variety of industry verticals. He has experience as a usability engineer, interaction designer, front-end developer as well as product manager for both consulting and product-oriented organizations.

Hello!


Bringing Challenging Product Ideas to Life

Data Architecture, Visualization & Training

Reactive User Interfaces

Lean Product Discovery & Rapid Prototyping

Productizing Research & Innovation Projects

Custom Software for Scientific Computing

Data Science & Machine Learning


1. Graph Basics 2. Tailor experiences to the intended audience3. Determining the right visualization4. Choosing the right tools

Things we’ll cover

Copyright 2016 Expero, Inc. All Rights ReservedCopyright 2016 Expero, Inc. All Rights Reserved

Graph Basics

5


8/16/2016

BA

Vertex

Node

Edge

Relationship

Things are connected to other things


BA

Vertex

Node

Edge

RelationshipNYC Bostonconnected by

rail



BA

Vertex

Node

Edge

Relationship

Jason Aliceson of



BA

(Product)

Spider Man Lunchbox

Marvelpart of

(Franchise)



CA

Spider Man

Lunchbox

Marvel

part of (Franchise)B

Ages 3-8recommended

(Product)(Age Range)



CA

Spider ManLunchbox

Marvelpart of

(Franchise)

B

Ages 3-8

(Product)

(Age Range)

D

part ofIron Man

Toothbrush

(Product)

E

Back To School 2016(Promotio

n)

promoted product

recommended


recommended


8/16/2016

TransportationVerticesStationsCitiesEdgesRailsRoads

© 2016 Expero. All Rights Reserved

Graphs are everywhere

The InternetVerticesRoutersComputersEdgesFibreEthernetMicrowave


8/16/2016© 2016 Expero. All Rights Reserved

Graphs are everywhereInteractions

Professors, Papers,

Conferences, Classes, Students

People, Restaurants, Hotels,

Reservations, Proximity

Sensors, Visits

People, Jobs, Titles,

Companies, Careers, Skills

Social Network

Vertices

People

Businesses

Clubs

Edges

Phone Calls

Emails

Memberships

Friendships

Copyright 2016 Expero, Inc. All Rights Reserved 14

Tailoring experiences

1. Know the problem you're trying to address2. Know the goals of your users3. Experience the data before you design a solution


● Be concise and general● Identify a major gap or deficiency in current system

or process

State the problem

Problem statement should:

Problem statement should not:● Contain the solution● Nest other problem statements● Address only symptoms

“If I were given one hour to save the planet, I would spend 59 minutes defining the problem and one minute resolving it.”

- Albert Einstein

Find the gap


Zeroing in on user goals What users think will bridge

the gap.

● Measurable ● From the perspective of each user type● Directly address the problem

Goals should be:

Goals should not be:● Technology specific● General, vaguely subjective


Dominant Dimensions provide an intuitive and technically feasible way to efficiently move through a large amount of data. Improving data coverage also increased the probability of finding relevant relationships that might have otherwise gone undiscovered.

What’s the Dominant Dimension in your data?● Temporal● Frequency (Velocity)● Quality (Veracity)● Relationships (Connections, Correlations, etc.)● Context● Type (Variety)● Size (Volume)● State/Status● Georeference (Location)● Custom Attributes

Data Discovery How can data

bridge the gap?


1. Determine the most effective visualization2. Factor in user perspective3. Leverage dominant dimensions

The right visualization

Copyright 2016 Expero, Inc. All Rights Reserved 19Good Charts by Scott Berinato

Answer 2 Questions:

Is my information conceptual or data-driven?

Are my visuals meant to be declarative or exploratory?

Determine the most effective viz

http://playground.tensorflow.org/%23activation=sigmoid&regularization=L1&batchSize=20&dataset=spiral&regDataset=reg-plane&learningRate=0.01&regularizationRate=0.03&noise=25&networkShape=4,2,2,2,2,2&seed=0.93511&showTestData=true&discretize=false&percTrainData=90&x=true&y=true&xTimesY=false&xSquared=false&ySquared=true&cosX=false&sinX=false&cosY=false&sinY=false&collectStats=false&problem=regression&initZero=false

http://playground.tensorflow.org/%23activation=sigmoid&regularization=L1&batchSize=20&dataset=spiral&regDataset=reg-plane&learningRate=0.01&regularizationRate=0.03&noise=25&networkShape=4,2,2,2,2,2&seed=0.93511&showTestData=true&discretize=false&percTrainData=90&x=true&y=true&xTimesY=false&xSquared=false&ySquared=true&cosX=false&sinX=false&cosY=false&sinY=false&collectStats=false&problem=regression&initZero=false


Idea Generation➔ Validate ideas➔ Creative, free flowing➔ Used to wireframe / design

Standard Data Visualization➔ Conventional, static ➔ Structured, simple data➔ Used to affirm or set context

Data Exploration➔ Trend spotting, deep analysis➔ Network diagram, 3D+➔ Used for trend spotting, deep

analysis

Idea Illustration➔ Shows process or framework➔ Simple metaphorical➔ Used to simplify complexity

20

Declarative

Exploratory

Conceptual Data Driven



Idea Generation

Standard Data Visualization

Data Exploration

Idea Illustration

21

Declarative

Exploratory

Data Driven


Conceptual

START STEP 1 Q?

SUBMIT



Idea Illustration



Idea Generation



Standard visualization

http://extremepresentation.com/Andrew Abela:

http://extremepresentation.com/


Determine the most effective vizAlgorithm based graph stories

Dependencies• Failure chains• Order of operation

Matching / CategorizingHighlight variant of dependencies

ClusteringFinding things closely related to each other (friends, fraud)

Flow / CostFind distribution problems, efficiencies

SimilaritySimilar paths or patterns

Centrality, SearchWhich nodes are the most connected or relevant


User Perspective What users think will bridge

the gap.

Why, how and where your users do their work affects user adoption


Example Scenario

27


Example Scenario - State the problem

Our users don’t have enough insight into how social media activity related to their products contribute to the bottom line, especially by region.


Social media saturationQuickly see information social media over time, by region, in relation to a specific product announcements. Identify key influencers.

Financial data correlationClearly correlate regional financial / sales data to a given region and announcement.

Overall performance of a product announcement at a glanceView regional, financial and social performance indicators for each announcements.

Example Scenario - User Goals


Data Sources:

● Graph of social media posts and comments● Regional sales and market data● Regional news announcements

Example Scenario - Experience the data


Dominant dimensions:

Product AnnouncementsTimeRegion


Social media occurrence (frequency)Financial KPI (sales / stock)

Primary entities:


What Does the data tell us?


Financial indicators and product order volume react inconsistently from region to region after traditional press announcements.

Sales are stronger in regions with more social media activity directly after a major announcement.


Example Scenario - Design Spec

Product Campaign

Region

Time

Dominant dimensions



News Story

Financial KPIs

Social media occurrence

Primary Entities


Example Scenario - Design SpecGoals

1. Social media mention patterns, regionally, over time

2. Identify key influencers in social media, and announcement origin (per region)

Key Influence Indicators2

● Using weighted criteria, the user can zero in on key influencers within a given region at the selected time

● The User can progressively disclose more information about that activity by selecting one of the influencers.

2


1. Enumerate needs based on spec2. Evaluate off-the-shelf, open source, custom3. Ensure UX is cohesive

Choosing The Tools


Experiencing the data

DataStax Studio Linkurious Enterprise


UI Frameworks and Libraries

Selecting a robust framework offers:● A better, more consistent UX● Faster development● Browser compatibility support● Responsive UI extensions● A methodology


Node Chart Visualizations

KeyLines

Cytoscape

LinkuriousJS

SigmajsD3


Geospatial

LinkuriousJS MapboxKeyLines

LeafletJS Google Maps


Google Charts43

Standard Visualizations

ChartJS Highcharts


Timebar

KeyLines


Thank you

45

FOLLOW US@ExperoUX@uxchrislacava

EMAIL US

[email protected]@experoinc.com

mailto:[email protected]

DataStax | Meaningful User Experience with Graph Data (Chris Lacava, Expero) | Cassandra Summit 2016

Software

Transcript of DataStax | Meaningful User Experience with Graph Data (Chris Lacava, Expero) | Cassandra Summit 2016