We don’t always know which path to take in life. From choosing whether to accept a job offer that we’re not too keen on, to picking between Funny Bunny and Ballet Slippers for our next pedicure, life is full of decisions (don’t tell me you haven’t heard of Funny Bunny?). If only we had a fairy godmother that could help us make up our minds and understand what’s best for us. While most people are probably slightly more decisive than I am, many of us benefit from having our options laid out in front of them and narrowed down to a few actionable items – or buttons. Whereas a button on a mobile app or website may not say “Click here to determine what the rest of your life will look like”, it guides us in making some sort of a decision – thanks to hierarchy, reducing the number of possibilities, forming clarity of thought and more. Together, these little details make up the design of your website or apps’ buttons, ultimately affecting your user experience and customer retention. So, if you want to be a mini fairy godmother for your users (or just improve your UI and UX design), here are the basic principles of button design for mobile apps and websites:
Make buttons look like buttons
It sounds simple, but sticking to the universal agreement on what a button looks like is especially true when it comes to mobile design, as you can’t hover over a word to see whether or not it’s clickable. Sometimes, there’s no need to do anything too flamboyant. You can add a thin border around the text, underline it, give it a background color or raise it slightly with some shading – anything that will tell your users to “click right here”.
Label your buttons with concise microcopy
A bit of humor or personality is always welcome. The Robin Collective’s “Buy yer ticket” button (imagine a British accent) made us giggle, as did some of Dennis Krawec’s delightful copy on his design portfolio. On mobile, however, downsizing is the name of the game. That’s why you should keep your text short and to-the-point, getting your message across loud and clear.
Use color to your advantage
Choose bright shades that will grab your users’ attention, as well as making sure that your buttons are highly visible, by contrasting them with the background color. Take note that there are certain colors that we naturally associate with specific actions. As a general rule, stick to what feels intuitive – for example red for “Delete” or “Abort”. Buttons like “Approve” and “Confirm” are often green, but they don’t necessarily have to be. You can also work with your color palette and find a nice shade of blue if you want – just don’t risk confusing your visitors by opting for red for these kinds of buttons.
Make buttons big enough to press easily
On the same note, frustrating your users isn’t the best way forward, either. That’s why you should stick to these mobile web design guidelines for button dimensions – keep them to a minimum of 30 to 40 pixels in height and 40 to 80 pixels wide. This way, your users can enjoy a seamless navigation experience, as they effortlessly move through your site or app, without having to squint or zoom in to click on a button.
Leave enough white space around the buttons
Placing your buttons with a hefty amount of space around them means that they are not only easier to press, but are also noticeable, making this a good move strategically. If you have a few buttons next to each other, make sure to leave enough room around them and make them big enough so that people won’t end up clicking the wrong button.
Place buttons where people expect them to be
Similarly to matching certain CTAs (calls to action) with a color that conveys the same message, also place your buttons where your users will naturally expect them to be. Having the “Next” button on the right, “Back” on the left, and “Show more” at the bottom, helps create a sense of familiarity – ultimately making navigation intuitive.
Create flows
When it comes to performing an action that involves a few stages (such as creating an account or purchasing from an online store), let your users go with the flow. What does that mean in terms of button design? Split the action into individual stages and screens, and place the buttons in the same place throughout the different screens, forming a whole and fluid experience. For example, take a look at the screen below. The action performed is buying clothes online. Throughout the stages of reviewing your shopping cart, to entering your card details and shipping address, the button always remains on the bottom right of the screen. The microcopy can change from “Next” to “Confirm” or “Save”, but the design is uniform and the button stays in the same position, creating a flow that the user can easily comprehend.
Sticky buttons for important CTAs
Sometimes, there are buttons that just have to get their voices heard. As well as having fixed navigation menus, you can include sticky buttons that stay put while you scroll. Make sure that they stand out against the background, by having a bold filled shape, like in the image below. But don’t overdo it with sticky buttons, as having too many of them can get in the way of a smooth browsing experience.
Keep buttons to a minimum
As already mentioned, mobile screens don’t leave much space for unnecessary content. You’ve got to be cut-throat. Don’t include too many buttons on each screen, or your users will get confused. If possible, break it down into a few screens, so as to spread out the buttons. If a specific screen does require a number of buttons, try to vary their designs. See how the screen below features two menus – on the top and bottom of the screen, while keeping the design aligned with what we’re already familiar with from other apps. One of the buttons (“Create New Service”) has been made to stand out, having a different design from the rest, as well as a small icon to make the message even clearer.
Give your buttons hierarchy
Hierarchy is one of those basic design principles that we implement in almost anything we create. If you’re designing a mobile app or website, take into account the fact that your users are likely to be on-the-go, or browsing your site absentmindedly. They could be in the middle of a shopping spree, on the bus or even halfway through a yoga lesson (hopefully not). This means that things have to be super clear. Your users should be able to understand where to click and why very quickly. If you have a number of buttons on the screen, pinpoint which is the most important or most popular, and emphasize it. You can do this by placing it at the top of the screen or making it a different size or color than the other buttons, like in the example below.
Provide audio or visual feedback
People like to know where they stand – and not just when it comes to relationships. While working on the UI of your buttons, don’t forget that teeny tiny moment that comes in between clicking on a button and waiting for the response. Our attention spans are becoming increasingly shorter these days, so even a split second of insecurity can make a user head towards that “Exit” button. To avoid these unwanted situations and get your users to hang on in there, consider providing some sort of feedback. You could invert your button’s colors, make the text become bold or if it’s a process that takes a little longer, you could add an animation of a loader.
Don’t forget that even the most minuscule of changes can make a big difference in your interface. After all, that’s what button design is all about.
