# Interaction with a grid with complex cells

## Problem definition:

• A grid where each column represents an attribute of a task and each row is a task
• One of the columns represents the progress reported on that task
• Multiple persons can be assigned to each task
• Each person reports their own progress
i.e. let's take a task with only 2 persons working on it (they have an equal amount of work)
Person1 reports they're done (their progress is 100%)
Person2 reports 50% done with their part The total progress of the task is 75%
• The cell in the grid displays the total progress (unless clicked)
• Each resource can only report their own progress

How do you convey all this easily?

I've quickly drafted the following mockups (bear in mind it's a wireframe - no graphic design, the transparency is for illustration and will probably not stay):

Friendly, not necessarily clear:

Scary, all the info, clear if you stick around:

Advanced question: The cells have to show the overall progress when not pressed, since on the very same grid, some tasks might allow only individual reporting, like described above, while others might have shared reporting (i.e. if on the same 2 person task, Person1 is done, they have to report just 50% and when Person2 comes along, they report "say" they're 50% done, but fill in 75%. In this case, the tiny window will look a bit different (suggestions appreciated)

Feedback, thoughts, suggestions, solutions - all welcome and appreciated!

Additional note: my concern is not that the user sees all the extra info. As Ryan pointed out, it's often unnecessary. The problem is that the user might not understand why he typed in "50%", but the cell suddenly shows "75%" (especially since in another cell that is only has the "shared" reporting, what the user types is exactly what he gets...)

-
Check your math on that last mockup. If I understand correctly, Ludwig's 55% should be 18% of the total, your 50% is 17% of the total, and 69% of the work has been done. – Patrick McElhaney Aug 19 '10 at 0:21
Is it always the case that each person has an equal share of the work? – Patrick McElhaney Aug 19 '10 at 0:25
There was no attempt at math :) I've just rounded things up for the mockup... – Dan Barak Aug 19 '10 at 6:58
And no, it's not always the case that each person has an equal share. – Dan Barak Aug 19 '10 at 6:59

I would suggest having one column for individual progress and one for team progress. That way when your user enters his 50%, it will stay 50% and the team progress will show 75%. Your popup then could be only on the team progress cell and simply list all the team members and their progress.

-
Tania, you're right, that's a solution that has crossed my mind as well. It's a good one, but the "Advanced" section of the question puts it in a problematic place. If the task is set to "shared" reporting, the individual progress column is both disabled and empty (since if a user filled 50% overall progress for the entire task (let's assume 2 people are on it equally) can mean that she is done and the other hasn't started, or that both of them are halfway there, or any other combination. – Dan Barak Aug 19 '10 at 14:58

I think the amount of data you display initially would depend a lot on how relevant it is to the user at hand. So, for example, I would imagine that if Martin is logged in, he may only be interested in his progress and the overall progress of the task, not necessarily Ludwig's. This would allow us to eliminate Ludwig's progress from the display.

Of course, we can always have more detailed information presented to the user via a collapsible section to keep it out of the way if it's not necessary (or not usually necessary). This I think is a good compromise.

-
Thanks Ryan, it's a good idea to have the info collapsible. While I agree the extra info is not directly necessary, my thought was that the user would be stumped if he puts in 50% done, but the cell suddenly becomes 75%. – Dan Barak Aug 19 '10 at 7:01

I like to call this the "itch" - when something gets this awkward-feeling or complicated I try to analyse what doesn't feel right and see if I can get rid of them. It feels awkward to me because the hovering metadata reminds me of the "hover and cover" anti-pattern (see also this PDF on page 32). It also feels like the data wants to "get out" of such a constricting space.

I would look for some kind of information visualisation that can represent multiple users' contributions as part of a whole and think about pulling this information out of one cell.

Since you're presumably locked into the grid format (would love to discuss options other than that, but not really relevant for this question) perhaps you could create a bar accompanying each row that stretches over the full length and fills depending on who's done what. I'm gonna go out on a limb here and try sketching it in ASCII:

``````[    ][    ][    ][    ][    ][    ] <-- cells in a row
---------|----|--------------------- <-- with each row, a smaller row beneath it
representing completion state
[    ][    ][    ][    ][    ][    ]
-------------------------------|----

[    ][    ][    ][    ][    ][    ]
-------|----------------------------
``````

