Talk @ Smart Data Developer Conference 2016

1. @webinterface
THE UX OF DATA
VISUALIZATION RESPONSIVE
SMART DATA 2016
@webinterface

2. PETER ROZEK
@webinterface

3. @webinterface
@webinterface

4. WORK @ ecx.io (DIGITAL AGENCY)
@webinterface

5. ECX.IO AN IBM COMPANY

6. UX, USABILITY, ACCESSIBILITY,
FRONTEND
@webinterface

7. @webinterface
DATA VISUALIZATION
TODAY, IS ABOUT
DESIGNING SYSTEMS,
STRATEGIES AND
EXPERIENCE.

8. @webinterface
HISTORY OF DATA
VISUALIZATION

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?

19. @webinterface
HUMANIZED
PERSONAL CONNECT
MEMORABLE
IMPACTFUL

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.

27. @webinterface Source: http://www.evanshalshaw.com/more/bondcars/

28. @webinterface
MAKE YOUR
DATA KNOWLEDGE
BEAUTIFUL
IN FIVE STEPS. 5

29. @webinterface
1. UNDERSTAND THE
SOURCE

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.

33. @webinterface
2. UNDERSTAND THE
CONTEXT

34. @webinterface
CONTEXT:
THINK SMALL AND ASSET DEPENDENCE

35. @webinterface
PLOTTING THE UX OF DATA IN A
JOURNEY MAP.

36. @webinterface
CONTENT:
READABLE
OPERABLE
UNDERSTANDABLE
INTERACTION

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

40. @webinterface
3. IDENTIFY THE
NARRATIVE

41. @webinterface
GOOD DATA VISUALIZATION TELLS A
STORY THAT CAN BE UNDERSTAND
BY ANYONE.

42. @webinterface Source: What makes a good visualization?

43. @webinterface
STORYTELLING CHANGES WITH
TECHNOLOGY.

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

47. @webinterface
IMAGES TELL STORIES

48. Image from: http://nikolawashere.com/tag/avengers/@webinterface
COMIC 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

51. Source: http://d3js.org/
D3.js
@webinterface

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

54. Source: http://www.chartjs.org/

55. @webinterface
HTML 5 BASED
SIMPLE AND FLEXIBLE
RESPONSIVE
MODULAR
INTERACTIVE

56. @webinterface Source: https://gionkunz.github.io/chartist-js/

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

61. @webinterface
5. SIMPLICITY RULES

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.

64. @webinterface
CONCLUSION

65. @webinterface
WHAT IS YOUR
OBJECTIVE?

66. @webinterface
RESEARCH:
FIND YOUR USER´S
FRICTION.

67. @webinterface
IMPLEMENT
MEASURE
ITERATE

68. @webinterface
MORE HUMAN

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. THANKS
…dear Ellen
@webinterface

71. @webinterface
peter.rozek@ecx.io