I'm designing a dashboard for teachers to monitor the progress of their students. This screen can have 20 to 50 students and when the teacher selects a start date, I would like to show the difference between the current state and the state from that date. I've tried several designs but either the screen becomes very hectic or the previous and current state aspect is not intuitive.

Teacher dashboard

A and B feel the most intuitive in terms of previous and current state to me but I hate how messy they look.
C and D look the most appealing in terms of design to me but less intuitive.

It doesn't have to be circles at all btw, it is just what I came up with.

To clarify what this should do: it should show the teacher in a glance how his students are doing. The dots in this case are chapters. The primary circle always shows the current state which can be: Grey: started, Red: 25% of total was answered wrong, Green: >75% was done and <25% was wrong.

In case the student did any work in the selected period, a secondary circle is shown with the state at the selected date.

A mouseover is used to show more detailed times and numbers per chapter.


What would be a good way of achieving my intent?

  • 2
    What's the problem that this UI is trying to solve? What is the teacher going to do with this information, and what questions does it answer for him or her?
    – Izquierdo
    Sep 9, 2021 at 13:43
  • May sound like a silly question but can you explain what is the actual difference between previous and current state are? Previous year? Previous week? I don't get it. Sep 9, 2021 at 14:08
  • Agreed that we need more info to know what this is about. But if it's just a comparison of the visual circle styles, I personally find B the easiest to quickly parse. EXCEPT for the colour shades are too close. Does not look messy, though. Sep 9, 2021 at 14:55
  • 2
    @Izquierdo, I've tried to clarify with an edit
    – Jonathan
    Sep 9, 2021 at 15:23

2 Answers 2


I think that vertical bars naturally work for this.

enter image description here

Bars are easy to scan and consume. They naturally represent their value. There's no cognitive load of learning the meaning of new symbols and learning to recognize them.

Bars are very easy to scan and group mentally. You can see how it's easy to find certain percentages complete or certain ratios of correct vs incorrect.

I think the example covers your states. The dark part represent percentage wrong so each bar shows if started, percent complete, and percent wrong.

Edit :

Jonathan commented: This will be a lot of information for a single screen. I'm wondering what all the exact percentages would mean to a teacher, is it valuable or just clutter? I'm thinking it's better to know if a student is doing: Anything at all/OK/Not OK

Bars can easily show whatever level of detail and you could even allow the user to change the view.

Here's an example with everything rounded to 25% increments.

enter image description here

  • This will be a lot of information for a single screen. I'm wondering what all the exact percentages would mean to a teacher, is it valuable or just clutter? I'm thinking it's better to know if a student is doing: Anything at all/OK/Not OK
    – Jonathan
    Sep 10, 2021 at 8:24
  • How might a teacher quickly determine if a student received a zero because they didn't start the assignment, vs. a zero because they failed it completely? I think symbols would only need to be learned on first use, so they shouldn't create too much cognitive load.
    – Izquierdo
    Sep 10, 2021 at 18:18
  • @izquierdo The light green indicates work done, dark green wrong work, so full dark is full fail and no color is not started. Could easily add indicators for other things that don't get covered. With new symbols, there's a ton of cognitive load in recognizing, remembering, and evaluating their value. With each unique symbol that has to be learned, the cognitive load increases exponentially
    – moot
    Sep 10, 2021 at 21:28

I like that you are trying to save space and be as compact as possible. I'm wondering if, for 20-50 entries that would compare two data sets at a time, if there is a bit more room for expansion.

One of the heuristics of accessibility is that status indicators need to use more than color to convey information; 6 percent of men are colorblind, and many of them are specifically have red-green colorblindness.

It seems that each student is working on a unit that has four states:

  1. Not started (currently a blank circle)
  2. In progress, but not not answered (currently a gray circle)
  3. Failed - 25% or more was answered wrong (currently a red circle)
  4. Succeeded - 75% finished with fewer than 25% of answers wrong (currently a green circle)

Is it important to account for the percentage of progress for each lesson? If not, you can use symbols:

  1. Not started - no symbol, it's not needed
  2. In progress - a clock
  3. Failed - a red X
  4. Succeeded - a green check

A table of student names and unit assessments with tickmark, clock and x symbols

If progress is important, you could use little pie charts, like this:

A table of student progress with pie charts and X symbols

  • Using icons beside color is certainly a valid point! Got a bit to focused on cleanliness. I've tried the pie charts but with around 30 chapters per project this just becomes way to hectic hence I want to dumb it down to ranges that would hold significance to the teacher.
    – Jonathan
    Sep 9, 2021 at 17:56
  • I'm also not sure about the repeating date ranges and that the teacher would need to compare two times to figure out how much time the user spent. (The default date goes 7 days back, maybe show the day count somewhere)
    – Jonathan
    Sep 9, 2021 at 18:02
  • Using two rows is definitely more intuitive in terms of what the data represents
    – Jonathan
    Sep 9, 2021 at 18:03
  • Is it more important to just know the change in status for each lesson over the last 7 days? Would an indicator showing completion, improvement, no change be valuable?
    – Izquierdo
    Sep 9, 2021 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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