Did you know that we’re coming up on the 7th anniversary of Apple’s App Store launch? Time flies. However, acknowledging this timeline forces us to take a look back at the progression of mobile apps from a holistic point of view and how they function in our everyday lives. In 2015, when I download a new app, I expect that piece of software to make my life better, solve the issue I’m facing and/or make it more pleasant to accomplish my goals. I have to say, I’m usually disappointed. In most cases, my dissatisfaction stems from unintuitive, poor user experience design and that app is soon thereafter deleted.
Improve your app’s user experience. Your users will thank you.
Seven years. It’s been seven years and still the vast majority of mobile apps are missing the mark on the basic fundamentals of user experience. Good user experience is what separates the successful apps from the forgettable ones. So how do we create a great user experience for the mobile app you’re spending so much time and money on? At Mobile Jazz, we’ve been creating world-class applications professionally for a number of years now. Here are seven strategies to improve your app’s user experience – one for each year the App Store has been in business.
1. Use Native Components
There are dozens of reasons why you should go native from the start, but here’s the most important one: People already know how to use it! If an application has to tell me how to navigate from one screen to the next, I need to remember that each time I launch it. This does not make my life easier. It makes it more complicated. Don’t reinvent the wheel. If your users are already trained with native UI elements, there’s a better chance they’ll intuitively understand your app and have a good user experience.
You don’t have to invent the wheel every time you design.
The next best reason is design. Animations, transitions, automations, they all look great on native: smooth and perfect. Web-based apps are rife with delays, loading times and controls that don’t react as nicely as they do on native. These have a massive impact on user experience.
Lastly, your app will automatically upgrade with iOS changes. When iOS designs are upgraded, like from iOS 6 to iOS 7, your fully native app just needs to be recompiled and you instantly have the newest version in the App Store with the latest iOS design.
2. Keep Mobile in Mind
Mobile is NOT web, therefore Mobile UX is NOT Web UX. With mobile, the screen is smaller and the fonts are larger, so we can’t overcrowd the screen with tons of actions, buttons and links like we do on the web. Instead, use the reduced real estate to your advantage by using it as your guide to keep your app simple and useful.
First, the lack of screen space means that user flows (app navigation) must be simple and straightforward, with a sense of “back and forward” when manoeuvring through the app. Buttons should be placed in the appropriate areas and must be simple, big and clear.
Since we can’t overcrowd the screen, but we still need to use large fonts, we have to ensure we place close attention to creating a fluid and scrollable app design. The design must adapt automatically to any mobile device so be sure to structure the information in a sensible format.
Most importantly, be useful. One app = One main feature. If your app does too many things, users will no longer use your app for their key actions. Focus less on displaying an abundance of information (let the web do that), instead make sure your app serves as a utility. In other words, do one thing really, really well.
Whenever your app is doing something, like loading, computing, rendering an image, etc, that blocks the user from continuing their app experience, be sure to inform them what is happening. If there’s one thing we’ve learned by creating hundreds of apps it’s that people have zero patience for ambiguous delays. If your app needs more than one second to complete its task, communicate that to your user with a spinning wheel, progress bar or another type of simple alert.
It’s important to note here that you should allow the user to “cancel” the action that’s causing the delay only if absolutely necessary. Users can wait, that’s not the problem, but they have to know how long the process will take. If the delay is long, say more 6 seconds, you can include a cancel or quit button.
4. Creative Corner Cases
Sometimes, designers only prepare specs for the best case scenario of their screens. However, in an app everything is dynamic and there are lots of corner cases that threaten the overall user experience. Here is a list of the most common corner cases that most apps need to address:
- The content hasn’t loaded yet
- After loading content, there are no results
- Error while loading content
- Buttons are pressed, selected, or disabled
- Content is too heavy or the content is lacking
- No network is available
In order to provide feedback to the user as to what happened, the natural instinct is to prompt an alert explaining the reason for failure. However, this can often be too wordy and after the user dismisses the alert, the screen still displays a poor design as there is no content to show.
Don’t leave your users hanging with no response.
A better approach is to avoid prompting alerts altogether and instead, prepare your screen design for all possible actions. For example, why not display a big crying dinosaur with a text message in the middle of the screen when something goes wrong? Creative displays make your app more attractive, nicer to use and much more fun.
5. Map It Out
I know we already had a “Mobile in Mind” section, but navigation warrants its own section. Website navigation can be somewhat chaotic – any page can link to another, buttons can fly all over the place, fonts and images can run amok and it can be downright confusing. However, there’s more leeway with web because users are accustomed to creating their own navigation path by clicking on links as they please (I can almost hear Web UX professionals shriek right now). But it’s true. Unfortunately, we don’t have any of that room for error, er spontaneity, on mobile.
Mobile app navigation relies on a tree pattern. This means a screen (equivalent to a page on a website) has a limited set of options to navigate across pages and at anytime a user can choose to go “back” to a previous screen. This tree model forces us to follow certain rules very carefully:
- We cannot simply switch from any screen to any other screen. We must always follow the navigation tree.
- All previously visited screens are still alive and ready to be displayed when the user goes “back”, therefore these screens must be updated and remain cached for the user.
- When navigating down the tree we need to keep all new screens in the “context” of the previous screen. For example, if we start on our “profile” screen and we go down the tree, we should easily be able to find things like “profile settings” or “my timeline”, but not non-profile related screens like the “closest sushi restaurant to my current location”.
- The user must always be able to use the “back” button to go backwards and start new actions. It is a poor user experience design practice to link directly between the various internal nodes of the tree like a website is able to get away with.
Every mobile platform (iOS, Android, Windows) has its own set of guidelines on how to best implement the navigation tree pattern. On iOS, there’s the navigation bar with buttons. Android has physical buttons to get more details or go backwards, and Windows also has its custom approach. In order to design the best user experience, it’s critical to understand the guidelines of your desired platform first and then design and implement them into your application.
6. Animate Your Transitions
Maybe it stems from happy childhood memories, but users love to see animated transitions whenever they complete an action within an app. Nice animated transitions are also an effective way to keep your app light and dynamic, creating seamless flow from page to page.
Create seamless flow from page to page
There are a few key best practices for implementing animations:
- Animations/transitions should always be used to help the user complete actions.
- It is a commonly held poor practice to have animations without a prior user action. Things moving within the screen automatically may confuse the user.
- Use animations to help the user understand the actions that can be completed. For example, Tinder uses a sliding screen (to right or to left) to help a user decide between “i like it” or “i don’t like it”, while Gmail’s new Inbox app uses sliding cells to “archive” that content.
- If possible, create a specific animation that meshes well with the main feature and personality of your app.
- Don’t overload your app with animations. It’s ok to have one or two, but too many may be annoying, or even worse, confusing.
7. Kill The (Error) Messenger
Error messages are deadly to great user experience design. Not only is it unpleasant for the user, but usually compounds the mistake by leading to poorly designed popup messages. As we mentioned before, instead of simply showing an ugly, irrelevant error code to the user, implement a new approach that offers alternative options to the user to correct the problem. A common fix is a clean and clear link back to the starting point before the problem occurred, or a new screen that offers an alternative path to complete their task.
When in doubt, skip the alert and put that sad little dinosaur on the screen directing them back to the home screen. He’s a lot more fun than a error code popup with an “Ok” button.
In the end, in order to be successful you need to treat user experience as a critical part of your overall product strategy. Your mission must be to improve the user’s daily life or their work in a memorable way. Launching an app is not just about design or about creating something “beautiful”. It’s about building a successful, useful and rewarding experience for your end user, and that happens on purpose, not by accident.