I have an app that contains a list of records. Below that list are the attributes of the currently selected record.


On the left are checkboxes. All checked records can be edited at once with the "Edit checked" button.

How should the "Edit checked" GUI below the list look like?

I would really like to reuse the default GUI below since I have a lot of them for every type of record my app has. But I would need to indicate which attributes are equal in the checked records, which onces are not and which ones I changed.

  • Could you upload a Screenshot with English language for the below GUI? Else, can you include a translation? – Swapnil Borkar Oct 10 '15 at 14:23
  • 1
    I changed the screenshot. – juergen d Oct 10 '15 at 14:29
  • 1
    I'm reminded of solutions that design applications use. When you have multiple objects selected, the attributes panel will display the setting value if all selections share the same value, and show "--" or blank fields if they are not the same. I'm not sure what you mean by "indicating which ones I changed". – Sullivan Oct 10 '15 at 16:27
  • By indicating which ones I changed I mean it would be useful to see which attributes I edited before I click the Save button. But that is just nice to have. – juergen d Oct 10 '15 at 17:07

I'm going to piggyback on Sullivan's idea of using '--', because it's a very valid UI pattern.

The only details I would add:

  1. When field value is changed, then outline the field.
  2. If user overwrites "--" with another value, but the changes mind, then when user hits backspace to delete the new value, "--" should return. If the field contained a value other than "--" because it was equal across selected rows, then that value should return.
  3. If the field with equal value is dropdown, then indicate the previous common value by bolding it.

Following this convention would also let user figure out which field contain equal value without over-complicating the UI.

User entered "New Value" and changed "g" to "kg". If user deletes "New Value", then the yellow highlight would disappear and the field would revert back to previous value. enter image description here

Since backspace doesn't work with dropdown, you'd need to use bold/italic to indicate previous value. enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.