DESIGNING WITH AND FOR DATA — USER INTERFACE 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 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 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 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 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 R. Klanten, S. Ehmann, F. Schulz

Getting Started with Processing Casey Reas and Ben Fry.