e-Commerce Submit Buttons

In the early days of the web, it was decided that there should be two different controls serving the general purpose of move-on-from-the-present-page.

Their different roles were reflected in their labelling. The anchor text in a hyperlink describes the destination page. By contrast, the label on a submit button described the action that applies to the current page.

On a modern e-commerce site, the submit button on a checkout page serves the role of both submit button and hyperlink – it processes the current page and takes you to the next page. Which leads to an interesting dilemma about button labelling: do we, on the address capture page, for example, label the button, use this address? or go to payment?

The majority of sites duck the problem by using the non-committal, continue? or next? as button labels. A few, however, get button labelling wrong and potentially confuse their customers, as illustrated opposite.  The buttons look as though they are labelled to indicate the action they trigger, i.e. as soon they are clicked the transaction will be processed and the payment debited.

In actual fact they dont, they take you to the payment page where you enter your credit card details. They are, in other words, labelled as if they were hyperlinks.

The clear advice here must be to avoid ambiguity in the labeling of buttons – make certain your customers know whether the button label refers to what the button-click action does or whether it refers to the page they will move to next.

Buttons on checkout pages are usually on the bottom right corner of the page. It is not clear where this pattern originates from but it may be that right alignment conjures some sort of page-turning metaphor.

The key with button positioning is identical to that of button design – it needs to be visually salient, visually isolated (especially from secondary calls-to-action such as back buttons) and visually consistent. Many sites duplicate buttons above and below the fold on long pages.