Zoda Design Blog
The Basics of Buttons
You may not realize it but the buttons on your website are incredibly important. While people generally browse with a specific purpose in mind, they still need direction once they reach your website. Have you given any thought to what you’d like them to do when they get there? Think of it like this – once they arrive your website should walk them through the story of your company. If you have a clearly laid out journey, their experience with your website and your company will ultimately be a positive one. If they arrive and don’t know where to go or what to do, they’ll likely leave very quickly! You can guide their journey with well-placed and well-designed buttons.
Here are some tips for better buttons:
Make it Big!
A big button will get noticed and it will not be lost amongst all the other important information on your website. There’s a limit, however – you don’t want to make it seem out of scale with the rest of the website design.
Correct Placement is Crucial
Where should it go? There’s usually an obvious location for it that works with the flow of your site. They should almost always come at the end of a form, to the right or just below a call to action, or at the bottom of a page. This type of placement follows the natural path of how users read and interact with your website.
Color Me Clicked
Using a specific color in your design for just buttons is an excellent way to call attention to what you want users to do. This color should be bright and noticeable – try yellow, blue, or green if it fits with your branding. Overall, you should select a color that is complimentary to your main branding color. Check out color.adobe.com if you need help finding a complementary color.
To get your button noticed, the use of contrast can help a ton. You can create contrast with color, text weight and size, the shape of the button (as it relates to the background or the rest of the site), button animation, shadows and/or gradients, and whitespace.
Use a Standard Shape
People are used to rectangles and circles. Having a button in a star or other shape may not get it the attention it needs, because people will not automatically assume it’s a button. Rectangles should be your go-to shape but you may also choose to use circles if it fits better with your design and branding.
Make it Touchable
On mobile devices (where people are using touch screens), allowing significant whitespace around the button will give people the ability to touch it with ease (and they won’t have to worry about accidentally touching something else). On the desktop version of your website, adding some styling to the button can make it look touchable, as well. Try a subtle shadow to “lift” the button off the background, or add some padding (the space between the edge of the button and the button text) to make it stand out. Additionally, hover actions can also encourage the user to click!
Tell Them What To Do
Each button should clearly indicate what will happen when the user clicks it. Text such as “Create an Account,” “Add to Cart,” or “Read More” are especially helpful. Be careful, though, when using text like “Click Here” – I often find that it’s not descriptive enough for users and they may not know what’s going to happen next!
Make Them Special
Your buttons should have a specific look, and no other elements on your website should have that look. Making this error will cause users to be confused and wind up clicking on the wrong items! Using an accent color that is unique to your buttons will help a great deal with this.
Good Luck Getting Clicks!
Take a look at the buttons on your website and consider adjusting them to see what effect it has. You may be surprised! Feel free to email me at firstname.lastname@example.org to tell me your results!
Owner & Web Developer
Jessica Kelley is a web developer from Flint, MI, and is also the president/owner of Zoda Design. She has a Bachelor's degree in education from Eastern Michigan University, and a Masters of Library and Information Science from Wayne State University. She has been doing web design as a hobby since 1999 and finally decided to do it professionally in 2012. What to chat? Shoot her an email.