Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
THE UX OF DATA
jQuery Conference 2015 in Berlin
Responsive Datenvisualisierung 

mit jQuery
@webinterface
Peter Rozek
Work at ecx.io (Digital Agency)
Skills:
UX
Usability
Accessibility
Frontend
@webinterface
@webinterface
Why
responsiveness

and interactive

Storytelling 

with Data?
@webinterface
Cross Device
Focus
Provide context

Increase engagement
Make emotional
Real-Time sentiment
„Above all else, show the data.”
@webinterface
Edward Tufte
Source: The Visual Display of Quantitative Information
„More Than 50 Percent of Users Will Use a
Tablet or Smartphone First for All Online
Activities“
@webinterface
Gartner
Sour...
@webinterface
The human is brain
especially at
recognizing shapes and
patterns.
@webinterface
The connection
between the eye 

and brain is fast.
Image from: http://www.natgeotv.com.au/brain/....
@webinterface
The brain receives 8.96 megabits
of data from the eye every second.
@webinterface
The average person comprehends
120 words per minute reading.
@webinterface
That is equivalent to 81.6 bits of
data per second.
8.96 Mb/s
visual
@webinterface
81.6 b/s
reading
@webinterface
We are not wired to
read fast.
@webinterface
We are wired to
visualize fast.
@webinterface
Storytelling changes
with technology.
@webinterface Image from: https://de.wikipedia.org/wiki/Paideia
People tell Stories
@webinterface
Words tell Stories
Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
@webinterface
Images tell Stories
@webinterface
Comics tell Stories
Image from: http://nikolawashere.com/tag/avengers/
@webinterface
Movies tell Stories
Image from: http://www.giga.de/filme/...
@webinterface
Data visualizations
effectively
@webinterface
Analyze and make
decisions.
@webinterface Source: ttps://gionkunz.github.io/chartist-js/
@webinterface Source: http://d3js.org/
@webinterface
How can we tell Stories
with Data ?
@webinterface
What information does the reader
need to be successful?
How much detail does the reader
need?
@webinterface
Data Story
Visual
Tale
ArtGraph
Spot
@webinterface
The right data visualization can
emphasize key points
provide context
engage the audience
„Creative field melding the skills of computer
science, statistics, artistic design and
storytelling“
@webinterface
the ec...
“I think people have begun to forget how
powerful human stories are, exchanging their
sense of empathy for a fetishistic f...
@webinterface
Design Principles for
Data
@webinterface
Design Message Interactivity
Show the 

story
Tell the 

story
engange the
story
The fundamental ways we use...
@webinterface Source: http://d3js.org/
D3.js
@webinterface
JavaScript library for manipulating
documents based on data.
Using HTML, SVG, and CSS, CSS3 Transitions.
Emp...
@webinterface
D3 is tested
IE 9+
„…so if your browser doesn't support
standards, you're out of luck. Sorry!“
@webinterface
D3 documentation
Source: https:/...
@webinterface Source: http://d3js.org/
@webinterface
@webinterface
Source: http://www.chartjs.org/@webinterface
@webinterface
HTML 5 based
Simple and flexible
Responsive
Modular
Interactive
@webinterface
Browser support for the canvas
element is available in all modern
& major mobile browsers.
@webinterface
All six core chart types are only
11.01kb when minified.
@webinterface Source: http://caniuse.com/#feat=canvas
@webinterface
IE8 below recommend using the
polyfill ExplorerCanvas
Source: https://github.com/arv/explorercanvas
@webinterface Source: http://www.chartjs.org/docs/#getting-started
@webinterface Source: http://www.chartjs.org/docs/#getting-started
@webinterface Source: https://gionkunz.github.io/chartist-js/
@webinterface Source: https://gionkunz.github.io/chartist-js/
Style with CSS & control with JS
Usage of SVG
Responsive con...
@webinterface Source: https://gionkunz.github.io/chartist-js/
@webinterface Source: https://gionkunz.github.io/chartist-js/
@webinterface Source: https://gionkunz.github.io/chartist-js/
Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
@webinterface Source: https://gionkunz.github.io/chartist-js/plugins.html
Accessibility 

Plugin
@webinterface Source: https://gionkunz.github.io/chartist-js/
Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
@webinterface Source: http://www.smashingmagazine.com/
Future Pie Charts
@webinterface
Responsive Table
Source: http://fooplugins.com/footable-demos/
@webinterface Source: http://fooplugins.com/footable-demos/
@webinterface
Last Words
@webinterface
We learn from visuals.
@webinterface
Our brains perform
more efficiently and
more information from
visuals.
@webinterface
Responsiveness data
visualizations can be
awesome when we
understand the priority.
@webinterface
Use visuals to make the
story memorable.
Thanks
@webinterface
…dear Ellen
@webinterface
peter.rozek@ecx.io
Nächste SlideShare
Wird geladen in …5
×

The UX of DATA: Responsive Datenvisualisierung mit jQuery

1.159 Aufrufe

Veröffentlicht am

Why responsiveness and interactive Storytelling with Data?

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

