lecture_11_dashboards.pdf

2 December 2005 Information Visualisation Dashboards Prof. Beat Signer Department
of Computer Science Vrije Universiteit Brussel beatsigner.com Department of Computer Science Vrije Universiteit Brussel beatsigner.com

Beat Signer - Department of Computer Science - [email protected] 2
May 7, 2026 Opsview Monitor https://commons.wikimedia.org/wiki/File:Opsview_Monitor_6.0_Dashboard.jpg

May 7, 2026 What is a Dashboard A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance. Stephen Few, Dashboard Confusion, Intelligent Enterprise, March 2004

May 7, 2026 Log Analysis

May 7, 2026 Dashboards Are Visual Displays Combine text and graphics, with an emphasis on graphics, as graphical presentations communicate information with greater efficiency and richer meaning than text alone.

May 7, 2026 Dashboards Display Information Needed to Achieve Objectives Dashboards offer access to a collection of information that is not otherwise related, often coming from diverse sources related to various business functions. ▪ required information is often a set of Key Performance Indicators (KPIs)

May 7, 2026 Dashboards Should Fit on One Screen The information must be entirely available without effort, so it can all be seen at a glance. ▪ no scrolling should be necessary ▪ no moving between multiple views (screens) ▪ depending on objective information might be refreshed in real time

May 7, 2026 Dashboards Are Used to Monitor Information at Glance Information presented in a dashboard is in the form of summaries or exceptions. Main goal: show what requires attention Secondary goal: offer details needed to take action

May 7, 2026 Dashboards Have Small, Concise, Clear and Intuitive Display Mechanisms Display mechanisms (visualisations) that do not require much screen space Choose the visualisation that is better suited for your needs ▪ line charts, gauges, thermometer, traffic signals

May 7, 2026 Dashboards Are Customised Displayed information must be tailored to the require- ments of a person, group or function

May 7, 2026 13 Common Mistakes in Dashboard Design 1. Exceeding the boundaries of a single screen 2. Supplying inadequate context for the data 3. Displaying excessive detail or precision 4. Choosing a deficient measure 5. Choosing inappropriate visualisation technique 6. Introducing meaningless variety 7. Using poorly designed visualisation technique 8. Encoding quantitative data inaccurately 9. Arranging data poorly 10. Highlighting important data ineffectively or not at all 11. Cluttering display with useless decoration 12. Misusing or overusing colour 13. Designing an unattractive visual display

May 7, 2026 Exceeding Boundaries of a Single Screen ▪ Fragmenting data into separate screens ▪ separated into discrete screens

May 7, 2026 Exceeding Boundaries of a Single Screen… ▪ Fragmenting data into separate screens ▪ separated into instances of a single screen

May 7, 2026 Exceeding Boundaries of a Single Screen… ▪ Requiring scrolling ▪ assume that anything requiring scrolling to see is less important

May 7, 2026 Supplying Inadequate Context for the Data ▪ there is no point of reference to compare presented data ▪ colour of hands/needles to indicate good or bad ▪ gauge with incorporated context ▪ Add context if it provides real value ▪ more is not always better

May 7, 2026 Displaying Excessive Detail or Precision ▪ Avoid too much details or too precise measures ▪ slows down the viewer without any benefits

May 7, 2026 Choosing a Deficient Measure ▪ Deficient measure does not communicate in clearest way ▪ measure can be accurate but not the best choice for message Displaying actual and budgeted revenues sepa- rately fails to express the intended message Representing the differences in terms of percentages emphasises a deviation from a target

May 7, 2026 Choosing a Deficient Measure … ▪ Make sure that the viewer knows ▪ what is being measured ▪ the units in which the measure is being expressed ▪ Which message most directly support the viewer's needs? ▪ select the measure that most directly supports that message

May 7, 2026 Choosing Inappropriate Vis Technique ▪ Circles are a poor choice to represent unidimensional variables ▪ problems with visual perception ▪ We simply cannot accurately compare areas ▪ what about the operating cost of February and May? - costs in May seem higher than those in February while they are the same - revenues bubble in May is smaller which makes the enclosed operating costs seem bigger (optical illusion)

May 7, 2026 Choosing Inappropriate Vis Technique … ▪ A bar chart can represent this information efficiently and clearly

