strategies for applying properties to many items

Question

I'm working on a web application where one of the workflows centers around the configuration of a large number of items. An important part of this configuration is applying one or more properties to each item or collection of items.

• These items (hundreds of them) are hierarchical and will be presented in a tree interface.
• The properties (tens of them) are split into a smaller number of categories.

A common approach to such a problem would be to break it up in two steps. This is how applications like MP3Tag and iTunes handle batch editing of metadata:

1. Build up a selection selection of items (eg. by placing a checkmark before each one)
2. Select a property to be applied to all items in the selection.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Because the selection of items could become really large, this may become unpractical. It's very hard to oversee the selection (it may not fit in a window). There could also be an increasing risk, or sense of risk, of losing that selection by accidentally clicking the wrong target or even hitting F5.

Therefore I'm currently evaluating the Lightroom tag-spray approach. You would first select a property. This puts our cursor in a "mode" where clicking an item in the tree would apply that property. Because you need to be able to interact with the tree and any other item on the screen, this would only work if you click a designated area. Currently applied properties will be displayed alongside each item.

This approach would make it easier to walk through the tree and apply various properties as you go. However, it works by putting the interface in a mode that will be hard to convey. I'd like to avoid custom cursors and even then the current mode of the UI would be slightly unclear.

What I'm looking for here is this:

• Does anyone have experience using the "tag spray" approach outside Lightroom and was it successful?
• Are there other possible solutios I should be considering?

Answer 1

If you like the opposite approach of first selecting the property (or tag), and only afterwards selecting which items to apply it to, you can use a button next to each item. Something like "Add property".

^{download bmml source – Wireframes created with Balsamiq Mockups}

If the property has no value (like a tag), then you can show it next to the item, with a "Remove" button. That way, the state the added property is clear.

You can also consider drag-and-drop. Just be careful of the pitfall that drag-and-drop offers little affordance. You would also need to supply a regular-click alternative, as not everyone would always be able to use it (think of someone using a track-pad on their laptop).