Guiding with button design

By adding some simple styling to your buttons, you can help guide your users through your forms. Often, when two or more buttons are in close proximity to one another, there is at least a primary and a secondary action. I recommend making the primary button more prominent as a way to help guide your user to the proper response.

Make the primary action more prominent

If you are putting two or more action buttons near each other, it is important to add visual weight to the primary action. This will reduce the risk of errors and provide a visual cue to help the user complete the form. I have included this example in my sample files so you can download it and see how the form works.

In Figure 6, all three buttons have the same visual weight and graphic styling. However, this is not ideal because we want to de-emphasize the Remove option to the user because it is not the primary use case. You want the user to enter the account information and click Save. This is the primary use case, and this is why the Save button is placed first. The remove operation will occur; that is why the button is there in the first place—but it will occur less often than the save operation.

Figure 6. All three buttons have the same graphic treatment.

You can use your button design to help guide your user to a successful completion of the form by providing more emphasis to the Save button and less emphasis to the Remove button. In Figure 7, to provide the visual weight to the Save button, I have used a bold font and a raised border. To provide the contrast and to de-emphasize the Remove button, I have used a regular-weight font and I have set the appearance to No Border.

Figure 7. Different graphic treatments help guide the user to the proper action.

Also, by setting the primary button to Raised Border, I have created a greater affordance for clicking. By contrast, the flat Remove button has no affordance for clicking.

What is Affordance?

The term affordance is used to describe how a property of a physical object will influence its function. For instance, if you put a handle on a door, you are affording the pulling of the door. If you want to afford the pushing of the door, you can replace the handle with a flat plate. When you put a flat plate on a door, you are said to increase the door's affordance to pushing.

When you work with interactive forms, you need to be aware of a few perceived affordance issues. In the previous example, you saw how creating a raised border around the primary button increased the affordance of clicking. Along with the other graphic features, this increased affordance will help to guide your user to a successful completion of the form.

Page 3 of 5

Previous Page

Next Page