the ux of data - visualization responsive
TRANSCRIPT
@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
@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
@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
