2

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:

enter image description here

This is how it would look on a wider screen: enter image description here


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.

2

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.

![Data as columns and rows

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:

![Times on timeline with shade night representation

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:

![Histogram marking pass, fail, and statistics

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).

1
  • TIL about visual variability. I like the advice to design a more data-centric representation with graphics rather than the emphasis on decoration . I'll probably go with a combination of a compact form layout and Mike's grouped tile layout. Also, thanks a lot for the chart suggestions, the timeline and the histogram are perfect for this data. Thanks again :)
    – Amal K
    Aug 26 at 14:59
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:

enter image description here

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:

enter image description here

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.

1
  • The grouping of related info was exactly what I was missing. Also, really appreciate the sketch demonstration and the advice on spacing and sizing! It was hard to pick between Michael's answer and this one but I picked the former just because of the chart suggestions. Thank you for taking the time :)
    – Amal K
    Aug 26 at 14:34
1

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.

3
  • Thank you for the tips on the conceptual side of things :)
    – Amal K
    Aug 26 at 17:07
  • @AmalK Sorry, I understand that my post is not an answer to your exact question. But talking about UX is almost impossible without some knowledge about particular context - what is most important to your users? how they use information? etc. Otherwise this will end with listing all possible visual elements to represent the data. Sorry again for being obviouce. Maybe updating your question with this information would lead to more useful answers than mine :)
    – Serg
    Aug 27 at 6:53
  • Your answer still well complements the existing ones including advice on how to make certain UX/visualization decisions. So it was helpful to me too :)
    – Amal K
    Aug 27 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.