SIMPLE DOESN’T MEAN BORING.
Mull it over.
Once you do, let’s travel a few years back and make a pit-stop at a time when the internet hadn’t taken over our lives. We can also gingerly hover around the painfully slow yet incredibly nostalgic days of dial-up internet (who could mistake or forget that sound of connectivity!).
Picture this. It’s a warm and balmy evening. You are plonked on the family couch watching your favorite TV show only to have your sibling snatch the remote control from your hands and switch to a stupid channel. A WWF-esque wrestling match would ensue between the two of you without any rules.
Wonderful times, weren’t they? A surprising memory that lingers is the alignment of buttons on the control and how it felt pressed against our fingers and palms. There was something immensely satisfying about the order of the buttons, the familiar shapes, and the tactile experience. The buttons were shapes like a square, a circle, and a rectangle – shapes that are so basic yet universal.
Skip to 2021. A new form of buttons has taken over.
We are going to assume that you’re reading this on your phone. Did our “Read Blog” button direct you here? Did you notice that it was just a rectangular basic blue button? If you did, you’ve learned the first fundamental to designing a great button.
What is button designing?
Button designing enables users to choose an action at the tap of a button. It’s an interactive element that elicits a response following a particular command. The action or command could be as simple as “Cancel,” “Pay,” or direct you to another page such as “Contact Us.”
All ‘Call to Action” designs should ideally be uncomplicated. For example, when designing a button, stick to circles, squares, and rectangles as humans are creatures of habit, and introducing a new or fluid shape may throw them off.
This is also why skeuomorphic designs are still all the rage. Although the surface we interact with is entirely flat, it offers the illusion of tangible shapes and buttons. Moreover, it reinforces the physical world’s familiarity as we’ve lived and experienced it.
Now, let’s also assume you’re starting to feel slightly hungry, but you want to watch what you’re eating too. A quick check-in at Subway’s website not only offers you buttons to order right away or teach you to eat better, but the buttons themselves are also filled with the green color of the logo. It’s a color that we’ve now come to identify the brand with. A great way to support subliminal branding.
At the heart of all design lies simplicity, which takes us to fundamental #2.
Suppose you’re designing a button for the user/customer to make a payment. The best way to go about it is to label the button as “PAY.”
Trying to stand out and appear unique by using icons like a moneybag, a dollar sign, or a stack of coins may only confuse the reader more. For many, the download sign would be a no-brainer. But think about the elderly in your community. Do you believe that an arrow pointing downwards in what looks like a square bracket taking a nap could be immediately evident to them?
If you want to add more weight to a button that’s notably more important than the rest, you can add the “greater than” symbol. Don’t mess with the minimal inner margin though, the text needs ample breathing room to be readable.
Quick reminder: Simple doesn’t have to be boring.
Another way to highlight text is to just underline it and link it. Of course, this link is not to be confused with a button. When in doubt, remember that buttons are a call to action and may affect the website’s back or front end. On the other hand, links are used for navigation and may not necessarily affect the website.
Now, just because you’re getting the hang of designing great buttons doesn’t mean you go all out too! When you provide too many buttons, the user will usually do nothing!
Don’t believe what you’ve heard.
SIZE. DOES. MATTER.
Ever heard of something called “Banner Blindness”? It’s when a user actively or instinctively avoids reading any text (no matter how crucial) it may be because it’s framed inside something that’s as large as or resembles a banner ad. This leads us directly to why your buttons shouldn’t be enormous. Yet, it can’t be minuscule either, especially on mobile devices, as those with pudgy fingers would be quick to point out that even the simple act of tapping a button may not be as simple as it sounds.
Let’s talk numbers, shall we? According to studies conducted by the MIT Touch Lab, the minimum size of a button should be 10mm X 10 mm. A button isn’t just a visual element; it’s also tactile. So, buttons should have a touch target of at least 38px by 38px.
How do you cut your pie?
If you’re thinking about the process of first cutting the pie across horizontally and then depending on how many people you’re hosting, you’d further divide it into 6 or 8 triangles; you’re going the right path. However, if you cut the pie without thinking about balance and symmetry, perhaps even just digging out a portion from the center, it’s official – you’re a monster.
Why are we talking about pies, though?
For most, if the pie is not cut the way it’s meant to be cut, it triggers a negative emotion and response in our brain. Imperfection drives us crazy. Our brain doesn’t like to process something disorganized, crooked, chaotic, and out of the ordinary.
The same logic applies to design and buttons. If the text in the button is not centrally placed, vertically and horizontally, you’ll be hearing from everyone about how you’ve “hurt their brain” with your ill-designed button. You’re making people use their brains longer than they would have preferred to over a simple button. But it’s a quick fix. So, strive for perfection. It’s all the buttons ask.
Now that you’ve got the alignment covered, your next step is to understand the importance of shadows and how you can sway them to make the buttons pop. We love flat design. Yes, maybe more than we ought. But shadows can help a button look like a real one. The secret element lies in using the same color for the background as the button with opacity less than 40% and keeping the shadow size smaller than the button. This makes it look like the button is floating and almost as though you could physically touch it.
What NOT to do with shadows. EVER.
Using shadows that are too strong, dark, and thick and viola, you’ve successfully created an atrocity that’s in-your-face, borderline annoying, and one that will immediately want to stop a person in his tracks and discontinue an action.
Now you’re just one step away from designing a button people will actually want to tap on. You’ve got to play with colors but make playtime intentional. For example, if a button indicates payment, you can use green as it symbolizes money, while blue is a safe and universal color for all actions. If you see a grey button, we’re almost immediately thinking that it’s a disabled button, so avoid it to avoid confusing a user.
Colors subtly evoke emotions and directly impact conversations too. A great way to include accessibility in design is not just to use colors. Along with colors, use patterns use labels and patterns too. For some who are color-blind or visually impaired, a button like this can be a game-changer.
The Web Content Accessibility Guidelines (WCAG) state that the button should be activated using the Enter or the Space key. The button should be clearly labeled or describe the action, and that once the button is activated, the focus is on the action that follows.
Knowing how to create and where to position a specific button is also paramount for your design to be successful. Be the cool guy. Don’t frustrate your user.
And this probably goes without saying. Be consistent. Nobody likes a sloppy, messy design. So keep it clean, simple, and easy to use.
Congratulations! You’ve designed a button that does exactly what it says, and you’ve done it well too! If you’re using an edgy color, a shape that you might think is revolutionary, a font that may set you apart, take a few steps back, and go back to your original design. That’s where the magic is. Don’t lose it.
Share