4

What's the best UI element for "Reset to Default" for the fields in a form?

We have default text inputs in a form. Uses can edit the default text inputs, and we want to allow users to revert back to the default text inputs easily.

I can think of three solutions:

  1. A link to "Reset to default" enter image description here
    Pro: The link only shows when there's an edit. Therefore, the form can look cleaner.
    Con: No way to toggle between the default and edit easily.

  2. Checkbox to toggle between default and edit enter image description here
    By default, all checkboxes are selected. When users make edits, the corresponding checkbox will be unselected.
    Pro: User can toggle between default and edit easily.
    Cons:

    • A checkbox appears in every field, and it can make the form looks not clean.
    • The interaction is unexpected when users make edits.
    • It's unclear what it will do when unchecking the chekboxes.
  3. Use toggles to switch between default and edit enter image description here
    Similar interaction to the checkbox solution above, when users make edits, the corresponding toggle will change.
    Pro: It's clearly a binary choice.
    Cons:

    • A toggle appears in every field, and it can make the form not clean.
    • The interaction is unexpected.
    • It's unclear what it will do when switching.

What do you think of the above three solutions? I'm open to other solutions if it's more intuitive.

Thank you for your time and feedback.

  • 2
    So the input field will have some value, by default. The user can proceed with the default values, OR put a custom value. To put a custom value, the user will click on a field, that will clear the default value, and type something else. At this point in time, the user can also decide to undo his/her action, and decide to go with the default values only (the reason why we need the toggle/checkbox/Reset to Default provision), correct? Can a user just enter a 'space' and still proceed with the action? Can the default values be automatically submitted, in the absence of a custom value? – Chandan Oct 30 '19 at 7:13
  • 1
    Agree with @Chandan. In my experience, 99% of users know that deleting the inputted text will revert the PLACEHOLDER (default) value. – jhurley Oct 30 '19 at 13:41
  • 1
    @Chandan, yes, the description of your flow is correct. Some fields are required, and some fields are optional. For example, I imagine the title is required, and description and other attributes are optional. The default value can be submitted if users don't put in a custom value. – Julia Oct 30 '19 at 18:11
  • 2
    @jhurley Were you describing the interaction where users delete texts and it reverts to the default texts? I see two problems with this approach. 1) It's not clear that's how you can revert to default. 2) Some fields are optional. It means users don't have to put in any texts for the field. Therefore, I don't think this interaction can work in my scenario. Thanks for your input though! – Julia Oct 30 '19 at 18:14
1

Question: Link, checkbox, or switch? Answer: None of the above.

User generally expect links to navigate –that is, take them to a new location. Switches and check boxes set attribute values or states –that is, what something is like. That would be suitable if the app simply switched the text from one characteristic to another (e.g., bold versus normal font), but that’s not what it’s really doing. Setting to default wipes out what the user had entered and replaces it with per-determined text. It doesn’t just change what the text is like. It changes what it is. Also, as you imply, it’s unconventional for a checkbox or switch to change on their own due to user input somewhere else.

What you’re want is something that makes a command –performs an action than changes something that's represented somewhere else. That’s the job for a command button (or a menu item). More than other controls, a command button signals to the user “you about to do something substantial, possibly irreversible.” The clue that you need a button is that, without it, you need to add the verbiage: the link is labeled “Reset to Default” or the checkbox is labeled “Use Default.” The fact that you need to start with a verb indicates the system does a command. Usually it's sufficient if links are just the name of the location that the system navigates too (a noun) and checkboxes/switch are the name of the state or attribute the thing acquires (an adjective).

The button is disabled when the text is first shown with the default text, and enables once the user changes a character. Because setting the field to default is a destructive action, I recommend that once the user clicks Default, the apps changes the button to “Undo”. Clicking that, reverts the field to what the user entered had before, and switches the button back to Default. Editing the default text also changes the button from Undo to Default.

You are right to be concerned with clutter, and command buttons have the disadvantage of being visually “heavy”. You can mitigate this several ways:

  • Short label. A button labeled “Default” (here used as a verb) is probably a sufficient label. There no need to label it “Use Default” or “Set to Default” because the fact that it is a button means to does an action. Don’t label it “Reset.” That implies the button changes the text to what it used to be, which may not be the default if the user has edited the text on two occasions.

  • Lightweight button. It doesn’t have to be a full-size 23-by-75 pixel command button. Just about anything with a rectangular border and a centered caption will look like a command button. Bonus points fro rounded corners. Avoid a 3-D look and give the background a subtle neutral shade. small pale button next to each text box caption

  • Centralized button. A button for every field will be easiest to understand, but for true minimal clutter with a lot of fields that may be defaulted (not just two or three), consider a single button that acts on whichever field has focus. To default the field the user places the cursor in the field of choice (if it’s not already there), then clicks the button. If your users are regular users of this form and/or get some training, this is probably fine. Once they know this “trick,” they’ll probably remember it. If this form is not used so often, consider additional text. It can be beside the button rather than in it to keep the “weight” down. One Default button at bottom of form

0

The user needs to know that:

  1. Certain fields have default values and they will be saved along with the form
  2. Default values can be edited

If you have the default Title and Description as text and allow the user to hover and see an edit field around it they will understand they can edit that field. Having them as text on the first instance will make them understand that's the value that will be submitted. The 'X' next to the field once they start typing let them clear and restore the default value.

Depending on your title it would be clear to the user that that's how the entry will be saved, on my example of a note taking app, Note #109 says to me that I don't need to worry about a title as my note will have a neat unique identifier.

enter image description here

0

Use a button.

Reset to default is no state, so it should not be a switch, checkbox or radio button.
Resetting to default is an action and the best element for actions is a button.

If you want an indicator if a field is still the default, separate it from the action, e.g. give the input field a lightgrey background until it is changed and reset it to lightgrey when the button resets the value.

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.