Buttons can play a big part in how visitors interact with a website. They come in varying shapes, sizes and styles but there are a few things to consider when designing buttons:
- Use of Icons
- Look and Feel
- Behaviour
- Importance
- Consistency
Use of Icons
Using icons as part of buttons can help improve usability by providing a visual aid making it more obvious to the user as to what function the button provides. Below are examples of buttons incorporating icons and shapes to do just that:
One of the most common uses of icons in buttons is to include an arrow to indicate that the button guides you to the next or previous step or page.
Other common uses seen above are an up arrow for uploading, down arrow for downloading, play icon to for video playback and magnifying glass for search. As long as the icon makes sense and doesn’t confuse the user then icons can definitely have a positive impact on usability.
Look and Feel
The vast majority of buttons are wide and thin to accommodate one, two or three words of text. Now and again you will come across buttons that are square or bigger than usual. As long as it is clear that a button looks clickable and is clear in what it presents then it will certainly help improve usability.
One of the biggest observations is the vast majority of buttons have rounded corners. Some bigger than others. This really is the typical style of a button. Using this as a standard when designing a button is a good place to start as it will be immediately familiar to the user that it is indeed a button.
Behaviour
Here at Inspect Element, I’ve looked at button behaviour before. It is important that design of a button includes a hover and active state as it can go along way to conveying the appearance of a button.
Physical Buttons
Think of a physical button such as those on an mp3 player, television remote control or a computer keyboard. Essentially this is what a button in web design is emulating.
Hover State
With that in mind, the hover state is the closest interaction on the web can get to the sensation of touch. Physical buttons are usually raised so they are easily accessible to touch. Remembering this when designing a button, design a hover state to improve usability. Common techniques include changing the colour or making the original colour darker or lighter.
Click State
Keeping the physical button metaphor, a click state also adds to the sensation of pressing a button. Again, make this different from the hover state so that the user knows they’ve clicked a button. A common way of achieving this is to use an inner shadow to give the impression of the button being ‘pushed’ in.
Importance
The importance of a button will have an affect on the design. Using a different colour that grabs your attention is a good way of increasing the performance of a button. Increasing the size of the more important button(s) is also very effective.
As can be seen on the Squarespace homepage it is obvious that they are encouraging visitors to try their service for free above taking the tour which is a much smaller and darker button underneath:
Over on the Paramore|Redd homepage they clearly want you to sign up for enews more than anything else due to the size of the button, typography used and emphasis on the embedded icon:
Using the example of colour, Postbox‘s goal is to convert users to either download the free trial of their app or purchase a copy. The red buttons at the top of the page really catch the attention of the visitor:
Consistency
It is important for all buttons on a site to retain a certain level of consistency or else you risk confusing the users into trying to work out what is or isn’t a button.
They shouldn’t have to work in order to find out what they can click on and what they can’t. The best buttons are the ones that integrate into the design and are obvious to the user what function they serve.
Conclusion
There is much more to think about button design other than just making them look pretty. Considering icons, colours, wording and behaviour too can go along way to improving the usability of your next web design. It is worth noting that it is one of the easier ways to do so and is often overlooked.
Tweet
Excellent stuff man.
I actually wrote a piece a while ago on download buttons and how to make them usable, but this post from you is great and even more usable.
Spot on!
Really good read: I currently work in Financial Services looking at user journey and visual signposting in transactional journeys, and this has given me some good ammunition!
I’d add that that the “on” hover state should be distinctly more “on” than the off state. Colour could be brighter or more saturated. Avoid making the tone darker, unless the text is light, as you don’t want to reduce contrast.
Very good article. THX… Usability makes the difference and should be THE webdesigners’ big concern. This article makes me ask the following quaestion: shouldn’t usability also be inspired by web accessibility · http://en.wikipedia.org/wiki/Web_accessibility
This is a great article on usability. Design without the end user in mind wouldn’t be very efficient really.
Big buttons help a lot.
I’d like to see more e-commerce buttons. Many of the above sites are for web applications, which typically have one and only one conversion – get people to download / signup – what about E-com stores that have many different types of actions, many diff buttons on a page, and how those interact in that space. Cool article I appreciate someone taking the time to examine a tiny albeit important UI feature
Great article. Agree on the larger buttons.
Thank you for the useful tips. I agree with all of them but I do have to comment about the buttons used on this blog. The mouseover states make the buttons look like they are unavailable. I have never seen a button to fade out on mouseover on the web, ever.
I’ve seen nice TomTom ordering app, where all buttons looked the same and they were in unpredictable places too. It was so crazy, that I couldn’t look at that form and closet the page
Vitezslav: Do you have a link to the page you are talking about? It would be good to have a poor example of button design as a contrast. Thanks.
Very useful and very good written! Thanx for sharing the infos!
Very concise and well written. I have to agree, though, about your hover and active states. The degree of change you’re showing there is almost too subtle.
I agree, in the sprite image, the differences look very subtle but if you actually use the button in the tutorial then you will find that there is very noticeable difference.
Thanks for those points Tom – all very well made.
Inexperienced designers are always keen to push the boundaries on their designs – but when the “originality element” makes the button “counter-intuitive” then it’s not a good thing.
I just spent 3 years working with a company on their EPOS interface and in the past, the UI had been all icon driven in the past. However, because of a lack of resource, a lot of the button faces consisted of the button label as a word and an “under-construction stick man” underneath!
Totally agree with you – if you’re going to have icons they have to clarify meaning, not introduce confusion – not an easy thing to do once you’ve done obvious stuff like “Home”, “Print”, “Save”…..
great tutorials, thank you very much.
I love the click states, like the one on Apple’s site, its such a neat little detail.
Question: sometimes when I create the rollover/click effect, I notice that my buttons need to “download” first before a user hovers…is there a quick way to preload these images without using one of those JS preloaders?
Victor, don’t use Javascript to create rollovers for buttons. Use image sprites as detailed in this tutorial.
nice article, thanks
Great articles. Those buttons look very good
Good article…thank you!
Thanks I was searching for this about buttons. Also is important to be written text on bottom done with css styles.
simply and awesome post and lots of new things comes together. TOM, great share and thank you so much
Great button tutorial. Big thanks for you guys.
This is an excellent point. I have been researching this for a bit and it seems that every article, in the end, just says, “hey, there are three states of button behavior”.
But..
Has anyone actually written an article with some substance? With some interesting aspects on techniques? Is it more usable to have a dark button with a lighter rollover state? Or vice versa? What about ease of use? Does one solution offer better recognition than another?
THAT is the type of article we need… otherwise, this just tells us that there are three button states.
Great stuff. Thanks a lot
Great stuff, Thanks!
Thanks very much i found this very interesting!
Nice article Tom. Just wondering what your thoughts are on text-based buttons? Ie using a just a plain text link to submit/cancel or navigate through steps in a form. I’ve just been discussing this with the guys in the office here and I’m very much against having these minimalistic style buttons, because they simply aren’t as obvious as a proper button (3 states) and they can get confused with the behaviour of hyperlinks. I think this especially applies with call to action style buttons such as “Submit”.
Really awesome article… it’s going to be essential for me to have active states in my new layout!!
I’ve never really put any real thought into designing buttons… but I will now