Is there a better way to show 3 states of 2 types of data?

Question

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?

Answer 1

Is there a need for a teacher to know the difference between 92 and 95%? If not maybe you should show the scores as letter grades (A, B+, F, etc.). That way you avoid the confusion between the percentage being for the score or the completion.

If you need more fidelity for the progress, you could use 5 icons to show this. Mindjet Mindmanager has a nice way of showing it with these icons:

Answer 2

I don't have a fully designed solution, but just some feedback about your design. I like the use of colours, however I think you need to simplify your design.

The percentages are confusing. At first glance I actually thought they represented the completion rate. Then when I noticed the headin score, I was more confused as to why there was a score for a test that was not complete.

Perhaps to help the visual scan you should display different information in each state. That why it is easier to quickly identify the state. It will also reduce the amount of visual information.

• Not started: blank

• Completed: display the score with the colour

• In progress: no colour and you can write "in progress(13/155)".
  (I dont think there should be a score until the test is completed)

I hope this helps a bit.

Answer 3

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

I am not sure how much of Your questions are mixed with Your attemp at solution.

User has to scroll?

Scrolling is not required

• Have digest like "25 % of students are finished" at the top of page.

Since You wrote Though in most cases they won't get to this screen until all of the first set is completed — but not always. I would extend it even more. Add something like: {"not everybody finished, please wait. Next button will be available ASA all will finish.", "Everybody finished. You may proceed further. To do so click next button."} for cases of {requirements to go further are not met, requirements to proceed are met}.

• Have graph like:

Scrolling is required

• Table. Sortable. One column will be status, values = {"none", "in progress", finished"}. Teacher sorts by that column and sees.

Is there a better, common way to combine all this?

• "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."

Can't You use more than one list? Or one page?

It is web. You can have as many views of data as You want; You can (almost) alway use back button.

Initial Assessment, Final Assessment

• "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.

Sorry, I don't see what will be repeated, IA and FA are 2 different things.

Since it is a web application why not replace data in "Initial Assessment" for student who passed it with simple text passed. It will be apparent to observer.

Completion

• "We are also considering adding the progress completion for In Progress status like "13/155" or a percentage completion. ... "

You can use jQuery to toy with data representation and replace it if needed. There are also jQuery testbeds on the web ...

Answer 4

A percentage complete also communicates "in progress". There is no need to show them separately.

Check out the way Interstate does it.

---

Answer 5

It looks like you're trying to show both progress and score in a simple way. Something that's in progress would not have a score, and something with a score would not be in progress, so you should be able to merge this.

Show a progress bar when in progress, or show a grade when complete.