Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

THE UX OF DATA - VISUALIZATION RESPONSIVE

1,231 views

Published on

Talk @ Smart Data Developer Conference 2016

Published in: Design
  • Be the first to comment

THE UX OF DATA - VISUALIZATION RESPONSIVE

  1. 1. @webinterface THE UX OF DATA VISUALIZATION RESPONSIVE SMART DATA 2016 @webinterface
  2. 2. PETER ROZEK @webinterface
  3. 3. @webinterface @webinterface
  4. 4. WORK @ ecx.io (DIGITAL AGENCY) @webinterface
  5. 5. ECX.IO AN IBM COMPANY
  6. 6. UX, USABILITY, ACCESSIBILITY, FRONTEND @webinterface
  7. 7. @webinterface DATA VISUALIZATION TODAY, IS ABOUT DESIGNING SYSTEMS, STRATEGIES AND EXPERIENCE.
  8. 8. @webinterface HISTORY OF DATA VISUALIZATION
  9. 9. @webinterface 300BC PORPHYRY OF TYROS CREATED THE FIRST DOCUMENTED MIND MAP.
  10. 10. @webinterface 1786 WILLIAM PLAYFAIR PUBLISEHD THE FIRST SET OF CHARTS.
  11. 11. @webinterface
  12. 12. @webinterface TODAY, DATA WAS NO LONGER LIMITED TO JUST A STATIC VIEW, IT COULD BE INTERACTED WITH DYNAMICALLY.
  13. 13. @webinterface WE ARE WIRED TO VISUALIZE FAST. WE ARE NOT WIRED TO READ FAST.
  14. 14. @webinterface THE OLD SAYING: „A PHOTO IS WORTH A THOUNSEND WORDS“.
  15. 15. @webinterface 8.96 Mb/S VISUAL 81.6 B/S READING
  16. 16. @webinterface@webinterface THE AVERAGE PERSON COMPREHENDS 120 WORDS PER MINUTE READING. THAT IS EQUIVALENT TO 81.6 BITS OF DATA PER SECOND.
  17. 17. @webinterface THE CONNECTION BETWEEN THE EYE AND BRAIN IS FAST. THE HUMAN BRAIN IS ESPECIALLY AT RECOGNIZING SHAPES AND PATTERNS.
  18. 18. @webinterface WHAT IS EXACTLY THE UX OF DATA VISUALIZATION?
  19. 19. @webinterface HUMANIZED PERSONAL CONNECT MEMORABLE IMPACTFUL
  20. 20. @webinterface
  21. 21. @webinterface
  22. 22. @webinterface WHAT EXACTLY DOES DATA VISUALIZATION DO?
  23. 23. @webinterface DATA VISUALIZATION IS A VISUAL REPRESENTATION OF DATA. DATA MADE MORE UNDERSTANDABLE.
  24. 24. @webinterface
  25. 25. @webinterface
  26. 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.
  27. 27. @webinterface Source: http://www.evanshalshaw.com/more/bondcars/
  28. 28. @webinterface MAKE YOUR 
 DATA KNOWLEDGE BEAUTIFUL 
 IN FIVE STEPS. 5
  29. 29. @webinterface 1. UNDERSTAND THE SOURCE
  30. 30. @webinterface Image: http://www.br.de VISUAL COMPLEXITY LEARNING TO CREATE GOOD DATA VISUALIZATION MEANS TO UNDERSTAND THE DATA AT FIRST.
  31. 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. 32. @webinterface Image: http://www.br.de START SKETCHING YOUR IDEA. THIS TECHNIQUE IS FAST AND EASY TO EVALUATE.
  33. 33. @webinterface 2. UNDERSTAND THE CONTEXT
  34. 34. @webinterface CONTEXT: THINK SMALL AND ASSET DEPENDENCE
  35. 35. @webinterface PLOTTING THE UX OF DATA IN A JOURNEY MAP.
  36. 36. @webinterface CONTENT: READABLE OPERABLE UNDERSTANDABLE INTERACTION
  37. 37. @webinterface COMPONENT: DESIGN VISUALIZATIONS FOR ANY SCREEN AND ANY BROWSER. USE HTML TO BUILD AND JAVASCRIPT TO ENHANCE.
  38. 38. @webinterface THINK RESPONSIVELY FROM THE BEGINNING OF THE PROJECT.
  39. 39. @webinterface USE AND ADAPT THE TECHNICAL PRINCIPLES OF RESPONSIVE WEB DESIGN. WORKING WITH FLEXIBLE GRID DESIGNING WITH CSS ENHANCING WITH JAVASCRIPT
  40. 40. @webinterface 3. IDENTIFY THE NARRATIVE
  41. 41. @webinterface GOOD DATA VISUALIZATION TELLS A STORY THAT CAN BE UNDERSTAND BY ANYONE.
  42. 42. @webinterface Source: What makes a good visualization?
  43. 43. @webinterface STORYTELLING CHANGES WITH TECHNOLOGY.
  44. 44. @webinterface@webinterface CAVE PAINTING TELL STORIES
  45. 45. PEOPLE TELL STORIES @webinterface Image: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks
  46. 46. Image from: https://de.wikipedia.org/wiki/Geschichte_des_Buchdrucks@webinterface WORDS TELL STORIES
  47. 47. @webinterface IMAGES TELL STORIES
  48. 48. Image from: http://nikolawashere.com/tag/avengers/@webinterface COMIC TELL STORIES
  49. 49. Image from: http://www.giga.de/filme/...@webinterface MOVIES TELL STORIES
  50. 50. @webinterface DATA TELL STORIES STORIES ARE MEANINGFUL DATA ARE MEANINGFUL
  51. 51. Source: http://d3js.org/ D3.js @webinterface
  52. 52. @webinterface JAVASCRIPT LIBRARY FOR MANIPULATING DOCUMENTS BASED ON DATA. USING HTML, SVG, CSS TRANSITIONS EMPHASIS ON WEB STANDARDS CAPABILITIES OF MODERN BROWSERS
  53. 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
  54. 54. Source: http://www.chartjs.org/
  55. 55. @webinterface HTML 5 BASED SIMPLE AND FLEXIBLE RESPONSIVE MODULAR INTERACTIVE
  56. 56. @webinterface Source: https://gionkunz.github.io/chartist-js/
  57. 57. @webinterface STYLE WITH CSS & CONTROL WITH JS USAGE OF SVG RESPONSIVE CONFIGURATION WITH MEDIA QUERIES
  58. 58. @webinterface 4. DEFINE THE USER EXPERIENCE
  59. 59. @webinterface DATA NEEDS A LANGUAGE AND STORY TO FOLLOW BE EFFECTIVE.
  60. 60. @webinterface TURNING STORIES INTO REALITY: MEMORABLE IMPACTFUL PERSONAL CONNECT
  61. 61. @webinterface 5. SIMPLICITY RULES
  62. 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. 63. @webinterface ROLE OF A DESIGNER AND DEVELOPER TO FOCUS ON SIMPLICITY. TAKING COMPLEX OR DISPARATE INFORMATION AND MAKING IT TANGIBLE AND UNDERSTANDABLE.
  64. 64. @webinterface CONCLUSION
  65. 65. @webinterface WHAT IS YOUR OBJECTIVE?
  66. 66. @webinterface RESEARCH:
 FIND YOUR USER´S FRICTION.
  67. 67. @webinterface IMPLEMENT MEASURE ITERATE
  68. 68. @webinterface MORE HUMAN
  69. 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
  70. 70. THANKS …dear Ellen @webinterface
  71. 71. @webinterface peter.rozek@ecx.io

×