Berlin 2013 - Session - Daniele de Matteis & Harry Wincup

Transcript

1. Monitoring, graphs and visualisations 1
2. Graphs are crucial 2
3. ✦ What is good graphing? ✦ How do you achieve it? Graphs are crucial 2
4. Consistency 3
5. ! Chart needs to make sense, asap! Consistency 3
6. ! Chart needs to make sense, asap! Ad-hoc chart type definition Consistency 3
7. Stacked Area Graph in Server Density v2 4
8. Stacked Area Graph in Server Density v2 Multiline Graph in Server Density v1 4
9. Context 5
10. ! Where am I, what am I looking at? Context 5
11. ! Where am I, what am I looking at? Display data hierarchy Context 5
12. Display Data Hierarchy 6
13. Display Data Hierarchy 6
14. Display Data Hierarchy 6
15. ! Where am I, what am I looking at? Display data hierarchy Display as much ‘as possible’ Context 7
16. Clarity 8
17. ! Too many line series even for my 27″! Clarity 8
18. ! Too many line series even for my 27″! Welcome Horizon graphs. Clarity 8
19. Horizon Graphs 9
20. ! Too many line series even for my 27″! Welcome Horizon graphs. ! There is too much on this page... Clarity 10
21. ! Too many line series even for my 27″! Welcome Horizon graphs. When in doubt, less ink! ! There is too much on this page... Clarity 10
22. Perspective 11
23. ! Here’s a spike, so what? Perspective 11
24. ! Here’s a spike, so what? Expose system events Perspective 11
25. Vertical Scanning 12
26. Vertical Scanning 12
27. Vertical Scanning 13
28. Appeal 14
29. ! Chart is boring, imma go back to sleep... Appeal 14
30. ! Chart is boring, imma go back to sleep... Wait, let’s make it worth it! Appeal 14
31. Visual Design for UX 16
32. Visual Design for UX 16
33. Visual Design for UX 17
34. Visual Design for UX 17
35. Visual Design for UX 17
36. Visual Design for UX 18
37. Visual Design for UX 18
38. Visual Design for UX 19
39. Visual Design for UX 20
40. Visual Design for UX 20
41. Control 21
42. ! Where’s the rest of this? Control 21
43. ! Where’s the rest of this? 1 click away, but now you look for it ;) Control 21
44. User Control for UX 23
45. User Control for UX 24
46. User Control for UX 25
47. User Control for UX 26
48. User Control for UX 27
49. User Control for UX 28
50. good UX 㱺 action uncover system stories behind metric events sense of place + hierarchy = understanding -- clutter ++ data density consistency build in depth give control Consistency Context Clarity Perspective Appeal Control 29
51. More than graphs! 30
52. Network diagrams, Status boards, Heatmaps... More than graphs! 30
53. Network diagrams, Status boards, Heatmaps... Dashboards 30
54. Identify information immediately At a glance 31
55. Train status 32
56. @morekid @harrywincup @serverdensity Thanks. Daniele De Matteis Harry Wincup serverdensity.com 33