4

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?

Prototype screen so far

4
  • 2
    Note, that some people are colorblind.
    – user712092
    Nov 6, 2011 at 14:16
  • Good point @user712092. Red/green colorblind is common especially. We may add an option to run some alternative color schemes for increased accessibility.
    – Mufasa
    Nov 6, 2011 at 22:14
  • Although, it is a good point that some people are partially or completely color blind, color can still be used as an additional indicator to those who aren't. Make sure you are communicating to the user in multiple ways. Shape, size, color, etc can all help a user understand an interface. Nov 7, 2011 at 7:07
  • I don't think there is a colour perception issue here the score is clearly given as a percentage as well so if the levels of good/bad scores are clearly understood by the user you don't need anything more, if not then you need to change the percentage anyway
    – jk.
    Nov 7, 2011 at 11:36

5 Answers 5

6

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:

enter image description here

3

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.

2
  • Sorry about the percentages for non-complete tests. That's just the artist not thinking things through and copy & pasting. It will only have % and color for score if completed. I updated the image to reflect that.
    – Mufasa
    Sep 16, 2011 at 14:29
  • That's one of the things that I'm worried about. That even though the percentages (shown for completed tests only) still seem to be completion process percentages and not score percentages at first. Do they need more visual separation? Or a different visual composition?
    – Mufasa
    Sep 16, 2011 at 14:32
1
  • 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:

pie chart of finished/in progress/not started

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

1
  • RE: scrolling. Having a summary may be helpful. We'll have to see how users use the system. The client has done almost no user testing at this point. For example, we're not sure if the teachers need to know "how many left" or "which ones are left."
    – Mufasa
    Nov 6, 2011 at 22:18
0

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

Check out the way Interstate does it.

Options

example


enter image description here

2
  • The issue is not progress vs. completed. But progress/completion + a score for completed that is the issue. Does 90% mean progress or score? That's what we're trying to make clear to the user.
    – Mufasa
    Nov 6, 2011 at 22:16
  • True, however, simplifying the interface in this way could help make the overall interface less cumbersome. Nov 7, 2011 at 7:09
0

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 all stats in one column

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

Your Answer

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

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