I'm sure there must be some terminology for what I require unfortunately I'm not sure what it is. Anyway, let me try to explain, I have a selection of applications for courses that are to be assigned to a certain group for checking before they can be accepted, this is not a linear progression since applications can be assigned to any of the groups at any point. I would like suggestions for some form of UI to help visualise the distribution of a collection of applications.

E.g I have 100 applications in total

  • 10 are assigned to the 'Faculty'
  • 30 are assigned to the 'Department'
  • 40 are assigned to the 'Tutor'
  • 20 are assigned to the 'Dean of Students'

So I'd like a simple 'at a glance' method of displaying this information. I thought perhaps a multi-coloured coloured progress bar 100px long with 10px red, 30px yellow, 40px amber and 20px green. But I'm not too keen on using blocks of meaningless colours like this, and if the the user has a colour vision deficiency it renders the whole visualisation meaningless.

I should also mention that I have limited vertical space in my design, in fact the solution must fit into a table row. This is the reason I initially thought of a stacked bar chart as described above.

All suggestions welcome.

Edit - I've revised the question to more accurately reflect the requirements because I feel people are voting based on the original question.

  • 2
    What is it that you are ultimately trying to visualise? Is it just the number of applications in one stage compared to the other stages? On the face of it, a simple pie chart would make sense for that.
    – Matt Obee
    Nov 28, 2012 at 22:49
  • I'm trying to visualise the overall ratios of applications in each stage. With the ultimate goal of getting all applications to a completed stage.
    – Johntyb
    Nov 29, 2012 at 8:34
  • So yes, it is the number of applications at one stage when compared to another. Your idea of using a pie chart is sensible but not much of an improvement over the flattened bar chart I proposed. It would still have the same problems of arbitrary colour scheme being utterly meaningless to users. Another problem I failed to mention in the original question is that the information must be displayed in a table row so the vertical space is limited.
    – Johntyb
    Nov 29, 2012 at 8:41
  • Hi Johntyb. Thanks for letting us know what route you chose to take. However instead of updating your question to include your answer, can you leave the answer as a separate answer it its own right, so that the Question and the Answers are treated separately? It's perfectly acceptable to answer your own question
    – JonW
    Dec 6, 2012 at 13:47
  • 1
    Ahh thanks, didn't realise that. I'll make the necessary edits.
    – Johntyb
    Dec 6, 2012 at 13:49

5 Answers 5


One idea that comes to my mind is to use a fairy standard way of representing completed steps of some process by showing a chained circles. The only difference is to use circle size to demonstrate the difference between number of apps in every step and use gradient (or, possibly arrows between circles) to show the direction. You may also try to number steps, but it may confuse users (number of apps is already visible):

enter image description here

  • Interesting. I did consider using circles in this way, but not with the size difference you're suggesting. Although I like this approach I fear stages with very few applications could be problematic.
    – Johntyb
    Nov 29, 2012 at 16:37
  • @Johntyb why? The size of the circles shouldn't have exact size, you may set the minimum size and put the number off the circle. I think it should show the approximated value, so for some numbers like 1 and 3 the size could be the same. Nov 29, 2012 at 18:18
  • ok fair point. I might mock up this idea and CJFrankens suggestion and see what the user feeback is like.
    – Johntyb
    Nov 29, 2012 at 19:19

Given the restriction that the information should be displayed in a single row (limited vertical space), your original solution describes a horizontally oriented stacked-bar chart (bars lying on their sides), with a single stacked bar. Perhaps consider the following:

Keep your original idea, but instead of using different "random" colours, instead use different luminance values of the same color. This will solve any colour-blindness problems. If you depict the process going from left (new application) to right (completed), then you can adjust the size of the stacked-bar as the volume of applications change (this should be "obvious" if you use a stacked-bar chart), and brighter luminance colours will reflect fewer applications, while darker luminance colours will reflect more applications.

This way, you have both size/area and colour to depict the actual difference between the phases in the process. You can even consider printing the number in each portion of the bar-chart, if you need detailed feedback), but this may be tricky with very few applications (thin bar portions).

  • Hrmm, so when the bar is fully green all applications are complete, I like it. It would be great to be able to include the number too, but as you stated it'll be tricky when there's few applications at a particular stage. Although a jQuery tooltip could be the solution, but it does mean the user will have to mouse over the bars.
    – Johntyb
    Nov 29, 2012 at 9:27

Answer 2.0

enter image description here

Are you comfortable with Facebook?

Or you could just say,

New(10) | Initial Checks(30) | Background Checks (40) | Completed (20)

Answer 1.0

It sounds like you're handling application documents?

Is developing a UI really necessary?

You could sort your documents by

  • storing your applications in 'New,' 'Initial Checks,' 'Background Checks' and 'Completed' folders on your computer
  • name each application with a prefix and sort them by name. For example, a file could be named new_Tyler.docx or init_Tyler.docx or bg_Tyler.docx or done_Tyler.docx

Let me know if the applications aren't files for your computer. Maybe you're using data that's being pulled from a website, for example.

  • Unfortunately the applications aren't files for my computer, they're online admissions in an admissions processing system.
    – Johntyb
    Nov 29, 2012 at 8:43
  • I updated my answer with another suggestion. Nov 29, 2012 at 9:33
  • Thanks Tyler, a good suggestion. Finding icons to represent the stages might be tricky though and I'm not sure I'd have enough space to write the stage out in full. But I'll definitely consider this answer 2.0 approach too. Know of any good icon libraries?
    – Johntyb
    Nov 29, 2012 at 9:44
  • The Noun Project probably has what you're thinking of. If you're interested, I can also build this task visualization for you. I would like to add this fun, quick project to my work history. I'd give you my service for free. Nov 29, 2012 at 12:22
  • Appreciate the offer Tyler but I'd like to include it in my own work history ;)
    – Johntyb
    Nov 29, 2012 at 19:20

As outlined in the revised question it materialised that the pattern required was not for applications at a certain stage but rather applications assigned to a specific group.

So I decided that Tyler Langans Answer 2.0 would be best suited to this when combined with some tooltips, mouseover states and CSS3 opacity transitions to avoid too much clutter when there are multiple status bars on a single page.

So here's my first draft.

Default version:

Default version


Mouseover version

Feedback appreciated.


The project manager has decided that he's keen to use this:

Alternative Version

But I disagree with this for the following reasons:

  1. The stackedbar requires a key for it have any meaning.
  2. A group with less than 10 applications is not only difficult to see but also virtually impossible to mouseover to show the tooltip.
  3. The visualisation fails if the user is colour blind.

If anyone can suggest anything further I can add to my argument It would be appreciated. Or if people prefer this solution, speak up I'd be keen to hear either way.

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.