Conveying progress for a set of items each with 2 stages

Question

I think I have an issue with the hierarchy of information in trying to convey progress to a user. On the dashboard of a non-profit dashboard I have the following option:

The organisation deal with sponsorship of children, and as you can see from the image three children are pending approval. A staff member in a native country of the child sponsorship program such as Uganda, adds a child to the sponsorship list. Now an administrator from the international office has to approve the listing.

All is good so far. But when it comes to the review section I have issues. For each child there is two stages for the approval:

• Stage 1 - administrator reviews all the basic input information about the child and confirms
• Stage 2 - administator reviews the biography of the child

The issue occurs when trying to show progress of this, there are 3 children pending, 2 screens for each child means a total of 6 tasks. The screenshot here shows Stage 2 of the first child:

As you can see the user is on Child 1 of 3, but has completed 16.5% as they are now on Stage 2 of the first child. I think this is all a bit confusing. The user may think they have just completed 16.5% of Child 1.

So, how can I convey the progress of the listing approvals in a more informative way that will clearly show the progress bar, without causing confusion to the user?

Effectively, I'm asking how do I show the progress of 3 items each with 2 tasks.

Please note that I would prefer not to have a global progress bar and an item progress bar. With just two tasks for each item I think an item progress bar would be over-doing it, and create too much clutter to a relatively simple task.

Answer 1

Is it even neccessary to show how many children are left to be approved at all?
How many administrators will be doing the approvals? If it is more than one then the task will probably be split up anyway (please correct me if I'm wrong) so instead of showing the progress bar you could do one of the following:

1. on approval of one listing ask the admin if they would like to continue straight to another (at which point you could also point out how many are left)
2. on approval of a listing exit back to the main screen where the '3 pending' has now changed and they can click to start the next approval

Other wise you could combine two progress bars into one so the global progress bar contains the items and steps (these were a bit easier to do with photoshop).

or

edit:

The more I think about this the less I think a global progress bar is a good idea.

Consider the following:

• When do you show the start of progress from? Today? All time? This session? Chances are that the progress will regularly be resetting to 0
• As new children enter the que you will end up with the situation where your completed percentage is actually going down. This would have a negative affect on the user as it appears their progress is going backwards.
• Will the user ever get to 100%?

It may be better avoid showing progressed as percentage at all. Just indicate how many have been approved (maybe for 'today' and 'all time') and how many are pending.

If your intention it's to provide a sense of achievement then it may be better to use something like a high score of how many approved each day or even a 'wall of pictures' of all the children that have been approved.

Answer 2

I think the bottleneck is in assuming that the first admin approval (the basic check) IS a "partial progress" that should be displayed as such.

You'd probably be much better off if you just count the full 2-step approval in the progress bar. In the meantime, the listing is always "pending", be it because it's been reviewed partially or because it isn't reviewed at all yet.

You can show that status (no revision, partially appproved, fully approved) next to each listing, without messing up the progress bar. Also you avoid to convey a fake perception of progress for partial approvals that may end up being rejected.

Answer 3

Your solution looks good so far. I think the one confusing thing is to show the progress per child in the overall approval progress, which mixes two things in a confusing way. Just separate the approval per child and the progress of total reviewed listings.

In the below mock-up the overall progress is in the heading, review progress status message and progress bar. The progress per listing then again is a simple step x/y approach, which is additionally emphasized by the button label Proceed to step2. In step2 this could be Approve to website and review to next listing for step2. Note that I avoid calling step1 an approval, and only use the word approval for step2. Not repeating the "approval" of step1 in step2 clarifies things - either the whole item gets ditched or approved.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This way, the review session's progress is clear and separated from the approval of one item which is a mere two step form. The solution can work for any number of pending items. I'd imagine you also have some disapprove / delete button for each item and possibly a list where you can expand the list of pending items to skip to a particular item (could be an expandable dropdown from the Approve listings (...) heading).

All in all, your approach just needs a cleaner structure to work as intended.

Answer 4

You should combine the 2 steps when accounting for progress, as the effort spent on them are presumably unequal. It would make more sense that it progresses only when a child is approved. Also, you don't always need a progress bar to show progress.

Answer 5

Could you group both stages at one screen and let administrator approve or decline by several reasons?

The meaning of stage 1 (i.e. 'basic input information') isn't clear for me (how that stage is organized, what actually is checked at this stage, etc), but it seems like if both stages could be done by the same administrator and doesn't require separate queues (I mean, you have all the information required before the review) you may try to combine these two stages into a one single stage (one screen) and let administrator choose how to finish the review procedure:

1. Decline because of invalid basic input
2. Decline because incomplete biography
3. Approve

It will allow you to show a complete review progress for every child in the progress bar and, moreover, help administrators to review quickly since there is everything at just one screen.

Answer 6

I actually find the labeling of the current step and the progress bar confusing.

A simple solution might be to refer the progress bar with the (1 out of 3) label and show the user's current step next to the child's name.

At least then there would be some sort of reference that you're on step 2 for that specific child and only on the first child as a whole in the progress bar.

This should also work well in extreme cases where the admin has hundreds of children to review.

Answer 7

Supposing a progress bar is a must, the issue is that you need to indicate at 1 bar 2 different measurement units - number of children and number of tasks. There are at least three possible solutions:

1. Display progress for one unit - number of tasks. In the example you'll display text, say '6 total tasks, 1 completed'. 16,7% is correct value.
2. Use double-scale progress bar. E.g. number of children on upper scale and number of tasks at bottom scale with different percentages.
3. Use bi-color progress bar or solid and semi-transparent combination. E.g. green filling for fully approved children and yellow for not fully approved. Also, the rest of progress bar could be in red instead of being not filled with any color.