The IC Creative Guide to Creating Buttons for Enhanced User Experience
IC Creative is the leading recruitment partner for the most recognisable names in the UX industry; they boast some of the most knowledgeable and experienced UX recruitment consultants available.
In the world of designing for user experience, one of the most important aspects and most easily overlooked is the design of buttons. It might seem obvious, but getting the button design right is a vital piece of the usability jigsaw.
What you will find below is not an exhaustive list, nor is it a technical manual; it is simply a few tips to keep in mind when designing buttons for a website. Apologies if some of what follows seems a bit obvious, but the best advice sometimes is.
Appearance is the key. Give the button a 3D appearance so it looks like it is an actual physical button that you could reach out and touch. Importantly, make sure the button has a hover state and an active state, using subtle changes in hue and shadow, to enhance its presence and make it seem more physical. Here’s some advice on how to create a Slick CSS3 Button with box-shadow and rgba.
Giving it rounded corners helps differentiate it from a label. The rounded corners aspect has become a standard image and what the users expect to see.
The use of colour to make it stand out and get it noticed can be helpful, what’s the point of a white button on a white background? Consider, also, what the colour suggests to the user, for instance Red = warning, Black = uniformity, Pink = for girls (?) The use of colour and variations in size can give buttons importance; making them stand out more and making the user want to click them.
Wide, thin buttons are popular, with one to three words of text describing what the button does or where the user can expect to be taken upon clicking it. The shape is a lot less important than the appearance of clickability and what it represents.
Some sort of icon can be used with the text: an arrow to show that the user is heading for the next step or page; a magnifying glass for a search function etc. Just make sure that the icons are recognisable to avoid confusing the user.
The most important advice is: keep it consistent. The user doesn’t want to have to work out what is a button and what isn’t. Don’t go mad with button design, make it obvious what the function of each button is, and make sure they fit in flawlessly with the rest of the page design. They’ll be more attractive and won’t spoil the overall appearance of the site; which is, after all, the whole point of UX.
Visit IC Creative for User Experience, UX jobs and recruitment services.
