We are writing a web-based testing application where the user (teacher) can't move on to the next step in the process until all students (a young age group) have completed 2 separate tests. First all of the first assessments for each student, then on to the second. Though in most cases they won't get to this screen until all of the first set is completed — but not always.
We want to show at a reasonable glance as the user quickly scrolls through the class list how much is left to do so that the users (teachers) know how to schedule and assign students to the testing process.
There are 3 states: Not Started
, In Progress
, and Completed
. Not Started
and In Progress
are fairly close together in meaning, in that that means there is still work to do. Everything in the list getting to Completed
is obviously the goal, so we thought we should emphasize that; though I don't know if our current solution emphasizes it correctly yet?
We need icons in addition to the word to show the user quickly the status of each test. The client suggested we use as a metaphor the good ol' standardized testing circles that get filled in by pencil for multiple choice responses, that are empty, filled halfway, or full. (See example below.) I'm not so sure if this clear enough. And these tests don't actually use that method of test taking (the filled-in circles by pencil on paper "scantron" method) so the correlation isn't that important.
Also, many teachers want to see the score when tests are completed. Once each test is completed, it scores it and assigns it a "level" of basically "good", "okay", and "bad" which throughout the program is associated with the colors "green", "yellow", and "red."
To complicate it more, there is an "Initial Assessment" ("assessment" means a similar thing as a test in the education world) and a "Final Assessment" so this data has to be repeated twice for each student.
We are also considering adding the progress completion for In Progress
status like "13/155" or a percentage completion. We're not using it right now because we feel like it isn't important enough to justify the confusion it would make with the score percentage right next to it, which means a different thing even though they are both percentages.
See the prototype of what we have so far below. The circle backgrounds aren't transparent in the prototype — they will be in the final of course.
(This image shows an example of most of the first tests started, but not all. More often, the users will usually get to this screen after almost all of the first set is completed, and they're in the middle of working on the second set. I don't know if that will matter too much though. UPDATE: The original image incorrectly showed score colors and percentages on items that weren't completed. The one there now is fixed.)
I think we have an alright design, but I'm not sure if we are visually showing too much or not enough data clear enough. And I would like to add the In Progress
completion status, but not confused with the 'score' percentage. Would the score percentage look better inside the red/yellow/green score level? Should the entire score percentage level color be the entire background of the table cell? Should the level color be the foreground color for the percentage instead of the random box next to the percentage number?
Is there a better, common way to combine all this? Or are we good enough now that we should go to end-user testing with it?