Design Pattern recommendations for application assignment visualisation

Question

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.

Answer 1

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):

Answer 2

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

Answer 3

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:

Mouseover:

Feedback appreciated.

Answer 4

Answer 2.0

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.

Answer 5

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

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.