THE UX OF DATA - VISUALIZATION RESPONSIVE
•
3 likes•2,064 views
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.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to THE UX OF DATA - VISUALIZATION RESPONSIVE
Similar to THE UX OF DATA - VISUALIZATION RESPONSIVE (20)
More from Peter Rozek
More from Peter Rozek (20)
Recently uploaded
Recently uploaded (20)
THE UX OF DATA - VISUALIZATION RESPONSIVE
- 1. @webinterface THE UX OF DATA VISUALIZATION RESPONSIVE SMART DATA 2016 @webinterface
- 4. WORK @ ecx.io (DIGITAL AGENCY) @webinterface
- 5. ECX.IO AN IBM COMPANY
- 7. @webinterface DATA VISUALIZATION TODAY, IS ABOUT DESIGNING SYSTEMS, STRATEGIES AND EXPERIENCE.
- 9. @webinterface 300BC PORPHYRY OF TYROS CREATED THE FIRST DOCUMENTED MIND MAP.
- 10. @webinterface 1786 WILLIAM PLAYFAIR PUBLISEHD THE FIRST SET OF CHARTS.
- 11. @webinterface
- 12. @webinterface TODAY, DATA WAS NO LONGER LIMITED TO JUST A STATIC VIEW, IT COULD BE INTERACTED WITH DYNAMICALLY.
- 13. @webinterface WE ARE WIRED TO VISUALIZE FAST. WE ARE NOT WIRED TO READ FAST.
- 14. @webinterface THE OLD SAYING: „A PHOTO IS WORTH A THOUNSEND WORDS“.
- 15. @webinterface 8.96 Mb/S VISUAL 81.6 B/S READING
- 16. @webinterface@webinterface THE AVERAGE PERSON COMPREHENDS 120 WORDS PER MINUTE READING. THAT IS EQUIVALENT TO 81.6 BITS OF DATA PER SECOND.
- 17. @webinterface THE CONNECTION BETWEEN THE EYE AND BRAIN IS FAST. THE HUMAN BRAIN IS ESPECIALLY AT RECOGNIZING SHAPES AND PATTERNS.
- 18. @webinterface WHAT IS EXACTLY THE UX OF DATA VISUALIZATION?
- 20. @webinterface
- 21. @webinterface
- 22. @webinterface WHAT EXACTLY DOES DATA VISUALIZATION DO?
- 23. @webinterface DATA VISUALIZATION IS A VISUAL REPRESENTATION OF DATA. DATA MADE MORE UNDERSTANDABLE.
- 24. @webinterface
- 25. @webinterface
- 26. @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.
- 28. @webinterface MAKE YOUR DATA KNOWLEDGE BEAUTIFUL IN FIVE STEPS. 5
- 30. @webinterface Image: http://www.br.de VISUAL COMPLEXITY LEARNING TO CREATE GOOD DATA VISUALIZATION MEANS TO UNDERSTAND THE DATA AT FIRST.
- 31. @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 DATA TRANSFORMATION STATISTICS VISUAL MAPPING VISUAL DESIGN INTERACTIVE FRAMING INTERACTION DESIGN
- 32. @webinterface Image: http://www.br.de START SKETCHING YOUR IDEA. THIS TECHNIQUE IS FAST AND EASY TO EVALUATE.
- 34. @webinterface CONTEXT: THINK SMALL AND ASSET DEPENDENCE
- 35. @webinterface PLOTTING THE UX OF DATA IN A JOURNEY MAP.
- 37. @webinterface COMPONENT: DESIGN VISUALIZATIONS FOR ANY SCREEN AND ANY BROWSER. USE HTML TO BUILD AND JAVASCRIPT TO ENHANCE.
- 38. @webinterface THINK RESPONSIVELY FROM THE BEGINNING OF THE PROJECT.
- 39. @webinterface USE AND ADAPT THE TECHNICAL PRINCIPLES OF RESPONSIVE WEB DESIGN. WORKING WITH FLEXIBLE GRID DESIGNING WITH CSS ENHANCING WITH JAVASCRIPT
- 41. @webinterface GOOD DATA VISUALIZATION TELLS A STORY THAT CAN BE UNDERSTAND BY ANYONE.
- 42. @webinterface Source: What makes a good visualization?
- 44. @webinterface@webinterface CAVE PAINTING TELL STORIES
- 45. PEOPLE TELL STORIES @webinterface Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
- 46. Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks@webinterface WORDS TELL STORIES
- 49. Image from: http://www.giga.de/filme/...@webinterface MOVIES TELL STORIES
- 50. @webinterface DATA TELL STORIES STORIES ARE MEANINGFUL DATA ARE MEANINGFUL
- 52. @webinterface JAVASCRIPT LIBRARY FOR MANIPULATING DOCUMENTS BASED ON DATA. USING HTML, SVG, CSS TRANSITIONS EMPHASIS ON WEB STANDARDS CAPABILITIES OF MODERN BROWSERS
- 53. „…so if your browser doesn't support standards, you're out of luck. Sorry!“ D3 documentation Source: https://github.com/mbostock/d3/wiki@webinterface
- 55. @webinterface HTML 5 BASED SIMPLE AND FLEXIBLE RESPONSIVE MODULAR INTERACTIVE
- 57. @webinterface STYLE WITH CSS & CONTROL WITH JS USAGE OF SVG RESPONSIVE CONFIGURATION WITH MEDIA QUERIES
- 58. @webinterface 4. DEFINE THE USER EXPERIENCE
- 59. @webinterface DATA NEEDS A LANGUAGE AND STORY TO FOLLOW BE EFFECTIVE.
- 60. @webinterface TURNING STORIES INTO REALITY: MEMORABLE IMPACTFUL PERSONAL CONNECT
- 62. @webinterface DATA VISUALIZATIONS EXIST TO INFORM THE USER. THEY´RE NOT AN EXCUSE TO OVERLOAD SOMEONE WITH INFORMATION THEY DON´T NEED TO KNOW.
- 63. @webinterface ROLE OF A DESIGNER AND DEVELOPER TO FOCUS ON SIMPLICITY. TAKING COMPLEX OR DISPARATE INFORMATION AND MAKING IT TANGIBLE AND UNDERSTANDABLE.
- 69. „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