Is Your App User-Friendly?

Dec. 1, 2020

Are you getting a mobile app developed for your business?

Make sure you consider these user-friendly design secrets.

Here are 3 easy principles:

1. CALL TO ACTION: What do you want me to do? How long does it take?

2. CLUTTER: Reduce it.

3. THUMB: How far does my thumb have to stretch?

Mobile app development can be complicated. Read on to see how to make your app user-friendly.

1. Call to Action

When people use your app do they ask, “what am I supposed to do?”

Or do they know what to do almost immediately?

Here are some ways to help your app make the call to action obvious.

The “Grunt Test”

The “grunt test” was coined by by the renowned digital marketer Donald Miller from Storybrand. He applies it to websites, but we use the same idea for mobile apps. The mobile app grunt test asks, “if a caveman were to look at your app, could he answer these 2 questions within 5 seconds (or by the time he grunts): (1) what does this app want me to do, and (2) how do I do it?”

Try the grunt test on the mobile app below: GO!

This one was probably easy because you may be familiar with Venmo, but Venmo wants you to “Pay or Request” money! That’s CLEARLY their call to action for this app. You do that by clicking the “Pay or Request” button.

Let’s try another one: GO!

Now, you may be familiar with the YouTube app, but if this was your first time, then you might not know that YouTube wants you to watch a video. This app might pass the grunt test for most people but might fail it for a few first-time mobile users.

Can users pass the grunt test on your app? The grunt test is a quick way to find out how clear your app’s purpose is. Give them your phone, ask them if they can answer the grunt test questions in 5 seconds, and time them.

Buttons: Size and Color

How can you make your call to action clear?

One way to make your call to action clear is to emphasize a button. You can do this with size and color.

Notice how the Venmo homescreen has a lot of clickable icons, but ALL of them are gray (unless they are a photo), and the ONLY one that is Venmo’s bright blue color is the main one that they want you to click on. That’s because the “Pay or Request” button represents the purpose of their app. That’s the thing they want you to do. Additionally, the “Pay or Request” button is the biggest button on the whole page.

On the YouTube app, almost all of the buttons are small and without color, while the video thumbnails are large and colorful. That means that YouTube wants you to interact with the video thumbnails, by clicking on them and watching the video.

If an app’s call to action is clear, then it’s more user-friendly. Big, colorful buttons help make your app’s purpose clearer.

How Many Clicks Does It Take?

After the user knows what they should do, how many clicks does it take to do it? How long does it take? In the case with Venmo, it takes 3 clicks:

1. “Pay or Request” button

2. Select Person

3. “Pay” or “Request”

Three clicks is very fast, and it’s harder to get down to 2 or 1 unless the call to action is very simple. For example, the only thing YouTube wants you to do is watch videos that are already on the app. So once you open the app, it just takes 1 click for you to start watching (plus the “Skip Ad” button if you don’t want to see the ad).

However, most businesses want their users to do something more than simply watch a video or “like” content, so 3 clicks is a quick speed for the majority of businesses.

2. Clutter

This one is simple. If it’s not essential, take it out. Reduce clutter.

Let’s take the Yogurtland app for example (no hard feelings, I love eating at Yogurtland). It’s not that bad, but the homescreen of the app has 2 competing purposes. One is to order the promotional item, and the other is to sign in or register for your rewards program. A user could ask, “do I want to order that? or should I sign in first to get my rewards? wait, do I already have an account?” It’s 1 more thing to think about.

Reduce clutter to emphasize the MAIN purpose. If Yogurtland wants you to order, then they should focus on ordering. If they want you to participate in the rewards program, then they should focus on the rewards program.

Let’s try one more.

Costco is a great store (I save a lot of money on good products), but the app is cluttered. The most distinguished color is the orange that accentuates the message from the CEO. The next big, colorful thing is the ad. What percentage of people will look at this homescreen and say, “Oh, I need to get a new Lenovo computer?” I suppose enough for Costco to put it there, but it’s at the cost of being user-friendly. A first time user may eventually find their way to the “Shop” button, but it takes too much effort because of the distracting clutter from the ads and the notice.

It seems like the main purpose is to shop, because “Shop” is the biggest text on the screen on the top left, but do you click on the “Shop” text or do you click on the hamburger menu (the 3 horizontal lines)? Costco could make the “Shop” or search features more noticeable with size and color accents.

3. Thumb Range

The third important thing to consider is thumb range. What is thumb range? It’s the distance your thumb can reach on your phone.

Where on the homescreen are your buttons and interactions?

Let’s check out the apps we’ve looked at so far.

Costco: Assuming the main purpose of this app is for people to shop, the “shop” button is a little too far toward the top of the homescreen. It’s probably in between the yellow and red thumb range zones. Think about how Google places their search bar in the very center of your phone and is surrounded completely by white space. That’s ultimate user-friendliness.

Stretching your thumb “too far” may seem like first-world problems. That’s because it is. User-friendly designers understand their users. We design for first-world users.

Yogurtland: The 3 buttons on the homescreen all seem to be in the green zone. This is also a good example of how everything clickable is within green thumb range. You’ll notice on other apps like this one that menus are almost always placed at the bottom row, in order to be within the green zone.

Youtube: There are buttons in green, yellow, and red thumb range zones. You can use this variety when you have many buttons that you need to put on your homescreen. However, remember to put your most important buttons in the green zone and your least important buttons in the yellow and red zones. This is a great example of using the thumb range to establish importance.

Venmo: Recall that the purpose of this app is to pay or request money. That button not only stands out with its size and color, but it’s also located perfectly within the green zone for thumb range. Again, the importance of a button is directly correlated with its distance from the thumb. So the “scan” button in the green zone means that it’s more important than the menu buttons in the yellow and red zones at the top.

Final Thoughts

In summary, these are some user-friendly design secrets:

1. Use the “Grunt Test” to see if your app’s purpose is clear

2. Emphasize the purpose with the button’s size and color

3. How many clicks does it take to use the app?

4. Reduce clutter

5. Put the most important things inside the green zone of the thumb range

These are just a few basic principles that can help in your conversations your app developer. Every business has unique needs and each app will require its own user experience. You should work closely with your app developers to find out what the purpose of the app is and how to make it user-friendly.

Share this blog post