May 7, 2026 Choosing Inappropriate Vis Technique … Do segments add up to 100%? Are segments properly labelled? Does the colour schema make any sense?

May 7, 2026 Choosing Inappropriate Vis Technique … ▪ A bar chart (even without different colours) makes the comparison way easier

May 7, 2026 Choosing Inappropriate Vis Technique … ▪ Spatial (geographical) representation of the data does not have any added value

May 7, 2026 Introducing Meaningless Variety ▪ Unnecessary variety requires a shift in perceptual strategy for each visualisation technique on the dashboard, resulting in extra user time and effort

May 7, 2026 Using Poorly Designed Vis Techniques ▪ Legend provides the labels and values of the segments ▪ forces back and forth eye- movements between the graph and the legend ▪ waste of time and effort ▪ Random and inefficient order of slices and labels ▪ ordering them by size would have provided useful information ▪ Bright colours of the pie slices produce sensory overkill ▪ bright colours reserved for specific data that should "pop out"

May 7, 2026 Using Poorly Designed Vis Techniques … ▪ Can you tell how much was sold in the Catalog category? ▪ lack of delimiters between set of three digits (thousands, millions, etc.) ▪ Can you read every number on the scale used in every gauge? ▪ numbers along the scales are positioned inside rather than outside the axis leading to some occlusion ▪ text at the bottom of each meter obstructs the needle for measures near the bottom or top of the scale

May 7, 2026 Using Poorly Designed Vis Techniques … ▪ Most important thing to remember is to show the data ▪ maximise the data-ink-ratio ▪ avoid chart chunk ▪ avoid poor colour schemes

May 7, 2026 Using Poorly Designed Vis Techniques … ▪ Almost always avoid 3D-graphs for the presentation of business data ▪ problem of occlusion

May 7, 2026 Encoding Quantitative Data Inaccurately ▪ Wrong axis scales and other design issues ▪ might easily lead to wrong conclusions

May 7, 2026 Arranging Data Poorly ▪ Red band segments the space to an unnecessary degree

May 7, 2026 Arranging Data Poorly … ▪ Lack of visual balance based on importance of data ▪ top left (most prominent) used to display logo and controls ▪ bottom right (least prominent) draws attention due to large amount of covered space ▪ Comparison between order size and profit tedious due to side-by-side rather than above-below arrangement ▪ Arrangement guideline ▪ most important data must get the attention - make it "pop out" so it gets immediate attention ▪ data that should be compared should be arranged and visually designed to encourage and support this comparison

May 7, 2026 Highlighting Important Data Ineffectively or Not at All ▪ Everything that deserves space on a dashboard is important, but not equally ▪ a viewer's eyes should always be directed to the most crucial information first ▪ navigation controls should not be emphasised

May 7, 2026 Cluttering Display With Useless Decoration

May 7, 2026 Cluttering Display With Useless Decoration Problems in this Example? ▪ Logo and title eat up most valuable real estate across the entire top of the dashboard ▪ if logo must be present (branding) make it small and place it out of the way ▪ Background gradient gets the attention ▪ colour gradients with no real purpose (distracting) ▪ Maps in the background of the three upper graphs distract from the data

May 7, 2026 Misusing or Overusing Colour

May 7, 2026 Designing an Unattractive Visual Display ▪ "Some dashboards are just plain ugly." (Few, 2006) ▪ when we see them, we are inclined to avert our eyes hardly the desired reaction to a screen that is supposed to be supplying us with important information ▪ when a dashboard is unattractive, the viewer is put in a frame of mind that is not conducive to its use ▪ dashboards should not be made pretty, but rather attractively display the data itself, without adding anything that distracts from or obscures it

May 7, 2026 Strategies for Effective Dashboard Design 1. Condensing information with summaries and exceptions 2. Maximising the data-ink-ratio 3. Designing dashboards for usability/UX ▪ organise information to support its meaning and use ▪ make the viewing experience aesthetically pleasing

May 7, 2026 Condensing Information ▪ Summarisation ▪ represent a set of numbers (often a large set) as a single number ▪ two most common summaries are sums and averages ▪ Exception ▪ why make someone scan through hundreds of values when only one or two require attention? ▪ we call these critical values exceptions

