How to improve the UX and UI of your app

How to improve the UX and UI of your app

1 Overview

The challenge

According to comScore's 2016 U.S. Mobile App Report (Sep 13, 2016), mobile users spend nine out of ten minutes using only their top five favorite apps1. Companies are fighting for a coveted spot on that short list, and these days, a highly engaging app isn’t a nice-to-have — it’s a necessity.

In this high-stakes climate, your challenge as a growing company is to not only build high performance apps, but also iterate and improve users’ mobile experience and drive ongoing engagement and retention.

Your aim

Learn how you can improve your app’s user experience (UX) and user interface (UI) to drive engagement in your new market.

How to go about it

Mobile users expect a lot from the app – you need to consider loading time, ease of use and satisfaction during the interaction. Adapting to the context of use, while keeping the interaction levels as low as possible (limit the number of actions required to complete a task) is quickly becoming a standard for many apps. So you’ll need to consider what constitutes a “good experience”, and how you can make sure your user interface (UI) is highly functioning as you look to sell your app in new markets. This guide gives you a number of best practices that can be applied wherever you’re growing your business.

2 How users interact with your app

Make it easy for users to understand and interact with your app. The less friction and confusion users have when interacting with an app (e.g. the cognitive load), the better the chance that app stays around. Here’s some tips to help you do this.

Optimize user flow

Understanding how users interact with an app is essential for optimization. As designers and developers, we should understand the user’s goals in the context of the entire user flow. This knowledge will help us identify the most common friction points during task completion.

Here are few popular ways of optimizing user flow:

  • Chunking for big tasks. If a task contains a lot of steps and actions required from the user’s side, it’s better to divide such task into the number of subtasks. One good example is progressive checkout flow in e-commerce apps. You can separate a checkout process in the number of steps each of them requires a user action.

  • Use the information you already have about your users. You probably already have a lot of information about your users — you just need to use it properly. Consider Uber in the example below — the app doesn’t ask the user about his/her location, it automatically detects the location based on geographic data. At that point, the user only needs to select a pickup location.

  • Provide a natural next step. When the task requires users to complete a number of steps, maintain momentum by clearly showing what’s next.

  • Prioritize one primary action per one screen. By following this simple rule, you’ll make the interface both easier to learn and easier to use. Use visual weight to prioritize important elements (such as contrasting color for primary call-to-action button).

Cut out the clutter

Good UI design is all about delivering relevant information (signal) and avoiding irrelevant information (noise).

By cluttering your interface, you overload users with too much information: every added button, image, icon makes the screen more complicated. Clutter is terrible on a desktop, but it’s even worse on mobile devices where we don’t have too much free screen space to play with.

Tip

If you want to reduce clutter on a screen which represents a part of the user flow — show only what is necessary on the current step of the flow. For example, when a user is making a choice, reveal enough information to allow them the choice, then dive into details on the next screen(s).

Make navigation self-evident

All the cool features and compelling content in the world won’t matter if people can’t find it. Here are a few rules for navigation:

  • Don’t hide it. Avoid hidden navigation such as gesture-driven because most users will have a hard time finding it. Consistent navigation. Mobile app developers often hide menus on individual pages. Don’t do that because it might confuse or disorient your users.
  • Communicate the current location. Failing to indicate the current location is the common problem for many mobile apps.“Where am I?” is one of the most fundamental questions users need to answer to navigate successfully.

Tip

It’s better to use standard navigation patterns — such as Tab bar (for iOS) and Navigation drawer (for Android). The majority of users are familiar with both navigation patterns. No need to get clever if a simple solution works.

Optimize interactions for the medium

Mobile phones aren’t smaller version of desktops — they come with their own nuances and constraints. Think about the effects this will have on user interaction.

3 How design affects your user

Designed elements should look like how they behave

A mobile UI needs to clearly communicate what elements are interactive and what elements are static.

Unlike desktop where users can use hover effects to understand whether something is interactive or not, on mobile users can check interactivity only by tapping on an element. Users should be able to correctly predict how an interface element will behave just by looking at it.

Design finger-friendly tap-targets

When you’re designing actionable elements in mobile interfaces, it’s vital to make targets big enough so that they’re easy for users to tap. As a rule of thumb, design controls that have touch area of 7–10 mm so they can be accurately tapped with a finger. Such tap target makes the edges of the target visible for the users when they touch it. Users will be able to understand whether or not they’re hitting the target accurately.

Also, ensure that elements aren’t located too close to each other – there should be a proper amount of spacing between tap targets to prevent false input.

Consider the thumb zone

Designing for thumbs isn’t only about making targets big enough, it’s also about considering the way we hold our devices.

While a thumb can sweep most of the screen on most mobile screens, only a third of the screen is a genuinely effortless territory. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Based on hand placement (left, right, or combined), we can see how the safe zone looks like on the modern mobile device (see a green area on the following image).

Image alt text

