Design principles for building useful graph displays and visualisations for monitoring data. What goes into designing graphs, creating a good user experience and what other types of visualisations are appropriate for which situations?

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