Wherever you go on the web, you have to interact with a range of buttons. From call to action buttons, to scrolling buttons, websites are full of them. But what are the best practices for designing these buttons? And can button deign really influence your website success? Well, here at Pumpkin Web Design Manchester, we are Manchester’s leading web design experts. As a result, we have produced this guide to web design and website buttons.
Button types
The first thing you should consider when designing your website buttons are the different types of website button. These include:
- Flat buttons
- Raised buttons
- Toggle buttons
- Ghost buttons
Each type of button has its own range of advantages and disadvantages, which means choosing a suitable button, for your own purpose is important. And it’s also important to use a range of different buttons, as the different styles will complement each other, and also influence user behaviour.
Flat buttons
Flat buttons are simply buttons that do not lift up from the page. This means that they don’t detract attention from the content, as they simply fill with colour when pressed. And usually, this colour will be pale, to fit the minimalist theme. These are often used when agreeing to terms and conditions.
Raised buttons
The most common type of button is the raised button. Usually appearing as a full colour, rectangular, or rounded shape with text labels in the centre, this is the typical website button you will interact with most often. From call to action buttons and sign up buttons, to simple navigation buttons, these can help guide users through the website. For that reason, they are usually filled with a contrasting, or complementary colour, that really stands out from the page to capture attention. They might even change colour when clicked, as a nice little interaction reward.
Toggle buttons
Usually reserved for adjusting settings, toggle buttons can be useful for your business if you are creating a form for users to fill in. A toggle button can simply move from left to right, to answer yes or no. This is more interactive and rewarding than a simple check box, and it can be very useful. At the same time, most of your users will be familiar with the toggle button from both Android and Apple devices, which means you won’t have any teething issues.
Ghost buttons
The final button option is the ghost button. These are usually a rectangular or rounded shape, just like a raised box, but instead of being filled with colour, they have no background colour. This means that they simply use a thin white or black line to define the shape, with the text label in the centre. These buttons do not tend to attract attention, and as a result are often overlooked. However, there are some great ways to use ghost buttons, including:
- When you are giving users a choice to sign up, the negative option should be less eye-catching that the positive. And this means that a ghost button can be perfect
- Secondary options should be less bold than the call to action, and a ghost button is the perfect way to keep the attention focused on the main call to action.
Web design and website buttons: considerations for best practice
Once you have decided on the type of button you need to use, there are other considerations for your web design. These include:
- the size of the buttons- your buttons need to be noticeable and attract attention, although they shouldn’t be too large. Try and get the balance right for your website.
- responsive web design- if your website is responsive (and it needs to be) your buttons need to be practical for use on a smaller screen
- the order of the buttons- the positive step forward should always come above the the negative, and when horizontal, should always be on the right. Even though we read left to right, it is usually easier to navigate to the option on the right hand side, near the scroll bar, and uses less user interaction.
For more information or advice about web design and website buttons, get in touch with the experts today, here at Pumpkin Web Design Manchester.