UI Design for Changing Multiple Records at Once

designdesktop applicationgui

I have a desktop application where the user has tabular views on some data records. Now we got the requirement to let the user select multiple of these records at the same time and let the him edit some properties of the selected records all at once in a separate edit dialog. The idea is

  • to change only the properties the user really want change

  • to keep all other properties unchanged

Furthermore, when the user has selected the records and opens the edit dialog, the properties with equal values in all of the selected records are shown in the corresponding UI fields, the other properties should be shown as "undefined" as long as the user does not start to enter something there. After pressing "Ok", the changes are applied to the records. This kind of UI behaviour is not "rocket science", we already found this, for example, in diagram editors (where you can select multiple drawing elements at once and change their properties.)

The problem is how to visualize the "undefined" state in an intuitive manner, especially for text properties. For boolean values, this is easy: we use just a tri-state check box. For number values, this is easy, too: the "undefined" state is displayed as an empty numeric UI field, and if there is actually a number in there, the state is "defined".

But how shall one design this for text properties? An empty text box field is actually not an "undefined" state, since many of the text properties can actually be empty. One could add a separate check box beside each text box to indicate the difference between "undefined" and "defined", but since our edit dialog contains already check boxes for boolean properties, this seems to be counterintuitive and confusing to the user.

If this matters, we are using Winforms (but I think this problem is not specfic to the actual UI framework).

Best Answer

I agree that a checkbox could puzzle the user.

My reaction to the problem of how to display an undefined text box and differentiate it from a valid but empty one is to use a placeholder for the undefined one and an empty one for the other.

The valid empty box will look normal to the user and the normal-ness will be reinforced when the user tries to use it. The placeholder box will have a placeholder message "type something here" that is greyed out or muted in some way so that it's clear to the user that it's not an actual value. This notion that it's temporary will be reinforced when the user enters the box and the placeholder text vanishes.

We see this behaviour frequently on the web so it should seem intuitive to the user and shouldn't make them think.

The other thing is that you could consider IF the users need to know there's a difference. If not, then both boxes could be left empty.

Related Topic