We all use buttons in our digital assets. They are our most critical element in creating a call to action. We want people to subscribe, join, download, and give. We are even so demanding to put “now!” with those requests. Yet we often miss the mark. We design and place buttons in ways that make them difficult to understand. Use these four tips to create the best buttons for your website and social media platforms.
Unfortunately we have a problem when it comes placing a button. Our first inclination is to place it at the top of the page. We want our visitors to see it and quickly click on to the next step. Yet our users are often cautious and thorough. They read all the content on the page. This means the button you put at the top of the page may no longer be visible. They may remember it and will scroll back up to it. But why make them work? Place the button as close as possible to the content that will convince them to click it. Note this is one of the many traps we fall into because of the “above the fold” argument.
The term “banner blindness” is a condition many of your website visitors suffer from. We have seen advertisements on so many websites that we recognize them and avoid clicking on them. Our eyes skim right past them as we search for the “real” content on the website. If you decide to place ads on your pages, they can compete with your buttons. Make sure you lay out your page so the buttons and ads are far apart. By reducing the clutter around your buttons, you make it easier to see. Plus users with cognitive disabilities will thank you, as they will be less worried about a misclick.
The most important aspect of designing a button is to make it look clickable. The current design trend is to have flatter, less stylized graphics. Whatever the latest trend is, buttons should always have enough difference in color, contrast, and size. The color does not have to clash, but choosing a complimentary color will help it stand out. For example, an orange button is often the choice for websites with lots of blue. The color should contrast with the background. A button needs a dark color if you have a light background color for the page. Choose carefully, as the design of your buttons should apply across your entire site. This way users know that anything with that treatment is a clickable element that will take them to the next step.
What text do you have on your button? Does it convey the proper action you want your users to take? Do not fall into the trap of simply putting “Click Here”. That phrase is the most common and useless piece of text, and does nothing to entice your user. The text should state what will happen when they click it. This is probably the most difficult aspect of a button. Yet it is easy to test because changing button text is typically easy to do. Conduct a quick usability test to see what users prefer. You can also change the text every few weeks to see how your click-through rates change.
The first thing to do is conduct a content audit for all the buttons on your site. Note that you may want to change some links to buttons and vice versa. Once you have that list, figure out what page layouts work best. This means tweaking button placement, ensuring it does not compete with other links or ads. Next is determining the color and design of your buttons. Remember that this not only adds to the design, but aids in accessibility. Visitors with vision impairments can more easily spot larger buttons with lots of contrast and a distinct color. Finally, test several variations of text on your buttons. Apply these treatments and track your analytics to see what combinations work best.
This article was partly inspired by Luke Wroblewski’s talk on the UIE Podcast “Mobile Behavior and Design Trends“
Photo courtesy of Dariusz Rompa