Button up and buckle down: designing elements for your app

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.

Come to me” button on the newest Tesla App, courtesy of Tumblr
Come to me” button on the newest Tesla App, courtesy of Tumblr

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.

Come to me” button on the newest Tesla App, courtesy of Tumblr
Games like Dumb Ways To Die
  • ⦁ 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.

Read next on DevsPush Blog:

The mobile app trends that dominated 2020
Monday 15 February 2021 by DevsPush

The mobile app trends that dominated 2020

This year was a gamechanger on many levels, but there are some constants.

How to build the perfect app for your product
Monday 11 January 2021 by DevsPush

How to build the perfect app for your product

There are applications out there that can make you want to look at them for hours.

Top 8 UI/UX trends to look out for in 2021
Tuesday 15 December 2020 by DevsPush

Top 8 UI/UX trends to look out for in 2021

After the year we’ve all had, we better be prepared.

deco shop

Subscribe for discounts, updates & new products!

We’ll never ever share your email address with anyone.