When it comes to designing them, though, it’s easy to get overwhelmed with choices and end up with something that isn’t as intuitive as it could be.
Here’s an example – the new Tesla Mobile App v3.10. Released in September 2019, this app is meant to help users remotely monitor and control their Tesla vehicles. The news? A button called “come to me”, meant to literally summon your vehicle to you.
Summoning is not a new feature for the Tesla app. The true update lies in the fact that it used to be a 2-3 step process, which has now been brought down to a single button click.
For those of us that don’t own a Tesla, this is a great opportunity for a learning moment. Consider the screenshot above – not minimal by any standard, but definitely not cluttered. You may not have even noticed the “come to me” button at first: the user is currently in the car, so the outline is the only thing visible as the action is unavailable.
This brings us to our first rule of UX design for buttons.
- ⦁ Your button needs to look like a button
Here we’re talking about something that a lot of minimalism-aficionados tend to forget or disregard. A button that looks like something else is a terrible aspect of UX design – the equivalent of mixing wax fruit with real fruit in a bowl.
There are certain best practices for how big a button should be – but the main thing is that the shape and color make it a recognizable element of your app. Users shouldn’t be afraid to tap their screen, unless you’re going for a jump-scare Halloween app.
- ⦁ 3D is your friend
A mobile phone screen is, by definition, a flat surface. An apps’ design can combat this by introducing shadows – creating the illusion of 3D in an otherwise 2D environment.
Why is this so important? Well, key buttons on your app (such as call-to-action or CTA buttons) need to be the first thing your users notice. The more noticeable, the more actionable they are. Imagine an app where everything is flat and smooth, and then BOOM! Mountain of a button, rising tall on the surface of your phone. You know you want to press it, even if it’s just to see where it will lead you.
- ⦁ Label what you can
Despite some buttons being pretty straightforward, you still might need to make sure your users aren’t confused as to the functionality. An X is a classic example: it generally means “close”, but some game apps use it in a console manner, meaning “shoot” or “jump”.
It’s same with buttons that are a bit fresher in design, such as the “hamburger” button. You’ve seen it before – three horizontal lines that you can click on to get access to a menu.
However, buttons that are not as well known (like “come to me”) need some extra help. Don’t be afraid of adding text to your app! A well-labeled button is much more useful than an unknown action waiting to trip your users up.
So there it is. Hopefully, this tiny list of suggestions will galvanize you into pushing that button and making your app a wonder of UX design.