How Do I Add ‘Storytelling’ to a Dashboard?
If you only use the out-of-the-box dashboards, or have a custom dashboard with one widget, then you’re all set. But, if you decide to build a custom dashboard (or more) with many widgets, then you must consider the overall design.
“Widgets” include charts, gauges, list, metrics, and more.
Much of this article focuses on improving the “information aesthetics” of individual widgets. But, once refined, their arrangement in the dashboard can also show a larger picture, with a message worth more than the sum of the separate widgets. Information scientists call this over-arching narrative, “data storytelling”.
Whether you already know the story you want your dashboard to tell, or you want to see what emerges from the different data you have, follow these guidelines and it should appear, and then you can better share it with everyone else.
All the images in this article our customers built using our LRS dashboard. Really!
Build Widgets Carefully
The Veracity Learning LRS dashboard can show dozens of different types of widgets. Some are similar, like bar charts and histograms. Other are unique, like Gantt and Sankey charts. You can peruse a list of the different widgets in the FAQ article What Types of Charts Can I Make in the LRS?
Timeseries for Time, Bars for Bins, Pies for Constituency, Gauges for Ratios
If you want to make a chart, then pick the type of chart based on the data you have, and the message want to see.
| Type | Use | Example |
|---|---|---|
| Timeseries chart | Value over time | Activity over a calendar timeline |
| Bar chart | Value in “bins” | Duration in each activity |
| Histogram | Value distribution | Score |
| Pie chart | Proportions in a population | Students who completed, passed, failed |
| Gauge | Ratio of two values | Percent passed, of all students |
These are only the most obvious uses. We’ve counted hundreds of other metrics.
Axes, Labels, and Units
Once you’ve picked the right type of chart, then make sure to correctly adjust the scale, and to label it correctly too.
In XY charts, like timeseries and bar charts, the X-axis shows categories or dates. The Y-axis shows values.
Use conventional value units: use days or months for date, seconds or minutes for duration, and percentage instead of count. If the axis values are not self-explanatory (e.g., “January, February, etc.” or “0%, 10%, 20%, etc.”), then add the unit to the axis label: e.g., “Duration (Min)”
Convert scaled (decimal) or raw scores to percent.
If you must divide by an order-of-magnitude, then note the factor in the axis label: e.g., “Enrollments (Thousands)”, or “Statements (Millions)”.
Always start the Y-axis from zero. Consider setting a maximum value too, to keep the chart aligned with others nearby that use the same value in the same axis. If you can, use VQL to compute the maximum, especially for gauges.
Accumulator Operators
Consider using unique count instead of total count. Many data paths include extra statements for each activity, using unique count reduces them to one each.
Consider using median instead of average. Most student performance data skews, so median better shows “typical” performance: e.g., test scores, media durations, etc.
Filters
Use filters uniformly for each widget in the dashboard, use a custom parameter, if possible. Otherwise use the same filters for each section or group of widgets.
Sorting
Always show time values on the X-axis and always in ascending order (old-to-new), including absolute calendar dates and times, and relative logged times. The exception is duration, which you can show as a value on the Y-axis.
Only use alphabetic sorting (by X-axis label) to arrange numeric-named bins. If you can re-name your lessons, interactions, or choices in interactions to include a numeric prefix, then consider it! Also, you can edit canonical activities in the LRS, to add prefix values that you can use to better sort data.
If you must compare students by name, sort them by rank, not by name. Sort “Top Ten” leaderboards in descending order. Sort a chart of the worst performers in ascending order.
Color and Style
Make single series bar charts use the same one color for all bars.
Use cold-warm-hot, stop-caution-go color scales to suggest immediate ways to interpret values, especially in gauges. Likert surveys conventionally use a hot-to-cold scale, with gray for the middle value.
Use contrast in split series bars to draw attention to the most important constituent.
Size
Try to make the widget as small as possible but still legible. Rotate X-axis labels to fit as often as possible. Edit canonical activities for length, so names fit on charts better.
If you use Notice, Metric, Metric Ratio, or Bucket Reaggregate widgets, then edit the font-size down so you can fit more of them in skinny rows.
Arrange the Dashboard
Think of a widget as a single sentence in a story. Crafting each part helps improve it, but only if you connect them into a logical flow that creates the larger message you want.
Placement
The Western reading convention is left-to-right, top-to-bottom. So, the upper left is prime territory. Our eyes fall there first. Put the best and most important widgets in the upper-left.
From decades reading newspapers and web sites, people have learned to pay more attention to items “above-the-fold”. People see the widgets at the top, which are on-screen first. People might never see widgets that are off-screen until they scroll. however, you can use this bias to segregate your narrative. Put the main message at the top and move the supporting information down.
Alignment
If widgets show complimentary messages (e.g., self-confidence survey results in one lesson, test scores in the same lesson), then line them up, side-by-side.
If widgets have the same data along the X-axis, then line them up top-to-bottom. Make sure the widgets are the same width and that you set the axis range and sort the same too.
Write Better Titles and Subtitles
The easiest way to explain a chart is to establish expectations with a clear title.
Titles
As often as possible, describe the metric in the title: e.g., “Average Score, by Quiz”, “Median Duration Played”.
Subtitles
Use the subtitle to differentiate similar widgets: e.g., course name, quiz number, etc. You could also describe the measurement in detail or by analogy: e.g., “median activity” is “typical traffic”.
You can add some HTML mark-up in subtitles: e.g., <b></b> or <i></i>
In Notice, Metric, Metric Ratio, or Bucket Reaggregate widgets, it has a chart title and subtitle at the top, and below it, the rendered title (value) with icon and a subtitle. The lower subtitle can hold dynamic values, which lets you restate a value in another format: e.g., total count of population, instead of just percent measured. Also consider leaving the chart subtitle blank, to save space.
Add Sections and Captions
If you never touch Auto Layout, then you can move widgets across the dashboard and drop them where you want them. Don’t worry about leaving some empty space, if it improves the narrative.
Stagger placement of widgets to create and break the flow of the viewer’s gaze.
Use horizontal lines (borders) to vertically break large groups of otherwise similar widgets.
Add captions to the side or above another widget or section, to give a detailed explanation of the data and how to interpret it. If the chart has a color code that the legend can’t explain, add a better legend in a caption.
You can also add a footnote to the chart itself, using a “handlebars” stage.
Use Another Framework
Consider embedding widgets in another framework. If your organization has an intranet based in an extensible portal framework, such as MS Teams/SharePoint or Drupal, then find out if you can create an internal site with rich content, including inline frames (iframe) that can hold embedded widgets from the LRS. This strategy lets you design and maintain a dashboard with more capability, such as social interactions.
This article is an attempt at a quick response to several, recent FAQ. We're continuously refining our LRS and learning best practices on how to use it. Check back often!
Related Articles
Which Advanced Dashboard Features Are Not in the Free Plans?
In general, you have the same analytics in all Veracity Learning plans. All customers can open the same LRS Overview, Activity Overview, and Agent Overview default dashboards. All customers can also author custom dashboards. However, the advanced ...How Do I Add Tooltips to a Timeseries Chart?
Timeseries charts are usually so dense that tooltips are hard to select, so they don't have them. However, if you really need them, then you can add them yourself. When you're filling-in the Chart Builder for a custom Timeseries chart, scroll down to ...How Do I Add Custom xAPI to Storyline?
While Articulate Storyline supports a handful of xAPI actions out-of-the-box, you may want more. In response, Articulate added an option to create a trigger that sends a custom xAPI statement. If you need help working with triggers, then the ...How Do I Show Percent of Students?
In a custom dashboard, you can easily build a bar chart that shows the number of unique students per course. Chart Builder with simulated data offered in the free Veracity Learning LRS. Problem But what if you want to show the number of unique ...What are xAPI Extensions and How Do I Use Them in My xAPI Statements?
Best Practices for xAPI Extensions Activity, Context, and Result Extensions in xAPI Statements Do you need to know when and how to best use Activity, Context or Result Extensions in your xAPI Statements? This is a common challenge and a frequently ...