techblog 

While working on some simple wireframes for an upcoming development project, I was wondering whether there was much out on the web about button placement and style from a usability perspective.

Apart from information on how people tend to read web pages (in an F shape working from top to bottom, tapering to the left) and Apple’s UI guidelines (seemingly placing the most important button on the right hand side) I couldn’t find much, so thought I would post my thoughts on the matter.

The context: a form (as part of several steps) with three buttons, one that take a user to a previous step (”previous”), one that takes the user to a further step (”next”) and one that cancels out of whatever step process one is in (”cancel”). My examples below are a little contrived, but they do illustrate my thought process.

As styled below in simple form, there is little indication which button is the logical next step at a glance (based on the fact that people usually don’t read things when looking at a page). Some obvious initial problems are the buttons are too close together, and the cancel button really is a different action when compared with the other two buttons.

By moving the cancel button to the right things become a little clearer. Some people use angled brackets on buttons to indicate direction of flow, which can help visually, as people interpret symbols more intuitively than words.

This still causes more problems, as not only is the most important button in the middle, but the semantic meaning of the button is not clear. “Next” and “previous” what exactly?

Looking at the most common usage on the web (paging through search results) “next” really indicates that the user is expecting more of what is displayed currently on the page, especially when used along with “previous”.

Changing the button labels to something more meaningful like “go back” and “continue to next step” make thing a little clearer.

But based on the idea that people read a web page in an F, the buttons are still in the wrong position, as the button that comes into view first is the go back, which isn’t the most important.

If we reverse these to make the most important button first (continue to next step), we are then faced with the problem of both arrows diverting attention to the space between the buttons.

These angle brackets are most often used when paginating through similar records, but in this instance they are being used to indicate what is the next step going forward. If we replace the angle brackets with a different visual indicator, such as more emphasis on the primary button, we solve this problem.

Another benefit of putting the primary button first is that if the user hits the enter button with focus within an input box on a multi-button form, often browsers will submit the first button they come across.

Words like “next” and “previous” can be used when paginating through records along with angle brackets, but are sometimes not totally appropriate when used in other contexts.

I realise the examples above are all purposefully simplistic, and within the context of a step within several steps. On most forms on the web things are a lot simpler, so often just a single button is used, and labels like “submit” are perfectly meaningful and suitable. It’s all about considering the context.

So although buttons seem a minor detail within the greater context of a web page, taking button style and labelling into consideration is important, especially on forms with multiple buttons. By using suitable and more semantically correct labels, good visual indicators, and considering meaning within an overall context, one can much improve the usability of a form.