✎ Technique: Differentiating controls

Placement of controls affects their ease of use. For example, for a search feature, the “submit” button should be positioned right after the input field. Appearance and positioning are particularly important when providing a control that supports “destructive” actions, such as a “delete” or “clear” button. In these cases, ensure that these controls are clearly differentiated .


This example shows two closely spaced buttons, one to submit the form and one to reset the form fields to blank. The buttons are similarly sized and they’re positioned close together. So users could inadvertently select the “Reset Form” button, and they’d have to re-enter their information.

two similar blue buttons of the same size, very close together, with the text submit and reset respectively.

When juxtaposing two controls with potentially negative consequences, use two distinct controls. In this example the reset button is red, diminished in size and well spaced:

In this version, the reset button is red, further away and smaller