Internal Errigal Collaboration Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Clear + Reset Buttons ======

Clear and reset buttons (mostly reset buttons) are used across our apps to remove selected filters on a form and effectively start from scratch.

An example of the Clear button in use is in the Support Request application on the My Tickets page:

{{:design:screenshot_2021-08-19_at_10.52.03.png|}}
//Screenshot taken 20210819//

An example of the Reset button in use is in the Contact Management tool in the SNMP Manager:
{{:design:screenshot_2021-08-19_at_10.55.25.png|}}
//Screenshot taken 20210819//

===== Reset Button =====

Excerpt taken from NNGroup blog:

''The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.''

Why you shouldn't use a reset button:

  * Reset is a highly destructive action on web forms.
  * Why would a user ever want to clear a form? It's highly unlikely.
  * It's often faster to edit existing data than to start from scratch.
  * If they hit the button by mistake due to its placement, they've lost all of their work.
  * The extra choice of pressing the reset button adds to the user's cognitive load.
  * Reset should behave like refreshing the page, everything related to the form should reset to the default state.

When reset is useful:

  * When a form is repeatedly filled out by the same user. For bulk user creation for example. I.e. for data entry type tasks.
  * When a form has good default parameters that are helpful for the user. If the user has edited the form too much and wants to get back to the best options, they can then click reset.

Should I use a reset button?:

  * Is this for a repeating task i.e. data entry?
  * Does the form have helpful default parameters that would be useful to the user?
  * If No = Don't use reset
  * If Yes = Use Reset but clearly positioned and styled to differentiate it from Submit.

===== Clear Button =====

  * Similar to the reset button the user might click this in error and lose their data/form selections.
  * Adds complexity and can clutter up the UI.
  * Clear will clear any selected filters but will not clear the results data list.


===== Useful Articles =====

  * [[https://www.nngroup.com/articles/reset-and-cancel-buttons/| Reset and Cancel Buttons - NNGroup.com]]
  * [[https://design.wegalvanize.com/p/guidelines/clear-vs-reset| Design Guidelines - Clear VS Reset]]
  * [[https://apps.labor.ny.gov/ux/doc/v1/design-clear-button.html| Clear Button Anti-Pattern]]
Sidebar

Internal Errigal Collaboration Wiki

User Tools

Site Tools

Page Tools
