THE UX OF DATA - VISUALIZATION RESPONSIVE

@webinterface

THE UX OF DATAVISUALIZATION RESPONSIVE

SMART DATA 2016

@webinterface

PETER ROZEK

@webinterface

@webinterface

@webinterface

WORK @ ecx.io (DIGITAL AGENCY)

@webinterface

ECX.IO AN IBM COMPANY

UX, USABILITY, ACCESSIBILITY, FRONTEND

@webinterface

@webinterface

DATA VISUALIZATION TODAY, IS ABOUT DESIGNING SYSTEMS, STRATEGIES AND EXPERIENCE.

@webinterface

HISTORY OF DATA VISUALIZATION

@webinterface

300BC

PORPHYRY OF TYROS CREATED THE FIRST DOCUMENTED MIND MAP.

@webinterface

1786

WILLIAM PLAYFAIR PUBLISEHD THE FIRST SET OF CHARTS.

@webinterface

@webinterface

TODAY, DATA WAS NO LONGER LIMITED TO JUST A STATIC VIEW, IT COULD BE INTERACTED WITH DYNAMICALLY.

@webinterface

WE ARE WIRED TO VISUALIZE FAST.

WE ARE NOT WIRED TO READ FAST.

@webinterface

THE OLD SAYING:

„A PHOTO IS WORTH A THOUNSEND WORDS“.

@webinterface

8.96 Mb/S VISUAL 81.6 B/S

READING

@webinterface@webinterface

THE AVERAGE PERSON COMPREHENDS 120 WORDS PER MINUTE READING.

THAT IS EQUIVALENT TO 81.6 BITS OF DATA PER SECOND.

@webinterface

THE CONNECTION BETWEEN THE EYE AND BRAIN IS FAST.

THE HUMAN BRAIN IS ESPECIALLY AT RECOGNIZING SHAPES AND PATTERNS.

@webinterface

WHAT IS EXACTLY THE UX OF DATA VISUALIZATION?

@webinterface

HUMANIZED

PERSONAL CONNECT

MEMORABLE

IMPACTFUL

@webinterface

@webinterface

@webinterface

WHAT EXACTLY DOES DATA VISUALIZATION DO?

@webinterface

DATA VISUALIZATION IS A VISUAL REPRESENTATION OF DATA.

DATA MADE MORE UNDERSTANDABLE.

@webinterface

@webinterface

@webinterface

DATA VISUALIZATION AND INFOGRAPHICS ARE NOT THE SAME.

INFOGRAPHICS TELL A SCROLLING STORY, BY PROVIDING TIDBITS OF DATA TO SUPPORT A SPECIFIC IDEA OR STRATEGY.

@webinterface Source: http://www.evanshalshaw.com/more/bondcars/

@webinterface

MAKE YOUR DATA KNOWLEDGE BEAUTIFUL IN FIVE STEPS. 5

@webinterface

1. UNDERSTAND THE SOURCE

@webinterface Image: http://www.br.de

VISUAL COMPLEXITY

LEARNING TO CREATE GOOD DATA VISUALIZATION MEANS TO UNDERSTAND THE DATA AT FIRST.

@webinterface

5 6 8 9 1 3 4 8 3 9 4 5 6 7 1 0 2 3 5 8 7 8 3 5 7 3 9 2 4 9 3 1 9 3 4 5

DATATRANSFORMATION

STATISTICS

VISUALMAPPING

VISUAL DESIGN

INTERACTIVE FRAMING

INTERACTION DESIGN

@webinterface Image: http://www.br.de

START SKETCHING YOUR IDEA. THIS TECHNIQUE IS FAST AND EASY TO EVALUATE.

@webinterface

2. UNDERSTAND THE CONTEXT

@webinterface

CONTEXT:

THINK SMALL AND ASSET DEPENDENCE

@webinterface

PLOTTING THE UX OF DATA IN A JOURNEY MAP.

