How to concisely represent a set of statistics on a dashboard?

Question

I'm designing a dashboard for a web app representing statistics related to a quiz/test. I'm using visual aids like charts, icons and other cards displaying a small piece of information. Each such card contains the statistic and an icon with a color. I've ended up with a bunch of cards taking up more than half of the page:

This is how it would look on a wider screen:

---

As it can be seen in the image, there are eight cards each representing data about the quiz. That is too many for a dashboard. These cards take all the spotlight. The charts are all below the cards and not even fully visible when a user first navigates to this page.

One of the charts I have is a donut chart representing the pass rate and the other is a column chart representing questions' difficulty distribution(number of beginner, intermediate and expert level questions).

Is there a better way to represent this information instead of a set of cards with icons? Or can any subset of this information be a good candidate for a chart? This is most of the information I have:

• start time, end time and duration of the test
• average time taken to submit
• total score, average score, the maximum and minimum score.
• the number of questions and the passing score(not displayed in the image, or it would've made 10 cards!)
• the number of candidates and their scores

Below the visual aids at the end of the page, there would go a table containing candidate details and their scores. I do not mind if some of the information is not displayed/ignored. I'm looking for a better representation of the info I have to be displayed on the dashboard.

I'm using HTML and CSS with Bootstrap 4.6 and its standard color scheme with some custom CSS for gradients, Font Awesome for the icons and Chart.js to create charts.

Answer 1

Cards Taking Too Much Space

When you get right down to it, the tile imagery is pretty much decorative and conveys no information. Borders and gradient background increase visual variability and force you to increase the conspicuousness of the actual data with font size and color just to keep them noticeable. Icons are arbitrary (except I think those for start and end time are clever), and the colors possibly misleading (Is maximum score necessarily good and minimum score necessarily bad? Is Average “caution” or somehow “golden”?).

Basically, all you really have is field captions and values represented alphanumerically. This can be shown in a compact form layout.

That’s about 3-by-2 inches on a laptop or tablet screen, and 2x1.7 on a smartphone screen, leaving plenty of room for the difficulty distribution.

If it’s important to make it visually interesting, then add the space-consuming decorations (icons, borders, colors) as the screen grows while keeping the relative position of all statistics the same. That’s a better way of dealing with variable screen/window sizes than moving tiles around. Users get used to seeing things in the same place each time.

Better Way to Represent Information

As for the more general question of better representing the info, consider using graphics to convey information, rather than decoration. Graphics are especially useful for indicating the relations among the data or some reference points. For example, it isn’t immediately apparent from an alphanumeric representation that this was an over-night test (if that’s important). Nor does it jump out that the average time to submit was within a couple hours of the total test duration (implying almost everyone used all the time available).

You could represent these data on a timeline:

Score data is begging for a histogram, showing in one place the distribution, average, minimum, maximum, and proportions of pass and fail, as well as their relations to each other:

By combining data into a common graphic you not only save space but provide more easily available information on the relations among the data, making insight more likely (although it'll probably still take more space than the most compact strictly alphanumeric layout).

Answer 2

Since you have some discreet data points, a chart will not necessarily make it clearer.

It seems that 8 of your cards could be divided into 2 categories:

• Time based info about the tests
• Scoring metrics re the tests

What you have right now are large, dropshadowed, rounded cards with a large colorful icon with each data point. This is both taking up space, and competing for attention.

One thing you can start to do is consolidate some of the data points using a scorecard. I'm putting in a simplified sketch to give a rough idea:

By grouping similar metrics together, you can now show aspects of the score.

If one data point is particularly crucial, you could highlight or segment it:

Use color for semantic meaning whenever possible; can you reduce unnecessary color?

The icons size and color is stronger than the actual data points. Here you have another chance to reduce both the amount of elements, and the overall size you'll need to tell this data story (dashboards and data have narratives).

Do the icons help users, or is it another element for them to try to parse meaning?

Since there are very few universal icons, you might want to at least consider the size, if not the presence of some of them at all.

In short, consolidating and reducing the moving parts will both help this fit small sizes, but have a quicker way to provide meaning to the user. You can make a couple versions, and test with your user base.

Answer 3

The goal of visualizing data on dashboard is not to simply provide all available data. If so, user need:

• find data which he really needs
• transform this data in his mind to obtain information for making decisions he really needs
• make some decisions

So the goal of vizualizing data is to show decisions based on initial data. Thus you need to ask your users what they want to see from your raw data. For example (very roughly):

• Is test started at time?
• Is test overlasted?
• Is average score normal?
• etc.

Users' answers will drive you to most appropriate data representation.