datastax | meaningful user experience with graph data (chris lacava, expero) | cassandra summit 2016
TRANSCRIPT
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!
(c) 2016 Expero. All Rights Reserved 8/16/2016
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
(c) 2016 Expero. All Rights Reserved 8/16/2016
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
Copyright 2016 Expero, Inc. All Rights Reserved
8/16/2016
BA
Vertex
Node
Edge
Relationship
Things are connected to other things
(c) 2016 Expero. All Rights Reserved 8/16/2016
BA
Vertex
Node
Edge
RelationshipNYC Bostonconnected by
rail
Things are connected to other things
(c) 2016 Expero. All Rights Reserved 8/16/2016
BA
Vertex
Node
Edge
Relationship
Jason Aliceson of
Things are connected to other things
(c) 2016 Expero. All Rights Reserved 8/16/2016
BA
(Product)
Spider Man Lunchbox
Marvelpart of
(Franchise)
Things are connected to other things
(c) 2016 Expero. All Rights Reserved 8/16/2016
CA
Spider Man
Lunchbox
Marvel
part of (Franchise)B
Ages 3-8recommended
(Product)(Age Range)
Things are connected to other things
(c) 2016 Expero. All Rights Reserved 8/16/2016
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
Things are connected to other things
recommended
Copyright 2016 Expero, Inc. All Rights Reserved
8/16/2016
TransportationVerticesStationsCitiesEdgesRailsRoads
© 2016 Expero. All Rights Reserved
Graphs are everywhere
The InternetVerticesRoutersComputersEdgesFibreEthernetMicrowave
Copyright 2016 Expero, Inc. All Rights Reserved
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
Copyright 2016 Expero, Inc. All Rights Reserved 15
● 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
Copyright 2016 Expero, Inc. All Rights Reserved 16
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
Copyright 2016 Expero, Inc. All Rights Reserved 17
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?
Copyright 2016 Expero, Inc. All Rights Reserved 18
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
Copyright 2016 Expero, Inc. All Rights Reserved
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
Determine the most effective viz
Copyright 2016 Expero, Inc. All Rights Reserved
Idea Generation
Standard Data Visualization
Data Exploration
Idea Illustration
21
Declarative
Exploratory
Data Driven
Determine the most effective viz
Conceptual
START STEP 1 Q?
SUBMIT
Copyright 2016 Expero, Inc. All Rights Reserved
Determine the most effective viz
Idea Illustration
Copyright 2016 Expero, Inc. All Rights Reserved
Determine the most effective viz
Idea Generation
Copyright 2016 Expero, Inc. All Rights Reserved
Determine the most effective viz
Standard visualization
http://extremepresentation.com/Andrew Abela:
Copyright 2016 Expero, Inc. All Rights Reserved
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
Copyright 2016 Expero, Inc. All Rights Reserved 26
User Perspective What users think will bridge
the gap.
Why, how and where your users do their work affects user adoption
Copyright 2016 Expero, Inc. All Rights ReservedCopyright 2016 Expero, Inc. All Rights Reserved
Example Scenario
27
Copyright 2016 Expero, Inc. All Rights Reserved 28
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.
Copyright 2016 Expero, Inc. All Rights Reserved 29
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
Copyright 2016 Expero, Inc. All Rights Reserved 30
Data Sources:
● Graph of social media posts and comments● Regional sales and market data● Regional news announcements
Example Scenario - Experience the data
Copyright 2016 Expero, Inc. All Rights Reserved 31
Dominant dimensions:
Product AnnouncementsTimeRegion
Example Scenario - Experience the data
Social media occurrence (frequency)Financial KPI (sales / stock)
Primary entities:
Copyright 2016 Expero, Inc. All Rights Reserved 32
What Does the data tell us?
Example Scenario - Experience the data
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.
Copyright 2016 Expero, Inc. All Rights Reserved
Example Scenario - Design Spec
Product Campaign
Region
Time
Dominant dimensions
Copyright 2016 Expero, Inc. All Rights Reserved
Example Scenario - Design Spec
News Story
Financial KPIs
Social media occurrence
Primary Entities
Copyright 2016 Expero, Inc. All Rights Reserved
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
Copyright 2016 Expero, Inc. All Rights Reserved
Example Scenario - Design Spec
Copyright 2016 Expero, Inc. All Rights Reserved
Example Scenario - Design Spec
Copyright 2016 Expero, Inc. All Rights Reserved 38
1. Enumerate needs based on spec2. Evaluate off-the-shelf, open source, custom3. Ensure UX is cohesive
Choosing The Tools
Copyright 2016 Expero, Inc. All Rights Reserved 39
Experiencing the data
DataStax Studio Linkurious Enterprise
Copyright 2016 Expero, Inc. All Rights Reserved 40
UI Frameworks and Libraries
Selecting a robust framework offers:● A better, more consistent UX● Faster development● Browser compatibility support● Responsive UI extensions● A methodology
Copyright 2016 Expero, Inc. All Rights Reserved 41
Node Chart Visualizations
KeyLines
Cytoscape
LinkuriousJS
SigmajsD3
Copyright 2016 Expero, Inc. All Rights Reserved 42
Geospatial
LinkuriousJS MapboxKeyLines
LeafletJS Google Maps
Copyright 2016 Expero, Inc. All Rights Reserved
Google Charts43
Standard Visualizations
ChartJS Highcharts
Copyright 2016 Expero, Inc. All Rights Reserved 44
Timebar
KeyLines
Copyright 2016 Expero, Inc. All Rights ReservedCopyright 2016 Expero, Inc. All Rights Reserved
Thank you
45
FOLLOW US@ExperoUX@uxchrislacava
EMAIL US
[email protected]@experoinc.com