May 7, 2026 Reducing Non-Data Ink ▪ Eliminate all unnecessary non-data-ink ▪ eliminate graphics that provide decoration only (e.g. banners) ▪ remove chart junk (grids, borders, backgrounds, 3D effects, …) ▪ De-emphasise and regularise the remaining non-data ink ▪ keep the weight of the lines to a minimum ▪ grid lines and fill colours can be used in tables to distinguish some columns from others

May 7, 2026 Reducing Non-Data Ink … ▪ De-emphasise and regularise the non-data-ink that remains ▪ Do not vary the colour, weight or shape of non-data pixels that serve the same purpose

May 7, 2026 Reducing Non-Data Ink … ▪ What should we do with navigation and interaction controls? ▪ buttons and selection boxes should not be given prominence as they do not display data ▪ if they must exist, place them in an out-of-the-way location such as the bottom-right corner of the screen and mute them visually, so they will not compete with the data for attention

May 7, 2026 Enhancing Data Ink ▪ Highlight the most important data-ink ▪ information that is always important (static means of emphasis) ▪ information that is only important at the moment (dynamic means of emphasis)

May 7, 2026 Enhancing Data Ink … ▪ Different degrees of visual emphasis should be associated with different regions of a dashboard Never waste this valuable real estate by placing a company logo or controls for navigation or data selection here

May 7, 2026 Organise Information to Support Its Meaning and Use ▪ Organise groups according to business functions, entities and use ▪ Co-locate items that belong to the same group ▪ Delineate groups using the least visible means ▪ Support meaningful comparisons ▪ Discourage meaningless comparisons

May 7, 2026 Organise Information to Support Its Meaning and Use … ▪ Delineate groups using the least visible means (e.g.white space)

May 7, 2026 Organise Information to Support Its Meaning and Use … ▪ Support meaningful comparisons ▪ combine items in a single visual encoding ▪ place items close to one another ▪ use brushing and linking ▪ include comparative values (e.g.ratios, percentages, variances) ▪ use of colour can support grouping and encourage comparisons

May 7, 2026 Organise Information to Support Its Meaning and Use … ▪ Discourage meaningless comparisons by separa- ting items and using different colours ▪ In this example, some colour choices produce this unintended effect ▪ different use of yellow colour (amber) ▪ our natural inclination to link same colours is misleading

May 7, 2026 Make Viewing Experience Aesthetically Pleasing ▪ Choose colours appropriately ▪ keep bright colours to a minimum, using them only to highlight data that requires attention ▪ Use less saturated colours such as those that are predominant in nature (e.g.colours of earth and sky), except for content that demands attention ▪ use a barely discernible pale background colour other than pure white to provide a more soothing, less-contrasting background

May 7, 2026 Make Viewing Experience Aesthetically Pleasing … ▪ Choose colours appropriately

May 7, 2026 Make Viewing Experience Aesthetically Pleasing … ▪ Use legible fonts ▪ decent font size ▪ no ornaments, no fancy fonts ▪ use a different font for headings ▪ find out what works and stick with it throughout the dashboard Fine legibility Poor legibility Serif Sans-Serif Serif Sans-Serif Times New Roman Arial Script Gill Sans Vitra Palatino Verdana Broadway Papyrus Courier Tahoma Old English Tempus Sans ITC

May 7, 2026 References ▪ Information Dashboard Design: The Effective Visual Communication of Data, Stephen Few, O'Reilly Media (1st edition), January 2006, ISBN-13: 978-0596100162 ▪ S. Few, 13 Common Pitfalls in Dashboard Design, White Paper Perceptual Edge, 2006 ▪ https://www.perceptualedge.com/articles/Whitepapers/Common_Pitfalls.pdf ▪ E. Nadelhoffer, 10 Best Practices for Building Effective Dashboards, White Paper Tableau ▪ https://www.tableau.com/learn/whitepapers/10-best-practices-building- effective-dashboards

May 7, 2026 References … ▪ Opsview Monitor, Opsview Inc ▪ https://www.opsview.com ▪ Log Analysis, Loggly ▪ https://www.loggly.com

2 December 2005 Next Lecture Case Studies

lecture_11_dashboards.pdf

lecture_11_dashboards.pdf

More Decks by Beat Signer

Featured

Transcript