Principles of good Button design
It took Facebook designer, Hugo van Heuven, 280 hours to redesign the Facebook “Like” button from its old form to its new.
That’s insane, right? That’s way too much of time spent replacing the thumb with the f-logo and making the background bluer. However, as it turns out there is more to it than the eye can meet.
The Facebook Like button is viewed 22 billion times per day. That’s more number of view than any top-notch celebrity receiving. So now you can imagine there was a huge pressure on this tiny little button during its revamp.
There were all kinds of design constraints that needed to be kept in mind. Some of them being -
- The new button had to work within specific height and width parameters. The button viewed across 7.5 million websites per day had to be redesigned such that it could be embedded for consistency with ease.
- The new button had to work with all the different foreign languages that Facebook supports.
- One had to be careful of not using any gradient for background without simultaneously also using fallbacks for the all the old browsers.
- Facebook wanted a brand makeover and they wanted the new Like button to reflect that. Hence, the new design had to let go of the highly popular thumb icon and make the new icon nearly as identical as it appears on the top of fB page.
- Choice of colour was another factor. Whether to use grey, blue or red. If blue, then which shade? Colour, after all plays a leading role in defining user behaviour.
That was the story of the Facebook Like button. So, you see, designing buttons is not easy. The buttons offering the most trivial of the functionalities, even they are complex to design. Because, there are just too many constraints that needs to be kept in mind.
I have highlighted some of the constraints below that a Developer/Designer needs to keep in mind while creating a button.
Design for a button’s various States
Designing a button for its default state is not enough. To truly reflect user’s interactivity with a button — designing for all its other states like — hover, pressed, disabled, is equally important.
Reconsider using a Ghost Button
Ghost buttons have a thin border and a text label that sits within the transparent body of the button. Ghosts buttons are hard to see particularly if their contrast with the background image is poor. A huge threat to user accessibility, their potential impact on conversions is the one that can cost businesses money.
Make buttons Responsive
A small button on a large screen can get difficult to locate. Similarly, a large button on a small screen is obtrusive. Design responsively.
Buttons need to be Universal
It is our responsibility to expertly craft objects that are usable by all the people irrespective of the browsers or devices they are using.
Creating Themable buttons is always an added bonus
A dark-coloured button designed for a light-coloured background may not render well if the background colour of its container is changed in near future. It may also pose accessibility threats. The rework needed to redesign a button each time any colour modification is made can be too high. Using CSS preprocessors like SASS can help create atomic design systems and also help design components that are easy to build, scale and maintain.
In summary, I would say that designing buttons involves a lot more than merely choosing pretty colors. A button should be designed for all its states to accelerate efficiency. It should be designed for a global audience — including the ones still using rudimentary browsers, the ones with visual problems, the ones preferring phones over laptops. And lastly, it should be made as modular as possible so that it can seamlessly scale along with its system.