Here’s a tricky usability question: how would you represent the actions of grouping and ungrouping clips on a timeline? (Un)grouping is used for changing the way selections affect a set of clips. It allows you, among other things, to separate and remove the audio from the video of a clip.
It is very hard to find any relevant prior art that could guide me for this metaphor (most applications don’t have icons for these, they are only available through menu items). Inkscape can get away with icons that show “drag handles”, but we don’t have those in Pitivi. (un)grouping is quite an abstract concept, given that it does not visually change the clips in any way, it just changes the way they react to selections.
The last two items in the image below are the current group/ungroup icons:
Here is my attempt at making new ones with clearer meaning:
What do you think? Do you have better ideas on how to represent this?
Note: the icons I made are pixel-perfect, the 1px black lines above the icons are not my fault (I think). GTK seems to add some sort of shadow, probably because it expects symbolic icons in that toolbar (but I can’t imagine a way to represent clip interactions without color).
Comments
14 responses to “How do you visualize grouping?1 min read”
What’s the problem with the icons as they are in the first picture? Is it because they physically separate the objects, which you think gives the wrong impression of what the tool actually does?
I think the first icons are perfectly fine. They communicate the action clearly by 1) having the objects physically touching, 2) grouping them with a single yellow border, and 3) using arrows to indicate the action (grouping together). I have no problem understanding what those buttons do.
The second set of icons, however, confuse me. The objects appear to be physically grouped together in both icons, which makes me think that both buttons involve the objects being grouped together. The fact that the border in the one icon is around only the middle object, which is also the only highlighted object, makes me think the buttons are about selection, not about grouping. When we work with computers, we’re used to our selections being highlighted and having borders around them. The second set of buttons look more like “Select all” and “Select none” then “Group” and “Ungroup”.
Again, the icons above seem to communicate their purpose quite clearly to me, and I don’t even use PiTiVi.
I tend to agree with rw, the second icons are a bit confusing.
Speaking of symbolic icons, what about something like this?
https://dl.dropbox.com/u/212852/2012-11-04-.png
Maybe something involving a chain (chained/unchained) ? see Gimp resize tool (with or without keeping the ratio horizontal/vertical).
Could also be a padlock icon.
i prefer the first icons or Ulisse’s suggestion.
I’m not confortable with the second set of icons which shows 3 tracks (instead of only 2) which leads to an additional conplexity to me
I agree with rw about the selection confusion. What does it look like with three different colour highlights?
Why not use the same icons as Inkscape?
I like your icons, the concept of grouping is pretty obvious there. However: Would it not make sense to only display one of those depending on the current selection of clips? Then a open / closed padlock would make sense.
Could be something like
https://docs.google.com/open?id=0B2YxHC52i0OaX1A3V3pjemc5Z1k
Have 2 or more distinct/discernible overlapping shape outlines, then colour/shade them to be separate and teh same for ungrouping and grouping, respectively. This avoids any need to include physical movement in the concept.
I felt that adding chains or padlocks on top of clips would be too much stuff to cram into a 24×24 (or 22×22) pixels grid.
However, Ulisse’s icons are pretty interesting. Can you share the source (hopefully in SVG)?
I’m not sure you can fully rely on colors to convey meaning. One of the reasons is people with color blindness or some other accessibility issues, another is the fact that it wouldn’t match what you’d see on the timeline (in terms of colors) anyway, and another would be that it wouldn’t allow us to eventually go down the “symbolic” route at all (though that one is less important I guess).
About the “why two buttons instead of one?” or “why not hide/show buttons?”:
Here is the source of my icons, obviously in SVG. Does anything else exists? 😉
https://dl.dropbox.com/u/212852/pitivi.svg
I have a question : does PiTiVi expose every functions through buttons ?
Othewise, should (un)grouping be exposed that way ?
If it’s an advanced user feature, then it could just be available only through contextual menu (plus better not having a button than having a bad one)
If you could consider that grouping IS actually an advanced feature, whereas ungrouping is NOT (i.e. a non-adbanced user want to keep only the video or the sound and ungrouping+delete is probably better that lowing down the track level you don’t want to keep -that case should not be rare I guess. Whereas grouping may be a more advanced manipulation of clips, like managing tons of clips ?). Then you’ll probably have to expose both since having only one exposed through a button can hinder the discoverabilty of the symetrical function i guess
@antistress: I’ve got two design principles governing this:
– All functions that are contextual to an item should be readily available for the user to discover. Contextual menus suck. I’m also preparing the terrain for eventually getting rid of the menubar entirely if I can.
– Every action should have a way to reverse it (undo/redo can’t work if you change your mind at a different time). As such, I do not consider (re)grouping an advanced feature, especially given that we will eventually have subtimelines (but that’s another button).
For now, I think I’ll use the icons that Ulysse kindly offered, because they’re visually quite superior to mine.
I’m reminded of the quote from Jakob Nielsen: “The time it takes a designer to choose an icon is directly proportional to the time it will take a user to figure out what it means.”
If you’re having a hard time expressing something as an icon, it’s probably already too late to come up with a good one. Some concepts just aren’t meant to be represented as icons.