Embed Size (px)
DESCRIPTION
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?
Citation preview
Monitoring, graphs
and visualisations
1
Graphs are crucial
2
✦ What is good graphing?
✦ How do you achieve it?
Graphs are crucial
2
Consistency
3
! Chart needs to make sense, asap!
Consistency
3
! Chart needs to make sense, asap!
Ad-hoc chart type definition
Consistency
3
Stacked Area Graph in Server Density v2
4
Stacked Area Graph in Server Density v2
Multiline Graph in Server Density v1
4
Context
5
! Where am I, what am I looking at?
Context
5
! Where am I, what am I looking at?
Display data hierarchy
Context
5
Display Data Hierarchy
6
Display Data Hierarchy
6
Display Data Hierarchy
6
! Where am I, what am I looking at?
Display data hierarchy
Display as much ‘as possible’
Context
7
Clarity
8
! Too many line series even for my 27″!
Clarity
8
! Too many line series even for my 27″!
Welcome Horizon graphs.
Clarity
8
Horizon Graphs
9
! Too many line series even for my 27″!
Welcome Horizon graphs.
! There is too much on this page...
Clarity
10
! 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
Perspective
11
! Here’s a spike, so what?
Perspective
11
! Here’s a spike, so what?
Expose system events
Perspective
11
Vertical Scanning
12
Vertical Scanning
12
Vertical Scanning
13
Appeal
14
! Chart is boring, imma go back to sleep...
Appeal
14
! Chart is boring, imma go back to sleep...
Wait, let’s make it worth it!
Appeal
14
Visual Design for UX
16
Visual Design for UX
16
Visual Design for UX
17
Visual Design for UX
17
Visual Design for UX
17
Visual Design for UX
18
Visual Design for UX
18
Visual Design for UX
19
Visual Design for UX
20
Visual Design for UX
20
Control
21
! Where’s the rest of this?
Control
21
! Where’s the rest of this?
1 click away, but now you look for it ;)
Control
21
User Control for UX
23
User Control for UX
24
User Control for UX
25
User Control for UX
26
User Control for UX
27
User Control for UX
28
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
More than graphs!
30
Network diagrams, Status boards, Heatmaps...
More than graphs!
30
Network diagrams, Status boards, Heatmaps...
Dashboards
30
Identify information immediately
At a glance
31
Train status
32
@morekid
@harrywincup
@serverdensity
Thanks.
Daniele De Matteis
Harry Wincup
serverdensity.com
33
