DESIGNING WITH AND FOR DATA — USER INTERFACE DESIGN SEMINAR / 01-04-2015
… and what did we learn! ABOUT US
2008 ABOUT US
15 ABOUT US
Utrecht, the Netherlands CURRENT CLIENTS THE RISE OF DATA VISUALIZATION DAILY LIFE HISTORY
1786 1880 INTERNET +SENSORS SENSORS ARE EVERYWHERE SENSORS ARE EVERYWHERE SENSORS ARE EVERYWHERE GENERATES DATA WORLDWIDE DATA GROWTH
Source: IDC, EMC VISUALIZING DATA COMMUNICATION
Sender Message Receiver COMMUNICATION
Data (visualisation)
Sender Message Receiver INPUT DATA
For example: - Numerical data • Financial • Climate • GIS • Web analytics - Textual data Sender • Social media • Newspaper articles - Images • Photo’s • CCTV • Movie INPUT DATA
Sender Message Receiver METHOD
ACQUIRE PARSE FILTER ANALYSE VISUALIZE ENRICH INTERACT
based on Computational Information Design by Ben Fry METHOD
ACQUIRE PARSE FILTER ANALYSE VISUALIZE ENRICH INTERACT
based on Computational Information Design by Ben Fry TEAM
Source: Andy Kirk TEAM
Source: Andy Kirk TOOLS FOR VISUALIZATION Easy to use
RAW
Excel / OpenOffice Visage Tableau (public) Quadrigram Mr. Data Converter Mapbox Circos QlikView DataWrangler MagnaView Timeline Google Fusion Tables Data Design Many Eyes GeoCommons Cytoscape QGIS TIBCO Spotfire Raphael DataWrapper Open Refine CartoDB Processing 2 threejs
R-Project NodeBox D3.js
Advanced DIFFERENT CHART TYPES
Comparing quantitative and categorical values
Charting hierarchical and part-to-whole relationships
Plotting trends and changes over time
Graphing connections and multivariate relationships
Mapping spatial data ADJUST
Hue Orientation
Intensity Size
Position Shape Goals
Make decissions Viewing data in context Sender Message Receiver Finding patterns Understanding a story Data visualization MessageGetting inspired Goals
Make decissions Receiver Viewing data in context Finding patterns Understanding a story Getting inspired Ensure the outcome is relevant for the user
Personal Specific Up to date 4 LESSONS LEARNED Visualising the KPI’s of a bank — DASHBOARD » DESIGN & DEVELOPMENT
2011
LESSON 1 Informing people with data is something different than ‘telling a story’ with data
LESSON 2 Be aware when you do something unconventional Find in intuitive way patterns, relations and sentiments in online news and social media — PRODUCT » DESIGN & DEVELOPMENT
LESSON 3 Creating data visualizations is time consuming (especialing when you try to find new ways to visualize things) CASE: Visualising Chicago’s mobility and infrastructure towards a prosperous future. — WEBSITE » ANALYSIS, DESIGN & DEVELOPMENT
Chicago Metropolitan Agency for Planning
http://www.cmap.illinois.gov http://www.cmap.illinois.gov
http://www.cmap.illinois.gov http://www.cmap.illinois.gov
C°F
LESSON 4 Teamwork is crucial to create results like these THANK YOU!
cleverfranke.com
/cleverfranke @cleverfranke Further Reading
Design for Information The Design of Everyday Things Isabel Meirelles Donald Norman Tools
Data Visualization: A successful design process Visual Language for Designers Overview of tools Andy Kirk Connie Malamed http://www.visualisingdata.com/index.php/resources/ http://selection.datavisualization.ch/ The Functional Art - an introduction to information The Practical Guide to Information Design. graphics and visualization Ronnie Lipton Alberto Cairo Ways of Seeing Video Designing Data Visualization John Berger Noah Iliinsky & Julie Steele Hans Rosling http://www.ted.com/talks/ A Practical Guide to Designing with Data Visual Complexity: Mapping Patterns of Information hans_rosling_shows_the_best_stats_you_ve_ever_seen Brian Suda Manuel Lima
Visualize This: The Flowing Data Guide to Design, The Book of Trees: Visualizing Branches of Visualization, and Statistics Knowledge Nathan Yau Manuel Lima Archive Statistical Atlas of the United States (1870 - 1890) The Visual Display of Quantitative Information Visual Storytelling: Inspiring a New Visual Language Edward Tufte R. Klanten, S. Ehmann, F. Schulz
Getting Started with Processing Casey Reas and Ben Fry.