Home > UX and Prototyping > 6 basic rules for button design on your website

All designers want to deliver a product that their users can love – and without good button design, that’s just not possible.

A button is a fundamental UI element that will heavily affect your interaction design. Buttons have the power to compel users to convert, to carry out an action. Buttons are a middleman between the user and the product, and are charged with keeping the conversation between person and machine going. But how can you make sure your button design allows for great usability while still making creative waves in users’ screens? Read on to find out.

The basic rules of button design

Everything in life has a few ground rules that should be taken into account. Button design is typical in that it looks fairly easy but comes with lots of seemingly small factors the designer must consider. These are some guidelines to follow in your next UX design.

1. Make it look clickable

Whenever a user uses any product, they must decode the meaning and function behind every single element in the interface. Just like all other elements, you don’t want users to take a long time to understand and decode any of the elements they see – the longer they take, the worse your usability is.

button-design-good-example-contrast
Design by Jan Van Echelpoel.

Here’s why you need to stop and wonder if that button actually looks clickable. As the designer, you are very familiar with your creation. You know every small interaction, every link. Users, on the other hand, have never seen you product and have no idea what it does or how it works. You can’t be sure that people will recognize that button for the fancy link it is, and it’s up to you to leave no room for doubt in their minds.

And so, try to use shapes and styles of button that we are all familiar with. That includes square buttons, rounded squares or other forms of buttons that people can find in other common interfaces. We understand that every designer wants to be original in their work, but it’s no use delivering something truly unique if people can’t use it.


Design interactive buttons for your website with the Justinmind prototyping tool

Download free


We recommend rounded squares with shadows. We like to add shadows to buttons, because it adds a sense of depth that goes to show the user that the button can be clicked. You can also add a microinteraction so that when the cursor hovers over the button, some sort of reaction occurs. That could be a slight change in color or a small movement upwards – the important part is that the user knows that element can be clicked on.

2. Make it easy to find and predict

Just like we are all used to a certain type of button design in terms of shapes, users also have an idea of where buttons should go in any given screen. We open a webpage and expect to find the button immediately – no user ever enjoyed looking around for a button to press.

These are pre-formed expectations of any website and it’s best if you don’t fight them. Instead, try to apply them to your design as a starting point, and see how you can elevate that to something true to your style.

The reason why you don’t want to fight people’s notions of where buttons should go is that usability calls for predictable design – including button design. You want your product to make sense to users, ensuring good discoverability and learnability. That means that by reflecting people’s expectations on your design, you make it easier for them to navigate the product for the first time and come to learn the way it works or what it can do for them.

Example of constrasting colors in button design for websites
Design by Alexander Bykhovsky.

Have contrasting colors in order to direct user’s attention to the button, and to convey that the button is important. Make full use of negative space to conduct the eye through the screen and straight to the button, as opposed to letting the user chew through the content before they can see the button with clarity.

When pondering on how your button design affects the usability of your product, it’s crucial for you to account for the need of consistency in your product. Even if you make your button look like people would expect and place it in a common spot on the screen – if every button looks different, people will be confused as to if they serve the same function or will behave in the same way as the others.

You need to have a coherent button design that shines through in every single screen of your website, no matter what feature they relate to. Once you have a style you can replicate in all your buttons, establish the standard place for buttons within your website. Follow logic and common user’s expectations – for example, when faced with “previous” or “next” buttons, most users would expect “previous” to be on the left while “next” to be on the right.

3. Tell users what each button does. Don’t make them guess.

Never believe it when anyone tells you that microcopy isn’t important. Granted, a writer would defend that every word matters when it comes to getting a message across but it doesn’t make it any less true. Your button design wouldn’t be complete without the right microcopy to go with it.

Example of good use of microcopy in button design
Design by Anton Avilov.

The text that goes inside your button doesn’t need to be restricted to “OK” and “Cancel”. In fact, your usability would improve by setting those generic terms aside and focusing on the action that each button does. Having buttons that read “Delete permanently” or “Cancel booking” can guarantee that your users understand each button, and even improve usability by decreasing chances of users making mistakes.

Another useful button design tip is to outlaw popup boxes that only have the classic “Continue” or “Cancel” buttons. Instead, try to create boxes that have at least one line of text explaining what action is being taken and what it means for the user.

4. Size matters: have buttons people can actually click on

