Website design guidelines: Start with some website button best practices and finish by downloading some for yourself
When designing a website, one of the most important aspects we look at is usability. And when we launch websites, we always conduct usability testing, asking testers to perform a set of tasks to see how easily they can get through them.
Buttons on websites can be interpreted in so many different ways and can often be the most confusing element on a web page.
- Not enough text can cause confusion as to what will happen when the user clicks the button
- Too much text can make the user misunderstand the call-to-action
- Images without explanation on a button can also be misinterpreted
The rule with buttons is that they should do what it looks like it will do, or behave in the way that you think it should behave. If you see a round doorknob, for example, you expect it to turn. For websites, having good usability means having clear, intuitive and logical navigation with no confusing or misleading links. It requires something that looks like a link to link to something; conversely, things that are not linked should not look as if they are.
Site designers who are more interested in the “look” of a site than its functionality often make two huge mistakes.
- They turn off or hide the underlining of hypertext links, removing the visual cue to the user that the links even exist; and
- They create images for section headings that look like buttons but, in fact, don’t execute an action.
If the user is expected to execute an action, use a button with a clear, unambiguous label, placed in a logical location for the desired outcome. Text links should be underlined and change in appearance once the user has visited that page. Many times, site pages or search results display so much information that it’s difficult for the user to keep track of the pages already visited or articles already read.
[text_ad]
You should also consider how people react to colors. Human beings associate the color red with “stop” and have had both positive and negative results in A/B tests. This is exactly why we do A/B tests! Other times, users will see something yellow before noticing the same thing in any other color.
There’s no exact science for these types of things. Different audiences respond to different colors. We have one client who’s red buttons outbeat every other button color during A/B split tests. This is after we were almost positive that red wouldn’t work, according to previous A/B splits we’d done with other clients.
Besides color and text, just make sure your buttons look good. A good looking button is an indication of being modern and up to date on whatever it is that you’re an expert in. Even if you’re specialty is soapmaking, a good looking website will differentiate you from the other soapmaking websites.
Luckily for everyone, there are tons of “free button” downloads all over the web, and I’ve personally used them on lots of projects. Here are a few examples, but feel free to dig deeper and find some that may work for you in your A/B tests.
Web Buttons in PSD & PNG (Pack of 60) →
Slick and Clean Button PSD Download →
Colorful Web Button PSD Download →
Free Button Collection PSD Download →
These PSD files are free and you’re allowed to do whatever you want with them. However, make sure to check before you use them on your website because some artists do ask that you request permission before using them for commercial use.
