the ux of data: responsive datenvisualisierung mit jquery
TRANSCRIPT
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
Cross Device Focus Provide contextIncrease 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
Source: http://www.gartner.com/newsroom/id/2939217
@webinterface
The connection between the eye and brain is fast.
Image from: http://www.natgeotv.com.au/brain/....
@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
Comics tell Stories
Image from: http://nikolawashere.com/tag/avengers/
@webinterface
Movies tell Stories
Image from: http://www.giga.de/filme/...
@webinterface
What information does the reader need to be successful? How much detail does the reader need?
@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 economist 2010
Quote: http://www.economist.com/node/15557455
“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
@webinterface
Design Message InteractivityShow the
storyTell the story
engange the story
The fundamental ways we use data visualizations
@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.
„…so if your browser doesn't support standards, you're out of luck. Sorry!“
@webinterface
D3 documentation
Source: https://github.com/mbostock/d3/wiki
@webinterface
Browser support for the canvas element is available in all modern & major mobile browsers.
@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/
Style with CSS & control with JS
Usage of SVG
Responsive configuration with media queries
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
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/