The bigger the display is, the more of the screen is less easily accessible.

Image alt text

  • Consider all the different zones when designing for mobile:
  • Green zone is the best place for navigation options or frequent interactive actions (such as call-to-action button).
  • Red zone is the best place for potential danger options (such as Delete or Erase). Users are less likely to trigger this option accidentally.

Design for interruption

We live in a world of interruption. Something is constantly trying to distract us and direct our attention elsewhere.

For example, users might use your app while waiting for the train. It’s critical to design for mobile mindset. Make it easier for users to re-engage with an app when they return to it after the interruption.

Twitter is one good example of design for interruption. The app’s notification screen shows all recent notifications. As long as the user stays on this screen, the app doesn’t update the list automatically – it simply shows a status “X new notification” at the top of the list. This allows users not to lose their current position when they re-engage with the app after some period of time.

4 Creating the best user experience

Strive to create multichannel experience

Mobile apps don’t live in a vacuum.

For example, mobile users usually browse an ecommerce website on mobile, then switch to desktop to purchase. That transition needs to feel invisible.

Intuitive gestures

Only use gestures that are most natural for the app from your category.

Why? Because gestures are hidden controls.

As Thomas Joos points out in his article “Beyond The Button: Embracing The Gesture-Driven Interface” 2, the biggest downside of using gestures in a user interface is the learning curve. Every time a visible control is replaced with a gesture, the app’s learning curve goes up. This happens because gestures have a lower discoverability — they are always hidden and people need to be able to identify these options first. That’s why it’s essential to use only widely-accepted gestures (the ones that users expect to have in your app).

One good example of a category-appropriate gesture is pull-to-refresh for feed-like apps.

Make the app appear fast with skeleton screens

Your app should be fast and responsive – but you’ll inevitably face situations where that’s not always possible.

For example, the internet connection might be too slow. If you can’t shorten the line, you should at least try to make the wait more pleasant. That can be the perfect time for skeleton screens (a.k.a temporary information containers).

A skeleton screen is a blank version of a page into which information is gradually loaded. Unlike animated loading spinners that focus user attention on the fact of data loading, skeleton screens focus user attention on progress instead of wait times.

Focus on first time experience

Just like a person, your mobile app doesn’t get a second chance to make a good first impression. If you don’t, you can bet (with 80% confidence)3 they won’t be back.

Good onboarding is a must

Perhaps the most important rule for creating onboarding – it shouldn’t be generic, it should be beneficial to the people who’ll use the app.

Designers should consider onboarding as an opportunity to create an entry ramp for the first-time users. At the same time, onboarding should only be employed if it’s really essential for first use.

Design zero state

An empty state (or zero state) is the state in which nothing has yet occurred. This state shouldn’t be a blank canvas (or dead-end as many designers call it), it should provide direction and guidance for getting up and running with the app.

Use functional animation to improve interaction and navigational transition

Animation solves a lot of functional problems within interfaces while making them feel alive and genuinely responsive.

Animation is also the best tool to describe state transitions. It helps users comprehend the change in the page’s layout, what has triggered the change,and how to initiate the change again when needed.

Show system status

When an app is busy doing something, you should let a user know that the app isn’t frozen by surfacing system status. Visual signs of progress give users a sense of control over the app.

Visual feedback

In the physical world, objects respond to our interactions. People expect a similar level of responsiveness from the digital UI controls.

Good visual feedback makes interaction comfortable for users. All interactive elements (such as buttons) should provide perfect visual feedback.

Humanise digital experience personalisation

Personalisation is one of the most critical aspects of mobile apps today. It’s an opportunity to connect with users and provide the information they need in a way that feels genuine.

One good example is Starbucks. The app uses information provided by users (for example, the type of coffee they usually order) to craft special offers.

Push the value

Annoying notifications is the #1 reason people uninstall mobile apps (71% of respondents). (Source: Appiterate Survey)

Don’t send push notification just because you can — each notification should be valuable and well-timed. Here are a few things to take into account when design push notifications:

  • Avoid sending too many notifications in a short period

Too many notifications delivered in a short period of time can lead to situation known as notification overkill – when a user can’t proceed the information and simply skip it. Try to combine different messages together to limit the total number notifications.

  • Time your notification

Not only what you want to say is important, but also when you want to say it. Don’t send push notification in weird hours (such as in the middle of the night). The best time for push notification is mobile usage peak hours — from 6 pm till 10 pm.

  • Consider other channels to deliver your message

Push notification isn’t the only way to deliver a message to your users. Use email, in-app notifications, and news feed messaging to notify users about important events based on the level of urgency and type of content you would like to share.

Conclusion

Designers often say that great design is invisible - people who use it focus on their own goals and not the interface. You should strive to create invisible interface because such interfaces satisfy user needs and deliver great UX and UI. This motto can be applied regardless of language or location, so it’s important to get right no matter what market you’re targeting.

5 Sources