Each row could be filled to indicate completion. A 100% completed task would have a fully coloured completion row with "100%" in it (or 50%|50% for 2 users, etc). A 75% completed task would have 75% filled with "75%" in the filled part, and a white remainder with "25%" in it. You could use different colours for when multiple people are using it. Perhaps consider entering their names in each segment, though the question is whether it would fit. I would aim for having the row be visually less significant than each major task and use a smaller font size (around 10px). You could have rows like this be hidden immediately and use a button in a cell at the end to show them:

``````[    ][    ][    ][    ][    ][show completion] <-- hidden state

[    ][    ][    ][    ][    ][hide completion] <-- displayed state
-------|------------------------|--------------
``````

You might find this answer completely useless since you're forced to stick with the cell/popup, but I thought I'd be honest and tell you what I would at least prototype.

-
Oh hey, for a good example of what I think this should look like, check out the flight results at hipmunk.com – Rahul Aug 19 '10 at 12:10
Rahul, thanks for the very detail answer. It's very creative and brings a definite flare to the whole thing. Unfortunately as you expected, I'm forced to remain with the existing grid. I wanted to say that your definition of the "itch" is right on the spot! And thanks for the great references. – Dan Barak Aug 19 '10 at 14:40

Another idea hit me while writing out the previous one: users might not care about specific percentages. If you consider that, it frees you to use plain English for some things instead of mapping them out to boxes with percentages. Taking from your own example:

``````**Your progress** - [Done!]
``````

For you and 2 others:

``````**Your progress** - [Nearly done! - 85%]
- Martin is done!
- Ludwig is halfway done.
``````

For more than 2 people working with you:

``````**Your progress** [Halfway there! 55%]
- Martin, Ludwig and Esther are done!
- Simon and Chauncey are halfway done.
- Henrik just got started.
``````

For more than 10?

``````**Your progress** [A ways to go... 15%]
- 5 people are done!
- 7 people are nearly there!
- 1 person just got started.
``````

If you were to go with the popup option I'd test this one and see if people care about other people's percentages. I tend to find that when presented with detailed information, it's more a "make me think" moment than it is added clarity, but YMMV (I don't know who you're designing this for, obviously).

-
That's a great idea! But absolutely useless if you use a table like a dashboard, scan it quickly. Graphical representation is important in some cases. – Kostya Aug 19 '10 at 9:32
Well, for the scanning I would do what Dan is already doing, which is fill a cell with the immediate completion data, but then have a hover/popup that includes this information. I wasn't proposing to put this stuff into the table :) – Rahul Aug 19 '10 at 12:11
The idea is charming and very user friendly. However, the users I'm targeting this for are the hard-numbers type and need the exact info. – Dan Barak Aug 19 '10 at 14:41
Well, in that case let go the cute messages, but consider using summaries since they are really useful when quick-scanning an estimate. Your full blown report would be elsewhere, I assume. – Leonardo Herrera Sep 23 '10 at 21:12

Instead of percentages, you might want to use fractions. To put it another way, you might want to say that each person is responsible for `n` units of work, of which `x` units have been completed. You can display the total cell as a percentage, if necessary.

``````John   :  3  of  5
Paul   :  4  of  4
George :  0  of  2
You    :  _  of  1
------------------
58%
``````

Switching to units of work accomplishes two things.

1. It makes estimating much easier. (I'm assuming the users are estimating -- not measuring -- the amount of work done.) The number of choices is reduced from 100 to probably not more than 10.
2. It allows the share of work to be divided unevenly. (John's responsible for 5 units, while you only have 1.)

Here's another way to display the data.

-
Hmm, the stars suggests a rating to me, though. I'd shy away from using those to denote completion; I'd use a bar instead. – Rahul Aug 19 '10 at 14:41
Nice, Patrick. I agree about the easier estimation, but I'm forced to the stay with the percent. Even now I can divide the work unevenly (set in another place), but it's great you thought about it. – Dan Barak Aug 19 '10 at 15:05

Maybe you just need to clearly indicate what's being calculated.

``````Hans     50%  x 30% = 15%
Lotti    30%  x 20% =  6%
Jane      0%  x 25% =  0%
You     [80%] x 25% = 20%
-------------------------
41%
``````
-
Well, the last solution (image) does just that. – Dan Barak Aug 19 '10 at 16:11
@Dan The third image in your question doesn't have the " x 30% = " part. That's the critical difference. It shows how the rightmost number ("Overall") relates to the leftmost number ("Individual"). [Unless I'm looking at the wrong image.] – Patrick McElhaney Aug 19 '10 at 17:23
Right... it doesn't show the calculation as explicitly. However, I did feel it was clear enough for the users to make that extra leap. – Dan Barak Aug 19 '10 at 20:40