I think that both the fact that a task is collapsed and the means of collapsing/expanding should be visual (i.e. using a gesture alone to collapse/expand will make that feature feel hidden, and just because users stumble onto that gesture to collapse doesn't mean they'll notice what they did or remember what they did days later when they want to undo it). In the interest of simplicity (and not cluttering up the screen) it'd be nice to have the same visual element indicate collapsed and expandable and another state of that same visual element indicate collapsible. The sideways/downwards arrow can manage this nicely, though having it to the left of the task makes its use more intuitive, probably because it suggests a well known pattern, the tree control (think Windows file explorer). To make the use even more obvious, you could use a + or - within a box instead of the arrow. Having either of these to the left of the associated task name, involve moving all task names to the right so that the visual indicator stands out and the hierarchical appearance is preserved. In usability testing, I've found people very willing to experiment by clicking on a boxed +/- and most had an accurate expectation of what would happen. We've also used stylized arrows (elongated triangle within a circle); they were well understood when they were noticed, but in our case they were noticed less readily because they were embedded within a header image of a collapsible/expandable panel.
Animation will attract attention but it also tends to annoy. (At a recent usability conference, attendees facetiously wore buttons that read 'make it blink').
The suggestions of increasing the height or bolding, will be learnable but they don't give the visual affordance of clickability to the new user. Adding an explicit tap line will be understandable to the newbie, but all of these three ideas will garner comments from frequent users about the loss of usable real estate. For that matter, the arrow and boxed +/- would also reduce real estate but the amount will be obvious and small (one char per line, or two if followed by a space) rather than a whole line or an indeterminate amount such as with bolding.
Color (for the 92% who see it) and little pieces of paper underneath would be visually obvious and good for those who already know what they mean and would not reduce real estate. They only lack the visual affordance of clickability. I'm not sure whether color would increase visual complexity too much, my hunch is it wouldn't if you stuck to only two colors.
Once you add collapse/expand, people will have different preferred default behavior (all expanded, all collapsed, or however they last left it).
I'm glad that you're concerned about usability; your app's usability is currently good but on a small screen, every addition makes a difference. Thanks for the chance to weigh in.
Kathylynn (guest) 22 Feb 2010 01:04
