The UX of DATA: Responsive Datenvisualisierung mit jQuery
3 likes1,499 views
This document discusses the importance of responsive data visualization using JavaScript libraries like D3.js, Chart.js, and Chartist.js. It notes that visuals are processed much faster by the brain than text, and that data visualizations can emphasize key points, provide context, and engage audiences. The document recommends prioritizing the story and message over detail, and making visuals memorable to enrich the human elements of any story involving data.
Ad
More Related Content
What's hot (20)
Similar to The UX of DATA: Responsive Datenvisualisierung mit jQuery (20)
Ad
More from Peter Rozek (20)
Ad
Recently uploaded (20)
The UX of DATA: Responsive Datenvisualisierung mit jQuery
- 1. THE UX OF DATA jQuery Conference 2015 in Berlin Responsive Datenvisualisierung mit jQuery @webinterface
- 2. Peter Rozek Work at ecx.io (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
- 4. @webinterface Cross Device Focus Provide context Increase engagement Make emotional Real-Time sentiment
- 5. „Above all else, show the data.” @webinterface Edward Tufte Source: The Visual Display of Quantitative Information
- 6. „More Than 50 Percent of Users Will Use a Tablet or Smartphone First for All Online Activities“ @webinterface Gartner Source: http://www.gartner.com/newsroom/id/2939217
- 7. @webinterface The human is brain especially at recognizing shapes and patterns.
- 8. @webinterface The connection between the eye and brain is fast. Image from: http://www.natgeotv.com.au/brain/....
- 9. @webinterface The brain receives 8.96 megabits of data from the eye every second.
- 10. @webinterface The average person comprehends 120 words per minute reading.
- 11. @webinterface That is equivalent to 81.6 bits of data per second.
- 13. @webinterface We are not wired to read fast.
- 14. @webinterface We are wired to visualize fast.
- 16. @webinterface Image from: https://de.wikipedia.org/wiki/Paideia People tell Stories
- 17. @webinterface Words tell Stories Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
- 19. @webinterface Comics tell Stories Image from: http://nikolawashere.com/tag/avengers/
- 20. @webinterface Movies tell Stories Image from: http://www.giga.de/filme/...
- 25. @webinterface How can we tell Stories with Data ?
- 26. @webinterface What information does the reader need to be successful? How much detail does the reader need?
- 28. @webinterface The right data visualization can emphasize key points provide context engage the audience
- 29. „Creative field melding the skills of computer science, statistics, artistic design and storytelling“ @webinterface the economist 2010 Quote: http://www.economist.com/node/15557455
- 30. “I think people have begun to forget how powerful human stories are, exchanging their sense of empathy for a fetishistic fascination with data, networks, patterns, and total information… Really, the data is just part of the story. The human stuff is the main stuff, and the data should enrich it.” @webinterface Jonathan Harris
- 32. @webinterface Design Message Interactivity Show the story Tell the story engange the story The fundamental ways we use data visualizations
- 34. @webinterface JavaScript library for manipulating documents based on data. Using HTML, SVG, and CSS, CSS3 Transitions. Emphasis on web standards. Full capabilities of modern browsers.
- 36. „…so if your browser doesn't support standards, you're out of luck. Sorry!“ @webinterface D3 documentation Source: https://github.com/mbostock/d3/wiki
- 38. @webinterface
- 39. @webinterface
- 41. @webinterface HTML 5 based Simple and flexible Responsive Modular Interactive
- 42. @webinterface Browser support for the canvas element is available in all modern & major mobile browsers.
- 43. @webinterface All six core chart types are only 11.01kb when minified.
- 45. @webinterface IE8 below recommend using the polyfill ExplorerCanvas Source: https://github.com/arv/explorercanvas
- 49. @webinterface Source: https://gionkunz.github.io/chartist-js/ Style with CSS & control with JS Usage of SVG Responsive configuration with media queries
- 53. Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
- 56. Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
- 57. @webinterface Source: http://www.smashingmagazine.com/ Future Pie Charts
- 61. @webinterface We learn from visuals.
- 62. @webinterface Our brains perform more efficiently and more information from visuals.
- 63. @webinterface Responsiveness data visualizations can be awesome when we understand the priority.
- 64. @webinterface Use visuals to make the story memorable.