@webinterface

CONTENT:

READABLE

OPERABLE

UNDERSTANDABLE

INTERACTION

@webinterface

COMPONENT:

DESIGN VISUALIZATIONS FOR ANY SCREEN AND ANY BROWSER.

USE HTML TO BUILD AND JAVASCRIPT TO ENHANCE.

@webinterface

THINK RESPONSIVELY FROM THE BEGINNING OF THE PROJECT.

@webinterface

USE AND ADAPT THE TECHNICAL PRINCIPLES OF RESPONSIVE WEB DESIGN.WORKING WITH FLEXIBLE GRIDDESIGNING WITH CSSENHANCING WITH JAVASCRIPT

@webinterface

3. IDENTIFY THE NARRATIVE

@webinterface

GOOD DATA VISUALIZATION TELLS A STORY THAT CAN BE UNDERSTAND BY ANYONE.

@webinterface Source: What makes a good visualization?

@webinterface

STORYTELLING CHANGES WITH TECHNOLOGY.

@webinterface@webinterface

CAVE PAINTING TELL STORIES

PEOPLE TELL STORIES

@webinterface Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks

Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks@webinterface

WORDS TELL STORIES

@webinterface

IMAGES TELL STORIES

Image from: http://nikolawashere.com/tag/avengers/@webinterface

COMIC TELL STORIES

Image from: http://www.giga.de/filme/...@webinterface

MOVIES TELL STORIES

@webinterface

DATA TELL STORIESSTORIES ARE MEANINGFULDATA ARE MEANINGFUL

Source: http://d3js.org/

D3.js

@webinterface

@webinterface

JAVASCRIPT LIBRARY FOR MANIPULATING DOCUMENTS BASED ON DATA.

USING HTML, SVG, CSS TRANSITIONS EMPHASIS ON WEB STANDARDS CAPABILITIES OF MODERN BROWSERS

„…so if your browser doesn't support standards, you're out of luck. Sorry!“

D3 documentation

Source: https://github.com/mbostock/d3/wiki@webinterface

Source: http://www.chartjs.org/

@webinterface

HTML 5 BASED SIMPLE AND FLEXIBLE RESPONSIVE MODULAR INTERACTIVE

@webinterface Source: https://gionkunz.github.io/chartist-js/

@webinterface

STYLE WITH CSS & CONTROL WITH JS USAGE OF SVG RESPONSIVE CONFIGURATION WITH MEDIA QUERIES

@webinterface

4. DEFINE THE USER EXPERIENCE

@webinterface

DATA NEEDS A LANGUAGE AND STORY TO FOLLOW BE EFFECTIVE.

@webinterface

TURNING STORIES INTO REALITY:

MEMORABLE

IMPACTFUL

PERSONAL CONNECT

@webinterface

5. SIMPLICITY RULES

@webinterface

DATA VISUALIZATIONS EXIST TO INFORM THE USER.

THEY´RE NOT AN EXCUSE TO OVERLOAD SOMEONE WITH INFORMATION THEY DON´T NEED TO KNOW.

@webinterface

ROLE OF A DESIGNER AND DEVELOPER TO FOCUS ON SIMPLICITY.

TAKING COMPLEX OR DISPARATE INFORMATION AND MAKING IT TANGIBLE AND UNDERSTANDABLE.

@webinterface

CONCLUSION

@webinterface

WHAT IS YOUR OBJECTIVE?

@webinterface

RESEARCH:FIND YOUR USER´S

FRICTION.

@webinterface

IMPLEMENT MEASURE ITERATE

@webinterface

MORE HUMAN

„Big Data ist kein Heiliger Gral. Entscheidungen müssen immer noch von Menschen getroffen werden. Maschinen können nicht kreativ sein.“

Jeremy Abbet, Creative Evangelist bei Google Deutschland

@webinterface

THANKS

…dear Ellen

@webinterface

@webinterface [email protected]