Best practice for a property inspector that also allows users to edit

Question

I am creating a UI that allows users to select and edit items and it works something like the following:

• A user selects an item
• An always visible property panel is populated with that items metadata (the data is presented in editable text fields). Typical metadata is: name, description, keywords, date created etc.
• If a user selects additional items then any metadata fields where all the values match will show that matching value. Where there is different data the fields will still be shown and will still be editable (with the option of an append or replace).

Note: the interface has to be fully scalable (it should still work when the user has 1000 items selected).

The bits I am struggling with are how to present fields that have multiple different values. Also do I need a save button at the bottom of the form or will users be ok with any edits being instantly applied?

Anyone know of any similar UI's that I can learn from?

Answer 1

You can display multiple values in the same field by either:

• separating the values with a comma and append ellipsis (...) if there are more than 2
• show just one value and ellipsis after that (or another notations to indicate multiple values)
• show no value, only the ellipsis (or other notation)
• it might also make sense to differentiate these fields with a different color

You can show the multiple values either on mouse over or on click (depends if you edit the field by just clicking, or pressing an "edit" button or link).

Editing works both ways - the question is what's the use case your users practice.
If they edit often, it might be that saving immediately is better. Alternatively you can solve this by well placed "save" button in the correct tab order.
If saving automatically, make sure to allow an undo.

Answer 2

Microsoft Visual C++ 2010 has a property panel that allows setting of properties on multiple items. They hit the same problem as you, and just gave up. Conflicting entries are blank, with no indication that there is a conflict (blank can be valid). I applaud you for having a go at this. I think it's a tough nut to crack.

I wouldn't use a standard form for the property panel. Instead I'd base the design on a table with one row per item-value pair. Then when there are multiple values, offer a show/hide button [+] in that entry, and gray text saying, for example, 'Edit all 5 values'.

This approach is actually treating the problem as a variant of Master-Details. Discussions/solutions linked to from there may suggest some other master-detail styles. Unlike normal master-details, in this problem the details only exist sometimes, so not every item has a [+].

Clicking the [+] button reveals the extra rows. Editing the gray 'Edit' text changes all 5 values, and the [+] disappears when you do this because they are now all the same. Also, because I know some users won't see the [+], I've given an alternative route to expanding the details, via the hyperlink on 'all 5 values'. Whether that link really is a good thing would need testing.

I've assumed that the different objects are being identified by number, but if they have names, that's even better.

At that point the user can if they want to type new individual values for each one. Or they can type in the usual place and change all five to the new value - and see the text change as they type.

Once the details are expanded, I wouldn't anticipate users having difficulty discovering the [-] to close the list back up again.

Yes you need a Save button, or much better - as Dan suggests - an undo. This is a sufficiently complex form that not having either will cause users grief.

---

Edit

If you have a large number of objects you can add extra levels to the tree, for example to group 1..100,2..200, or A..E,F..J,.. but for scaling to a thousand entries I'd give up on trying to view them within the one control.

So we've lost the [+] and the problem is just to show that there is more than one value rather than showing a blank as Microsoft Visual C++ does. Showing min and max values can do that. And show in gray to indicate that there is not one value for the field that all the selected objects share. So:

As ever, editing the value will affect all the selected records. It's necessary to show the number of items selected since the edit will change a lot of records. As it's no longer shown in line, it's been added above the table.

As you also offer the option to append a string, you may want to show if the end part of the strings match throughout, so that users don't end up appending the same string twice. This can be done by showing the end part that is the same in normal black font.