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.
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.
- 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.
- 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.
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.
- 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.
- 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.
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.
- 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:
- Animated feedback must survive long-term use. What seems fun the first time might become annoying after the 100th use.
- Animations can distract your visitors and make them ignore long loading times.
- Animation can make your user experience truly delightful and memorable.