6

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).

  • 2
    I think this is more of a user experience issue, and thus more suitable for UX.SE. – yannis Mar 7 '14 at 14:30
  • I'm voting to close this question as off-topic because it's about user interface design, not software design. – Ixrec Mar 9 '16 at 10:09
  • 1
    @Ixrec: Well, UI design is a subset of software design, don't you think so? And I guess my question could be on topic for both SE sites. Nevertheless I just flagged this question for migration. Note the downvote button is for questions which are not useful, unclear or showing no research effort. Do you really think my question falls into that category? – Doc Brown Mar 9 '16 at 10:40
2

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.

  • I like this suggestion, but what if the user starts to type something into the box, and then wants to get back to the "undefined" state because he only accidentally entered something? Is there an intuitive solution (except pressing "cancel" and reopening the edit dialog again)? – Doc Brown Mar 7 '14 at 14:52
  • Could use logic. If field was undefined and then cleared, then show the placeholder. This would preclude letting the user store an empty field in an undefined box. Perhaps an (x) icon, to clear the field. Clicking this in any field could be used to set them (where allowed) back to an undefined state. Show the icon on hover to keep the UI clean. – Simon Minshall Mar 7 '14 at 15:01
1

You could use the system used by Windows. If you open a dialog to edit multiple items, the entries where both pieces of data match is displayed with the data, where they differ a "" or similar string is displayed. The user must select an individual item to edit the multiple-value entries, or they can overwrite it which will replace the field on all items.

If you look at Visual Studio project properties, this is readily apparent.Property page with different data

The Preprocessor Definitions on the 2 projects I selected are different, so cannot be displayed, so VS displays a static string. I can either overwrite them for both projects or I will have to select the projects individually to see what the data is. To me that seems intuitive and obvious - I cannot edit 2 different things at the same time in a single field, so naturally I will have to edit them individually.

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.