It was commonly thought that with bevelled edges and a change to appearance on hovering over, the vision of a real world 3-dimensional button could be carried online and users would push the button.
But is that still the case?
‘Skeuomorphism’ is out it now seems and flat design is in.
What is ‘skeuomorphism’ I hear you ask? It’s the emulation of objects in the physical world, which serves to take users to a graphical interface that seems familiar - knobs and dials for example, as familiar interactions. But they can be difficult to operate, can take up too much space on a site and don't always apply.
Flat design, with its flat shapes and blocks of colour is considered by some as a backlash to ‘skeuomorphism’. Advocates of flat design focus more on function and content, getting rid of any unnecessary detail. Flat design is fast, crisp and translates beautifully into responsive design so carries through to different devices and screen sizes well.
They both may be dismissed as passing aesthetic trends, but both do have their time and benefit.
So, where does that leave our lowly button? And does a button even need to look like a button?
An ‘affordance’ is a quality of an object or an environment, which allows an individual to perform an action. For example, a knob encourages twisting and perhaps pushing, while a cord suggests pulling.
And how do users know that the brightly coloured block containing text is a button? Windows 8 was not well received by a significant number of users with its flat blocks of colour in the interface - users could not distinguish buttons from information so were unsure what to do.
The conclusion we’ve come to is that flat design can work, but care is required and the common sense rules still apply:
- Make the button look like it wants to be pushed - Colour contrast to its background is important - Text should be short and describe the action of the button - Put it in the right place on the screen - more than once if necessary - And test, user test, review and think again.
As with many things, keep it simple and make sure users know what you want them to do – and to re-iterate the last point above, test it to check it works!