Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The problem We have a need to show the status of a daily ingest of thousands of files coming from different senders. A quick mockup is this: Dashboard Shot

The problem is that Ipsum and Dalore are just sub-views of the raw file count. The reason they are there are to help track the progress across those two elements to give more detail at a glance and make the dashboard more useful than "ohhh pretty progress bar that says 60%"

The question in one sentence How can the visual design help indicate to the user that Ipsum and Dalore or different ways of looking at the Lorem Files "raw" data.

Feel free to expand past the progress bar metaphor.

How about a for-instance So you want a use case eh? Well I can't share the real one, so lets come up with a contrived example that hopefully will hold some water.

Lets say you are in charge of making sure that at the end of each day all these thousands of files were uploaded and that all of them got ingested without errors. If they are missing or errored out, you have to track down the right person to upload the file(s) to fix the problem.

The whole point of the files is to give each employee access to the floors in the buildings they need for the day. Each file represents and employee - building pair for a specific day that contains lines for each floor in that building that they have access to for the day. (Remembered this is a contrived example so don't try to solve for the, why are you setting the system that way, lets just focus on the visualization please)

So lets update our screenshot for out theoretical example:enter image description here

So whats the problem? Giving you a view of X of 44,000 files doesn't give you the full picture at a glance. How many buildings are ready to go? How many people are ready. Having each view gives a better view into what is going on. And also allows each client to potential approach from one variable or the other without me assuming which is more important.

In the end this mockup isn't doing a good job of connecting the data visually to indicate that they are views or perspectives of the same data.

So In Summary How would you help solve the problem so that these items don't look like three seperate data sets. Feel free to expand out of the progress bar metaphore, or stick with it and describe how the visual design (or something else) can help the user understand the connection.

share|improve this question
1  
You're quite right -- your question is pretty confusing! I think it would be helpful to do two things: 1) update your graphic to say Buildings instead of Ipsum. (Stick with the story.) 2) Write out a couple quick examples. Ex: Dan manages floor access for a university, every day he.... etc. –  Loren Rogers Sep 13 '12 at 14:36
    
Interesting question though! –  Loren Rogers Sep 13 '12 at 14:36
    
@LorenRogers Thanks for the feedback, I'll try to rewrite and make the image match when i get a chance. –  Chris Janssen Sep 13 '12 at 17:32
    
@LorenRogers Updated the question for clarity, let me know if this makes it more understandable. Thanks! –  Chris Janssen Sep 14 '12 at 0:04
add comment

3 Answers

up vote 3 down vote accepted

I think the concept of pie charts diminishing in size is a better metaphor here than the progress bars. There are of course some potential weaknesses to this, but these are practically unavoidable given the amount of information available. You haven't, for example, mentioned how many of these relationships you might need to display in the dashboard at one time.

Rather than bug you for every last potential configuration point, here are a couple of suggestions that might spark some alternative ideas.

Pie Charts Metaphor

Pie Charts Metaphor 2

share|improve this answer
    
Similar to what I was thinking. Do you feel that the 61% Received vs 20% complete is understandable that they are counting "raw files" in the Files count, but in the People/building graphs it is only counting fully complete "objects" that represent X files. It appears you understood it as it follows through in your mockups, but best not to assume. –  Chris Janssen Sep 14 '12 at 17:28
    
+1 for nested pie charts. First time I've seen that -- did you make it up? Is that a technique I've just not seen before? –  Loren Rogers Sep 16 '12 at 14:18
    
@ChrisJanssen I think the change in unit does open the door for potential confusion, so you would need to be careful with the labeling, but I think this could work. –  dennislees Sep 18 '12 at 0:21
    
@LorenRogers I don't remember seeing this anywhere, but it must exist. There's a strong chance I saw it in an infographic at some point. The process behind the idea was to take methods of representing incomplete data (chart types) and work out which one was most apt to be connected to other instances of itself. –  dennislees Sep 18 '12 at 0:26
    
@ChrisJanssen Just looking over this again, a couple of more points. You may be able to do away with the connecting lines by making the user click for further breakdown. So (in the example I gave) the 61% Received portion of the 'Access Files' pie chart could be clickable, with the sub-options appearing when clicked. It's obvious then, that the new data is associated with the segment just clicked. The other thing is there are no unit labels in place. This seems like a situation where associating the '330/500' numerals with an actual metric would be worth the potential interface clutter. –  dennislees Sep 18 '12 at 0:35
add comment

Even with your description and the example of buildings and people, I still don't fully understand how the data are being reported in your progress bars.

Using your example, let's say we have the following (very basic) data:

Name    Building     Status
----    --------     ------
Geoff   Building 1   Not received
Geoff   Building 2   Received
Mandy   Building 1   Received
Mandy   Building 2   Not received

It's clear that the Access Files bar would be at 50%, but what about the others?

  • We've received files from both Geoff and Mandy, so would the People bar be at 100%?
  • Likewise, we have files for both Building 1 and Building 2, so would the Building bar also be at 100%?

If so, this combination of the three progress bars feels pretty confusing to me. Maybe it's clearer with the semantics of your actual, undisclosed domain, but if not, it may be worth a rethink about whether this is really the kind of breakdown you want to present. (Or maybe I've completely misunderstood something!)

BTW, the above applies equally to pie charts as to progress bars.

(Apologies for the non-answer, but I couldn't fit or format this in a comment.)

share|improve this answer
    
Thanks for the feedback. The "secondary" progress bars are tracking people or buildings 100% complete. So Each building requires files for every person in that building to be considered complete, so if all 550 people have access to it, then you need 550 files to complete that building. Where for a person to be complete, you need up to 80 files uploaded if that person is to be considered complete. A config file maps who is expected where on what dates so that how the progress bars knows what to expect. Does that clarify? This may be part of the difficulty with this, that the –  Chris Janssen Sep 14 '12 at 17:20
    
main bar is a raw count and % where the other two concept driven bars are counting when that "object" is complete. Just to be clear, from your example, the access files would be at 50% and the other two would be a 0%. If the Mandy building 2 file was then uploaded, both would read as 50% because Many is complete (of 2 people) and building 2 would be complete (of 2 buildings) As far as your table above, there would be such a log below the graphics (with filtering/search) to allow the user to drill in and determine what person/building pairs are missing. –  Chris Janssen Sep 14 '12 at 17:21
add comment

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Well, I could not make those icons filled with colour (just border), but you get the idea...

In order to make things look related try to find Gestalt principles that are suitable for your design. People perceive objects as related when there is something common, something what links the objects, like colour, shape, proximity. You used different colours, different labels.

I did include a shape and colour relationship between the graph and the progress indicators. I am not sure if it is not too much though. It's a first, quick idea.

share|improve this answer
    
Interesting use of the icons to create the relationship, not something I had thought of using. Thanks. –  Chris Janssen Sep 14 '12 at 17:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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