Buttons are no doubt an important part of the UI arsenal - there's nothing else that quite suits an action than the satisfying click on a button. Whether it's confirming an order at the checkout, authorising transactions in online banking, or deleting your entire account from some social networking site, there's no denying that buttons get things done.

Buttons are your go-to for nearly every state-changing operation - where links go, buttons do. For the web designer, then, knowing a at least a little about the humble button is probably not a bad idea. All buttons operate in the same way - click, and you invoke the action emblazoned upon them. The one thing that varies greatly is the button appearance - and that is the focus of this article.

Default Appearance

Even the default appearance of buttons can vary greatly - left unstyled, a button will usually take on the chrome of the user's operating system - although in some cases browser choice will have an impact.

There are a few common features across OS and browser-specific UI elements. It's these common features that allow better cross-familiarity - you could go from Windows to OS X and still have a good expectation of how the button elements behave.

The shape of the button elements is universally consistent - a rectangle shape, about the same height as the text line height, with a little extra space for padding. Quite often the rectangle will have rounded edges, a visual softening technique that's particularly common. But, generally speaking a button will be a quadrilateral of sorts, and of a longer lozenge or torpedo shape.

The type used on the button is fairly consistent, too - default buttons tend to use a san-serif face, at a size a couple of points larger than the body text. On Windows systems, the type is normally set in 'MS San Serif' - a bitmap font designed for high legibility and consistency in button elements. Other platforms will tend to use a high-legibility san-serif typeface as well.

The use of colour is also consistent. It's rare that you'll see standard buttons in anything other than grey, or similar muted tones. There's often some subtle chromatic highlight for hover effects, but buttons for the most part are of quite a restrained appearance. A darker outline or bevel is used to give the appearance of relief.

So default buttons in general are designed as a low-impact, high-legibility UI element. These are fine for simplistic, general-purpose usage, but if we look at button usage in e-commerce platforms we can see that most use custom-designed UI elements.

Custom Buttons in Use

In the figure below we can see a variety of different button elements for key action roles in e-commerce roles. You'll notice that these buttons are very different to the default.

They share a common shape, and use of type - but these primary action buttons have been designed to have increased visual impact. The main differences include the use of strong colour, use of iconography and more varied use of type.

For the most part, the colour of the buttons for these primary e-commerce actions is defined by the brand - HMV use their distinctive pink, for instance. This is to ensure a more consistent brand storefront, but these colours used also have another, more useful trait: these are strong, fully saturated colours designed to stand out.

Bright oranges, yellows and pinks are great colours for attracting attention - and many e-commerce sites use these colours to drive the core purchase pathway. Some sites use colours less intense but better suited to their brand - this, I suppose, is a tradeoff between individual button impact and overall site impression.

Still, a strong action button like the above need to stand out from the page, and the use of strong, boldface type here helps. Some of the buttons' text is set as an image - this enables the use of any typeface (again, suitable for conveying a consistent brand). Others use text placed on a background - more versatile (and translatable), but with arguably less visual impact.

Another thing you might notice on some of the buttons is the use of small icons to indicate their usage - the right-facing arrow is commonly used to indicate progression, to lead the user through the site's desired steps.

Such small visual cues can indeed be important where you haven't differentiated between less important buttons on your site - if all your buttons are the same colour (for branding reasons or otherwise) - an arrow makes it clearer which button will take you to the next step.

Of course, if your brand permits you can use different colours for different classes of button - falling back to more passive colours (greys, paler colours) for non-core actions (editing steps, amendments, etc.) and reserving stronger hues for the core e-commerce steps - add to basket, checkout, confirm.

Emphasising these core actions streamlines the desired action path for a site - and although the effect may be subtle (most customers will find a less visually impactive button if they plan on making a purchase anyway) - if done right will increase conversion ratio by a small amount, in addition to improving overall user experience.

Conclusion

Buttons are a key part of interaction design as they are intrinsic to many desired outcomes and actions found in such projects. It's especially important to ensure your buttons are up to scratch for an e-commerce role, as success in those areas is defined by narrow pathways and actions - driven by interactive elements at their core. In a future article we'll take a look at the practical applications and techniques for recreating some of the elements above.

Next article : Designing Video Information Density for Optimum Audience Engagement

---