Image credit: teamtreehouse

Little Big Details For Your Mobile App

by Nick Babich

Your app’s success is based on a combination of factors, but the overall user experience tops them all. The apps that stand out in the market are those that deliver great UX. When it comes down to designing for mobile UX, sticking to best practices is a solid way to go, but during the creation of the big picture it’s fairly easy to skimp over design elements that feel like nice to have but not necessary. However, the difference between creating good experiences and amazing experiences often comes down to how thoughtful we can design these small details.

In this article you’ll see why these little big details are just as important as the more obvious elements of your design, and how they help determine the success of your app.

Splash Screen

When a user launches your app, the last thing you want to do is tell them to wait. But what if your app has a time-consuming initial setup phase and there’s impossible to optimize this step? You have to ask users to wait. And if they should wait, you should figure out how to engage them. A splash screen solves the waiting problem and gives you a short but vital window to engage a user in your proposition.

Image credit: mobile-patterns

Here’s a few tips to keep in mind when you’ll design a splash screen:

• Both Google and Apple suggest to use the launch screen to improve the user experience by simulating faster loading times. Splash screen gives the user immediate feedback that the app has started and is loading. To ensure people don’t get bored while waiting for something to happen, offer them some distraction: something fun, something unexpected or anything else that catches your users’ attention long enough for your app to load.

Image credit: Cuberto

• If your app has a initial setup phase, which takes more than 10 seconds, consider using progress indicators to show that loading is in progress. Keep in mind that uncertain waits are longer than known, finite waits. Thus, you should give your users a clear indication of how long they need to wait.

Make the loading process feel natural by using progress bars. Image credit: de_martin

Empty States

We normally design for a populated interface where everything in the layout perfectly arranged and looks great. But how should we design our screen when it’s pending user action? I’m talking about empty (or blank) states. Designing an empty state is a very important moment, because even it’s meant to be just a temporary stage it should be a natural part of your app and be helpful for your users.

The purpose of a empty state is more than a just decoration. Besides informing the user about what content to expect on the page, empty states can also act as a type of onboarding (they introduce the app and demonstrate what it does to your users) or helping hand for your users (the screen when things go wrong). In both cases, you want your users to do something so that the screen wont’ be empty as soon as possible.

Image credit: inspired-ui

Here’s a few tips to keep in mind when you’ll design an empty state:

• Empty state for a first-time user. Remember that first time user experiences should be focused. When designing empty states for a first-time users, keep them as simple as possible. Focus on primary user goals and design for maximum interactivity: clear message, right imagery, and a action button is everything you need.

Khaylo Workout is a great example of a proper empty state design. This empty state tells users why they see it (because they haven’t challenged any friends) and how to fix it (tap the ‘+’ icon). Image credit: emptystat.es

• Error state. If the empty state was due to system or user error, you must find a balance between friendliness and helpfulness. A short sprinkling of humour is often a great way to diffuse the frustration of an error, but it’s more important that you clearly explain the steps to solve the problem.

Feel lost and unconnected, like you are on a deserted island? Follow the advice from Azendoo, keep calm, light a fire, and keep refreshing. Image credit: emptystat.es

Skeleton Screens

We don’t usually think about different loading speeds for our content — we believe that it loads instantly (or at least very quickly) all the time. So we don’t usually design the uncomfortable moments when users must wait for content to display.

But internet connection speeds aren’t always guaranteed and actions can take longer that expected. This is especially true when heavy content (such as images) is downloading. If you can’t shorten the line you should at least try to make the wait more pleasant for your users. You have a great opportunity to keep users engaged by using temporary information containers, such as skeleton screens and image placeholders. Rather than show a loading spinner, skeleton screens create anticipation of what is to come and reduce cognitive load.

Here are a few tips for your design:

• The load screen doesn’t need to be eye-catching. It should highlight only necessary information such as structure of the sections. Facebook’s gray placeholder is a good example — it uses template elements when loading content and makes the user familiar with the overall structure of the content being loaded. Notice that images used in skeleton screen aren’t drastically different from wireframes

• For a loading image you can use a placeholder filled with the predominant color of the loading image. Medium has a nice image loading effect. First, load a small blurry image, and then transition to the large image.

Before the actual image appears, you can see a placeholder filled with the blurry image. Image credit: jmperezperez

Animated Feedback

Good interaction design provides feedback. In the physical world, objects like buttons respond to our interactions with them. People expect a similar level of responsiveness from app elements. Visual feedback makes users feel in control:

• It communicates the results of any interaction, making it visible and understandable.
• It gives the user a signal that they (or the app) have succeeded or failed at performing a task.

Animated feedback should save time by instantly communicating information in a way that doesn’t bore or distract the user. The most basic use of animated feedback is in transitions:

When users see an animated feedback triggered by click/tap action, they instantly know the action was accepted. Image credit: Ryan Duffy

When user checks the box to indicate that the task is complete, the block containing this task shrinks in size and changes its colour to green. Image credit: Vitaly Rubtsov

but an app can truly delight a user when animation is used in ways beyond the standard scope of actions.

Here are a few tips and things to remember for animated feedback:

• Animated feedback must survive long-term use. What seems fun the first time might become annoying after the 100th use.

Image credits: Rachel Nabors

• Animations can distract your visitors and make them ignore long loading times.

Image credit: xjw

• Animation can make your user experience truly delightful and memorable.

Image credit: Tubik

Conclusion

Design with care. Each minor detail in your app’s UI deserves close attention, because UX is the sum of all details working harmoniously. Thus, polish your UI from A to Z in order to create really amazing user experience.

Thank you!

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz