Build a satisfying mobile experience with these 4 simple tips
Satisfying videos are trending on social networks. Naturally, one day my little brother shared this one with me.
Watching it, I felt a weird sense of comfort and well-being. Things were just perfectly falling into place and it felt good. As if it was meant to be. Let me know how it makes you feel in the comments 🙂
And after going to the source and watching many more I started wondering what made these videos so enjoyable? How could I feel such powerful emotions just from seeing someone fit something inside a box or someone power washing their exterior? And then, relating it to my day-job, how could I generate the same powerful emotions from the mobile apps I work on?
Emotional empathy plays a big role, it is the ability to share the feelings of another person. When watching the video I can put myself in the shoes of the person taking it and living the scene through his eyes. The empathy triggers a global sensory reaction, the only sense being stimulated is sight but I can feel reactions in my entire body.
Another reason for the strong emotional reaction to this video is the absence of all constraint or hurdle. It’s as if the person taking the video is all-powerful, nothing can stop his will, the matter completely surrenders to the mind. It’s like a rollercoaster, the stress one feels anticipating that it would not fit is alleviated when the object fits perfectly.
Digital animations can be satisfying too when they have an organic, natural behavior because they respect what our brain expects them to do.
These emotions are visceral, because they emerge from our primitive brain they are more powerful than conscious ones. These emotions are strong and uncontrollable, and that’s specifically why we want to use these mechanisms in our digital products. They will allow us to create an amazing first impression of our product. This is the difference between feeling your body warm up in the sun on a warm summer afternoon and the scratch of fingernails on a blackboard.
Now, come Monday morning, what can we do to improve our mobile apps:
1. Use micro-interactions
Micro-interactions are the visual consequence of the interaction with a digital product. Whether it’s about scrolling, a hover on a button or loading a page the micro-interaction is the detail that will trigger the emotion.
You are telling the story of your product through the actions of the user. A good micro-interaction helps you do just that. It emphasizes an emotion, highlights a moment or points up to a key interaction.
In order to feel satisfying the micro-interaction must give direct feedback to an action and mirror an organic behavior like a respiration, a wave, a bounce, a controlled acceleration. Like the one below :
And to integrate them easily in your product your can leverage Lottie, a great tool built by AirBnB to integrate animations to your product and Lottie Files for examples and inspirations. Or use the powerful animated library in React Native.
2. Use transitions and animations that are coherent with the story you are telling
Transitions, just like micro-interactions, help you tell the story of your product. Make sure they are telling a coherent story.
When interacting with your product the user will build a mental model of your product, it will then define expectations as to how your application should work. If your transitions are bizarre, unexpected you will lose the user like a poorly cut movie.
For example, in the sign up funnel of your app, you can use transitions to link the different steps of the process. At a minimum, lateral transition of screens help give the impression of movement towards a goal. You can go deeper and use elements of the screen to highlight the progression of events.
Transitions also help you remind the user where they are after they take an action in your product. This will reduce the primitive stress and frustration of being lost and make your application more satisfying.
3. Make your app smooth and fast
When you interact with an object you want that interaction to be efficient and feel effortless. For digital experiences it’s the exact same.
Your brain has millions of years of evolution in the real world where actions on things have instant reactions. So if your app is slow, unstable or not flowing it will create a cognitive dissonance with that primitive part of your brain and trigger negative emotions. You want users of your app to feel as if there are no hurdles to completing their tasks, it just works.
To make your app faster you can be tougher on the performance issues you’ll encounter during the development. Don’t sweep performance problems under the rug to fix later. These performance issues are insidious, if you let too many of them slip you’ll soon be overwhelmed. It’s not going to be just one thing causing a bad experience rather the addition of many small things, so stay vigilant.
There is another opportunity for speed and flow for your app and it’s the technology you are using to build it. Over the years, native app development using Java, Kotlin, Objective-C or Swift have been and remain the graal of performance. Because they fully use the capabilities of the OS and give you all the possible options to tweak your work they are a sure way to a fast application. But you have to code everything twice and the languages can also slow down development.
If you have a cross-platform stack, recent advances in technologies such as React Native bring native performance to cross platform apps. If you already invested in a JS stack and developer training, moving to this technology from Cordova or Ionic will speed up both your app and development process.
4. Pump up the emotions of your key features
Tying a key feature of your application to a strong emotional reaction is the best way to create a memorable experience.
Chances are your application has a small set of key features, the reason why your users come to your service. The first step, if that’s not already the case, is to be very specific about these features. Once identified you can start to bring emotions to the table and create a really memorable experience.
In order to find the right emotional experience :
- Document yourself: There are quite a few options out there. You could add a gamification engine and tap into our gambling brain, you could use the hook model theorized by Nir Eyal or you could try to add scarcity to artificially give a value to some digital element.
- Brainstorm with your team or by yourself: The best ideas come from the people that are close to the product such as your team. Be specific about the objective of the feature (increase engagement, boost referrals, improve sales) and then let your minds go wild. You can also use the ideation technique “crazy 8s” from the design sprint framework to generate innovative ideas by yourself.
- Organise user interviews and map their emotional state along the day: your product does not operate in a vacuum, understanding the emotional state of your users before they use your product is important to strike the right tone.
- Experiment: This is a truly exploratory endeavor. Chances are very low that you’ll find the right feature and emotional interaction the first time around. Be quick to build facades that can be tested and learned from in order to hone in on the right one. Maybe using the design sprint methodology
I hope this article helps you bring joy and excitement to your mobile app and get awesome reviews on the app stores. To find the latest inspiration on emotional design you can check out BeTomorrow’s dribbble.
To go further, there are a few interesting articles on BeTomorrow’s blog that explore micro interactions further (fr) and a tutorial to use React Native Animated library (fr).
