Smartphones handle interactions far differently than desktops. Users have a much more intimate relationship with their phones and tablets because they work solely on touch, swipe, tap, and finger movements.
The best mobile apps use interaction states & animations to create a lifelike experience. It can seem like a complex topic but in this guide I’ll break down the details of mobile interactions covering how they work and how you can build interfaces that feel simple and fun to use.
Design With Microinteractions
Even the smallest details can have a big impact on an interface. The details I’m referring to are commonly called microinteractions, or little responses given by the interface after a user does something.
The goal is to mimic how the real world operates by creating interfaces that do the same. When someone pushes a button it should cave in. When an on/off switch is toggled there should be a believable motion like a real switch.
While you’re looking at the details these may not seem like big changes. But consider the above example of a todo list app created by Jakub Antalík. It demonstrates a few big microinteractions based on the user’s input:
- Completing a task
- Deleting a task
- Adding a new task
Each motion feels similar because the content “drags” along with the user’s tap. This brings a certain consistency into the design which I’ll cover later in this post.
But microinteractions should form the basis of your interactive design work for mobile. Consider how the interface looks and how it performs when users take an action.
Here’s another great example of a prototype to-do list application, this one created by Anton Kosolapov. The subtle animations and page effects occur when different actions are taken on the interface.
So when someone taps & holds on a to-do item it’ll appear to lift up above the others. This makes it easier to drag around the page and find a spot to drop it.
Also notice that once it does get “dropped” into place it uses a slight “plopping” animation effect to drop it down to normal size. This subtle effect is easy to miss but it’s the perfect example of how microinteractions look.
Users often take these animations for granted because they feel like they’re just a natural part of the interface.
Planning great microinteractions stems from understanding user actions. Make a list of all the actions a user can perform on any given page, then map those actions with final results(ie. what happens when the user taps a button?).
From there you can determine what sort of microinteraction would make the user feel good about the accomplished task. Your goal is to let the user know that their action successfully happened.
Whether that’s liking a photo, following a user, or deleting a to-do item from their list, the goal is always to complete that task.
If you can develop a keen eye for microinteractions you’ll begin to see them everywhere. And over time you’ll realize how important these are to mobile UI design.
Keep Animations Consistent
Interactive applications should always place usability first. And one aspect of modern usability is consistency across the board.
Users should know how to do something without being told how to do it. This seems like UX design 101 but it relates to every page, every animation, and every application.
When you get into microinteractions you’ll need to consider how animations work and what makes them tick. This is where custom app animations like in Charles Patterson’s example should feel consistent and fluid throughout the whole UI.
Notice how each animation has the same easing effect. Elements bounce out slightly and there’s a very slight delay to the movement.
Subtlety is the name of the game and you won’t win the game without consistency.
Granted this doesn’t mean that every single animation should behave the same. Rather you’ll need to consider how the app “feels” and what makes each animation effect blend so nicely into the interface.
I think this health app UI is an extreme example of animation. I think it pushes motion to the limits, but it also works well and you’ll notice consistencies with each animation between pages.
If you keep your eye on that blue glowing line you’ll notice how it animates throughout every page. It moves in a natural curve where it always seems to find its way into the interface.
This animation technique feels very organic and it’s one of the simplest ways to get users interested in your application.
Spend some time planning your animation strategy before diving into the final design/coding stage. If you know how animations should look you’ll have no trouble keeping them consistent.
Here are some guides on UI animation to get you started.
- Animation & UX Resources by Val Head
- Jedi Principles of UI Animation
- UI Animation and UX: A Not-So-Secret Friendship
Explain Interfaces With Visuals
Mobile devices come with smaller screens and there isn’t as much room for buttons, features, and copy. This is where “show don’t tell” is worth putting into practice.
Every part of your interface should encourage some type of user interaction. What can a user do when first opening your app? How would they do that? And more importantly, why would they? What’s the end result?
These questions can’t always be answered directly so they need to be implied through good design. The principles of design rarely change so it’s a good idea to study form, color, type, size, and graphics like iconography.
Learn to tell users what’s happening without specifically telling them. It may seem confusing but once you start building apps(and studying them) you’ll realize how this works in a real-world situation.
The above interface designed by Minh Pham shows a location scanner app. It performs a search for nearby restaurants, movie theaters, and other businesses.
Every state of the application tells you what’s going on. The initial loader animation implies that something’s happening on the backend. The text underneath reads “scanning your location…” which tells the user what’s happening.
Once everything loads it displays a big total of 26 items found in the nearby area. The user can then swipe up to browse through the list and sort by categories near the top.
All of these elements expect a certain behavior, but they don’t tell the user what to do. Interactive interfaces need to guide the user through the process of taking action, rather than telling the user exactly what to do.
Another solid app animation is this survey scale designed by Budi Tanrim. It shows how clear visuals impact the interface and guide interactions naturally.
Yes this does have some nice animations and yet it is pretty detailed. But each screen has a fairly clear objective with many obvious interactive elements(the CTA, the rectangular dot navs, the sliding bar).
When you focus on how interfaces work you’ll have an easier time planning the elements that encourage behaviors.
And if you’re ever not sure about something you can run usability tests to gauge audience opinions.
Design Realistic Experiences
Mobile apps have a certain expectation based on how they look.
Users expect certain things to happen when they tap, swipe, scroll, or do anything similar on a mobile device. The application’s response should mimic these interactions to give a realistic feeling to the design.
This design is one of my favorite examples created by Canadian designer Aurélien Salomon. It’s a Craigslist mobile app UI with a full animated interface.
When you flick up & down the page you’ll find a very subtle animation effect. This auto-hides the navbar and creates an experience that places focus on the interface. These animations feel realistic and they guide the user through certain behaviors like browsing listings or applying search filters.
Every single interaction is an attempt at a goal. Users don’t just flick the page for no reason. They’re trying to do something or get somewhere in the application.
Your job as the designer is to create a realistic interface that fulfills the expectations assumed by your users. If the user sees a search icon in the corner then they’ll click to search and aim to filter the results.
This example by Ukranian designer Anatoliy Nesterov is perhaps the clearest solution for filtered search.
All filters drop down from the top and can be tapped to expand. The user inherently knows to tap each item because it looks like a navigation list. And when the item expands the user then understands how to change form fields without explanation.
I hate to use the word “normal” but that should, in a way, be your goal. Create an application that feels “normal” and blends into the app ecosystem.
Designing interactions should not be a painstaking process. In fact, it’s basically the only process!
Whenever you need to use a mobile app on your phone or tablet watch your behaviors and make notes of each screen. Notice when you feel confident about making a tap/swipe and ask yourself why you did that.
Eventually patterns emerge and you’ll develop a much broader sense of what a realistic application feels like.
Interactive mobile apps make up the vast majority of all mobile applications. True interactivity goes beyond just hitting a few buttons or typing some text into a message field.
Instead it boils down to a real experience where the user needs to accomplish something and gets it done. That’s why mobile interactions are so valuable and that’s why I recommend following the tips in this guide for any mobile apps you design.
Over time your design process will become much clearer by focusing on the user’s interactions instead of solely on the design.