The UX of DATA: Responsive Datenvisualisierung mit jQuery

  1. 1. THE UX OF DATA jQuery Conference 2015 in Berlin Responsive Datenvisualisierung 
 mit jQuery @webinterface
  2. 2. Peter Rozek Work at ecx.io (Digital Agency) Skills: UX Usability Accessibility Frontend @webinterface
  3. 3. @webinterface Why responsiveness
 and interactive
 Storytelling 
 with Data?
  4. 4. @webinterface Cross Device Focus Provide context
 Increase engagement Make emotional Real-Time sentiment
  5. 5. „Above all else, show the data.” @webinterface Edward Tufte Source: The Visual Display of Quantitative Information
  6. 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. 7. @webinterface The human is brain especially at recognizing shapes and patterns.
  8. 8. @webinterface The connection between the eye 
 and brain is fast. Image from: http://www.natgeotv.com.au/brain/....
  9. 9. @webinterface The brain receives 8.96 megabits of data from the eye every second.
  10. 10. @webinterface The average person comprehends 120 words per minute reading.
  11. 11. @webinterface That is equivalent to 81.6 bits of data per second.
  12. 12. 8.96 Mb/s visual @webinterface 81.6 b/s reading
  13. 13. @webinterface We are not wired to read fast.
  14. 14. @webinterface We are wired to visualize fast.
  15. 15. @webinterface Storytelling changes with technology.
  16. 16. @webinterface Image from: https://de.wikipedia.org/wiki/Paideia People tell Stories
  17. 17. @webinterface Words tell Stories Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
  18. 18. @webinterface Images tell Stories
  19. 19. @webinterface Comics tell Stories Image from: http://nikolawashere.com/tag/avengers/
  20. 20. @webinterface Movies tell Stories Image from: http://www.giga.de/filme/...
  21. 21. @webinterface Data visualizations effectively
  22. 22. @webinterface Analyze and make decisions.
  23. 23. @webinterface Source: ttps://gionkunz.github.io/chartist-js/
  24. 24. @webinterface Source: http://d3js.org/
  25. 25. @webinterface How can we tell Stories with Data ?
  26. 26. @webinterface What information does the reader need to be successful? How much detail does the reader need?
  27. 27. @webinterface Data Story Visual Tale ArtGraph Spot
  28. 28. @webinterface The right data visualization can emphasize key points provide context engage the audience
  29. 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. 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
  31. 31. @webinterface Design Principles for Data
  32. 32. @webinterface Design Message Interactivity Show the 
 story Tell the 
 story engange the story The fundamental ways we use data visualizations
  33. 33. @webinterface Source: http://d3js.org/ D3.js
  34. 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.
  35. 35. @webinterface D3 is tested IE 9+
  36. 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
  37. 37. @webinterface Source: http://d3js.org/
  38. 38. @webinterface
  39. 39. @webinterface
  40. 40. Source: http://www.chartjs.org/@webinterface
  41. 41. @webinterface HTML 5 based Simple and flexible Responsive Modular Interactive
  42. 42. @webinterface Browser support for the canvas element is available in all modern & major mobile browsers.
  43. 43. @webinterface All six core chart types are only 11.01kb when minified.
  44. 44. @webinterface Source: http://caniuse.com/#feat=canvas
  45. 45. @webinterface IE8 below recommend using the polyfill ExplorerCanvas Source: https://github.com/arv/explorercanvas
  46. 46. @webinterface Source: http://www.chartjs.org/docs/#getting-started
  47. 47. @webinterface Source: http://www.chartjs.org/docs/#getting-started
  48. 48. @webinterface Source: https://gionkunz.github.io/chartist-js/
  49. 49. @webinterface Source: https://gionkunz.github.io/chartist-js/ Style with CSS & control with JS Usage of SVG Responsive configuration with media queries
  50. 50. @webinterface Source: https://gionkunz.github.io/chartist-js/
  51. 51. @webinterface Source: https://gionkunz.github.io/chartist-js/
  52. 52. @webinterface Source: https://gionkunz.github.io/chartist-js/
  53. 53. Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
  54. 54. @webinterface Source: https://gionkunz.github.io/chartist-js/plugins.html Accessibility 
 Plugin
  55. 55. @webinterface Source: https://gionkunz.github.io/chartist-js/
  56. 56. Source: https://gionkunz.github.io/chartist-js/@webinterface Source: https://gionkunz.github.io/chartist-js/
  57. 57. @webinterface Source: http://www.smashingmagazine.com/ Future Pie Charts
  58. 58. @webinterface Responsive Table Source: http://fooplugins.com/footable-demos/
  59. 59. @webinterface Source: http://fooplugins.com/footable-demos/
  60. 60. @webinterface Last Words
  61. 61. @webinterface We learn from visuals.
  62. 62. @webinterface Our brains perform more efficiently and more information from visuals.
  63. 63. @webinterface Responsiveness data visualizations can be awesome when we understand the priority.
  64. 64. @webinterface Use visuals to make the story memorable.
  65. 65. Thanks @webinterface …dear Ellen
  66. 66. @webinterface peter.rozek@ecx.io

×