Download as PDF, PPTX
Uploaded byPeter Rozek
THE UX OF DATA - VISUALIZATION RESPONSIVE
This document discusses the user experience (UX) of data visualization. It begins with a brief history of data visualization, then discusses how humans process visual information faster than text. The core of data visualization is explained as transforming data into a visual representation to make it more understandable. Effective data visualization tells a story or narrative with the data. The document outlines five steps to create good data visualization: understand the source, understand the context, identify the narrative, define the user experience, and emphasize simplicity. It emphasizes designing for any screen or browser using responsive web design principles.
More Related Content
Similar to THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
- 1. @webinterface THE UX OFDATA VISUALIZATION RESPONSIVE SMART DATA 2016 @webinterface
- 2.
- 3.
- 4. WORK @ ecx.io(DIGITAL AGENCY) @webinterface
- 5. ECX.IO AN IBMCOMPANY
- 6.
- 7. @webinterface DATA VISUALIZATION TODAY, ISABOUT DESIGNING SYSTEMS, STRATEGIES AND EXPERIENCE.
- 8.
- 9. @webinterface 300BC PORPHYRY OF TYROS CREATEDTHE FIRST DOCUMENTED MIND MAP.
- 10. @webinterface 1786 WILLIAM PLAYFAIR PUBLISEHDTHE FIRST SET OF CHARTS.
- 11.
- 12. @webinterface TODAY, DATA WASNO LONGER LIMITED TO JUST A STATIC VIEW, IT COULD BE INTERACTED WITH DYNAMICALLY.
- 13. @webinterface WE ARE WIRED TO VISUALIZE FAST. WEARE NOT WIRED TO READ FAST.
- 14. @webinterface THE OLD SAYING: „APHOTO IS WORTH A THOUNSEND WORDS“.
- 15. @webinterface 8.96 Mb/S VISUAL 81.6B/S READING
- 16. @webinterface@webinterface THE AVERAGE PERSON COMPREHENDS120 WORDS PER MINUTE READING. THAT IS EQUIVALENT TO 81.6 BITS OF DATA PER SECOND.
- 17. @webinterface THE CONNECTION BETWEENTHE EYE AND BRAIN IS FAST. THE HUMAN BRAIN IS ESPECIALLY AT RECOGNIZING SHAPES AND PATTERNS.
- 18. @webinterface WHAT IS EXACTLYTHE UX OF DATA VISUALIZATION?
- 19.
- 20.
- 21.
- 22. @webinterface WHAT EXACTLY DOES DATAVISUALIZATION DO?
- 23. @webinterface DATA VISUALIZATION ISA VISUAL REPRESENTATION OF DATA. DATA MADE MORE UNDERSTANDABLE.
- 24.
- 25.
- 26. @webinterface DATA VISUALIZATION AND INFOGRAPHICSARE NOT THE SAME. INFOGRAPHICS TELL A SCROLLING STORY, BY PROVIDING TIDBITS OF DATA TO SUPPORT A SPECIFIC IDEA OR STRATEGY.
- 27.
- 28. @webinterface MAKE YOUR DATAKNOWLEDGE BEAUTIFUL IN FIVE STEPS. 5
- 29.
- 30. @webinterface Image: http://www.br.de VISUALCOMPLEXITY LEARNING TO CREATE GOOD DATA VISUALIZATION MEANS TO UNDERSTAND THE DATA AT FIRST.
- 31. @webinterface 5 6 89 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 DATA TRANSFORMATION STATISTICS VISUAL MAPPING VISUAL DESIGN INTERACTIVE FRAMING INTERACTION DESIGN
- 32. @webinterface Image: http://www.br.de STARTSKETCHING YOUR IDEA. THIS TECHNIQUE IS FAST AND EASY TO EVALUATE.
- 33.
- 34. @webinterface CONTEXT: THINK SMALL ANDASSET DEPENDENCE
- 35. @webinterface PLOTTING THE UXOF DATA IN A JOURNEY MAP.
- 36.
- 37. @webinterface COMPONENT: DESIGN VISUALIZATIONS FORANY SCREEN AND ANY BROWSER. USE HTML TO BUILD AND JAVASCRIPT TO ENHANCE.
- 38. @webinterface THINK RESPONSIVELY FROMTHE BEGINNING OF THE PROJECT.
- 39. @webinterface USE AND ADAPTTHE TECHNICAL PRINCIPLES OF RESPONSIVE WEB DESIGN. WORKING WITH FLEXIBLE GRID DESIGNING WITH CSS ENHANCING WITH JAVASCRIPT
- 40.
- 41. @webinterface GOOD DATA VISUALIZATIONTELLS A STORY THAT CAN BE UNDERSTAND BY ANYONE.
- 42. @webinterface Source: Whatmakes a good visualization?
- 43.
- 44.
- 45. PEOPLE TELL STORIES @webinterfaceImage: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
- 46.
- 47.
- 48.
- 49.
- 50. @webinterface DATA TELL STORIES STORIESARE MEANINGFUL DATA ARE MEANINGFUL
- 51.
- 52. @webinterface JAVASCRIPT LIBRARY FOR MANIPULATINGDOCUMENTS BASED ON DATA. USING HTML, SVG, CSS TRANSITIONS EMPHASIS ON WEB STANDARDS CAPABILITIES OF MODERN BROWSERS
- 53. „…so if yourbrowser doesn't support standards, you're out of luck. Sorry!“ D3 documentation Source: https://github.com/mbostock/d3/wiki@webinterface
- 54.
- 55. @webinterface HTML 5 BASED SIMPLEAND FLEXIBLE RESPONSIVE MODULAR INTERACTIVE
- 56.
- 57. @webinterface STYLE WITH CSS& CONTROL WITH JS USAGE OF SVG RESPONSIVE CONFIGURATION WITH MEDIA QUERIES
- 58. @webinterface 4. DEFINE THEUSER EXPERIENCE
- 59. @webinterface DATA NEEDS ALANGUAGE AND STORY TO FOLLOW BE EFFECTIVE.
- 60. @webinterface TURNING STORIES INTOREALITY: MEMORABLE IMPACTFUL PERSONAL CONNECT
- 61.
- 62. @webinterface DATA VISUALIZATIONS EXISTTO INFORM THE USER. THEY´RE NOT AN EXCUSE TO OVERLOAD SOMEONE WITH INFORMATION THEY DON´T NEED TO KNOW.
- 63. @webinterface ROLE OF ADESIGNER AND DEVELOPER TO FOCUS ON SIMPLICITY. TAKING COMPLEX OR DISPARATE INFORMATION AND MAKING IT TANGIBLE AND UNDERSTANDABLE.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. „Big Data istkein 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
- 70.
- 71.