Button design also means deciding just how big you want each button to be. This seems like a small detail, when actually it is anything but superficial.

The size of your button is particularly important for mobile designs. Making a button too big will lead to a visually charged screen, while a button that is too small cannot be clicked on by a normal finger. MIT’s Touch Lab published a study back in 2003 that found most fingertips to be 8-10mm wide. The clear implication is that you don’t want a button to be any smaller than 10mm – unless you’re willing to risk the usability of your design on the chance that your users have very tiny fingers.

Good example of use of visual hierarchy when dealing with button design
Design by Alex Lauderdale.

Aim to establish a visual hierarchy in your button design. That means that the most important functionalities, the primary conversion of any given screen, should be the biggest button in sight. That also applies when you have two opposite buttons – make the positive outcome button seem more important by making it slightly bigger than the negative one.

No designer can afford to go about their life without worrying about responsiveness nowadays, not even when it comes to button design. You need to account for the possible use of several devices when viewing and interacting with your design. This can be done by accounting for a defined change in button size depending on what screen size users prefer.

5. Don’t have a button for everything

Offering users every single functionality on the same screen may sound like a good idea, but that’s a trap. People feel like they want to have all the options on their hands but in reality we don’t appreciate the wave of decisions to be made. As pointed out in both the paradox of choice and Hick’s law, giving users too many options will lead them to freeze and feel overwhelmed.

Sure, placing all the buttons on the home screen seems cool – except that your product isn’t an airplane flight deck. There’s no need for you to compromise product usability just to save users a few clicks. Try to find ways you can get users to reach the desired outcome in a logical way, using your button design as a tool. Investing some time into a proper frame of information architecture is a good place to start.

Too many buttons example of flight deck

Button design isn’t just about how buttons look or what they do but also how you present them to the user. Be logical and don’t rush people – create paths that people can easily follow, installing a framework of roads that lead to all the crucial points of your product.

6. Always provide feedback or risk user’s wrath

Nielsen wasn’t kidding when he included system visibility status in his Heuristics for Usability. Unlike a real person, the computer doesn’t give you feedback unless you make it do so. In a real life conversation, people’s body language will always let us know that they are listening and that they understand what we are saying. This makes it much easier to have a conversation – and that’s what users do when they use you product. It’s like a conversation between person and software.

Showing of button states within button design for better usability
Design by Brett Bertola.

Your product should always let users know that the command was registered, and in a timely manner. Let too much time go by before the signal is given to the user, and the user might not even realize what that signal is in connection to. A good way to make sure nothing is lost in translation is to define the buttons states in your button design.

Whenever a user interacts with a button, it should change state to let the user know that something is happening as a consequence of their actions. They need to know that there is a reaction coming from the computer.


Test the states and behavior of your buttons with a hi-fidelity prototyping tool

Download free


On a related note, microinteractions are also a great way to convey system status to the user, as we’ve explored on this previous blog post. With a smart microinteraction, you can smooth out the communication between user and software – the fact you can have a lot of fun designing these tiny interactions is just a bonus.

UI kits that can take your button design to the next level

Here are some UI kits that come with several different styles of button design – maybe here you can find the perfect match for your latest project or a solid base that can start off your next design.

Web Wireframing Library

With simple buttons that comes in solid shapes with sharp edges, this UI kit is the perfect starting point in most wireframing projects. Take the simple and classic button design and spin it to suit both your style and that of you project’s. Aside from the buttons you’ll find all the basic building blocks UX designers need to get an idea off the ground. All of that in one UI kit!

Button design tools - UI kit components for web

Bootstrap

A more diverse and fun UI kit, Bootstrap comes with buttons in varying colors with rounded edges. The button design is younger and offers more options for those looking for a little pop of color for their design. Buttons include all the classics and several dropdown alternatives.

UI kit components for button design - bootstrap

Kendo

This UI kit is a fun tool to have at your disposal. It comes with buttons for all sizes, both primary and secondary. With several size options, crafting your next UX design will be much easier and quicker with Kendo. Not to mention, we just love the button design on the button group!

Button design hack - UI kit components KENDO

The wrap up

Button design is important, both because buttons help users navigate your product and because they can compel users to convert to any desired outcome. They need to be planned with care, so that your users can both know where the buttons are instantly and at the same time never once stop to think about that button. Make it flashy, make it useful – and let users enjoy your product to its full glory.

Download free