Tuesday, 10 August 2010

What makes a button a button?

Button design has evolved over time, from the dull beveled grey Windows 95 Start button to the shiny glass Facebook share button. When buttons started appearing on the web and computing in general, designers and developers were emulating physical buttons or 'push buttons'. The definition of a button according to the oxforddictionaries.com is "a small device on a piece of electrical or electronic equipment which is pressed to operate it". The key to this definition is that it reads "pressed to operate". This is what was emulated because, as users we could identify with pushing a button to start a process or turn something on.

Example 1: Over design?
Buttons are lost in this design.

Example2: Flat, styleless buttons
Is the magnifying glass an image or a button to start a process?

It seems some designers are challenging or perhaps ignoring button conventions. Some "buttons" lack the properties of a button. The call to action can seem diluted and/or the button is camouflaged within the overall design. It seems that 'push to operate' intuition is replaced with "What do I do next?" or "Where do I click?". The question I am asking myself and you is, have users learnt to look for new types or styles of buttons or are buttons changing because of design trends?

"Faced with the prospect of using a convention, there's a great temptation for designers to reinvent the wheel instead, largely because they feel (not incorrectly) that they've been hired to do something new and different, and not the same old thing." - Krug, 2006

Design and usability conventions shouldn't really be challenged unless you are sure that you aren't compromising the user's experience. Don't forget that user experience can impact on your reputation as well as conversion rates, to name but a few other areas that might be damaged as well as usability.

A button only functions as button if the user identifies its affordance. Users are often subconsciously looking for a collection of properties that make up a button.

"An affordance is a property, or multiple properties, of an object that provides some indication of how to interact with that object or with a feature on that object. A button has an affordance because of pushing because of its shape and the way it moves (or seemingly moves)." - Saffer, 2007

Example of properties associated with buttons:

  • Style (e.g. drop shadows, emboss, letterpress)
  • Colour
  • Size
  • Call to action (e.g Button label, title attribute, Symbols)
  • Positioning on the page
  • Hierarchy of information

However use of mobile phones for example, particularly with touch screens are changing the push feel of a buttons and evolving away from the traditional button that had to be pushed in. This change may have lead to the flat button style (see example 2) but if a button retains enough affordance the user will still recognise it.

What is important is the granular information, the affordance that the design of a button feeds the user. It shouldn't take the user time to work out where or what is a button on the page. The ease of use comes from recognising the next step in a process and understanding how to initiate it. Conventions help us to design buttons that are more likely for users to recognise.


Don't make me think - Steve Krug, 2006

Designing for Interaction - Dan Saffer, 2007

What do you think about button usability and the points I have raised in this post? Let us know with your comments.


Anonymous said...

Short & sweet and well put. I plan on sharing this with my print designer colleagues who are trying to transition into digital design.

James Morris said...

Thank you very much for your comment. I am glad you find it useful and I hope it helps.

Abi Jones said...

I think that beyond the general idea of "style" - what helps make a button a button is the concept of depth. And buttons with depth definitely exist in mobile devices.

Marielle Winarto said...

Nice post, the question whether a specificly designed button still comes across as a button is definitely worth thinking about. I've learned a slightly different notion of 'affordance' though, more related to possible actions than to perception (i.e. 'something is a thing that can be pushed, moved around, stretched, eaten, etc.').
I'd try to keep in mind as well that in the real world, active perception is more natural than simple one-way information processing: objects are manipulated and tried, and that help to discover their properties. The same principle applies to software/web design: if an objects responds to mouseover events, shows reaction on click, or even reacts to touch (there's some interesting research going on in tangible interaction), that can be beneficial. And if something makes sense within its use context also influences the user's expectations. The only way to really find out what happens, is to see it, so 'when in doubt, always test with real people'. ;)

Post a Comment