Every. Interaction. Counts. By every interaction, I mean every way people experience your business, whether it’s the product, service, marketing or communications. Your brand isn’t what you say it is. It’s what’s it is in your users minds. This philosophy guides everything we do.
Before we dive into a pile of eye-candy, I am going to take a quick side-step to first highlight the importance of harvesting emotional energy in digital user experiences.
A secret of the top growth experts in tech is to think about every UX interaction as an emotional event. Elements of a webpage either inspire us or overwhelm us. Once you understand what elements are adding to or depleting users’ energy, you can then start to manage that energy: adding inspiration and minimizing overwhelm to help users take your core actions.
How does this work IRL
Let’s say a friend recommends a new app to you that helps you manage your wealth. You’re a bit sceptical but you’re still going to download the app regardlessly as you trust your friends judgement.
- You launch the app and it instantly gives you this “AHA” moment where you understand what value this could add to your life. — Boom! positive bias goes up with 25 points.
- The app has a safe and secure appearance. Great! — Plus 10 points.
- You are prompted to enter your email address before you are ready to commit — Minus 15 points!
- You are prompted to enter your credit card details, Why!? — Minus 20 points, and you are closing the app.
Every interaction is triggered with a positive or negative emotion. If you’re hyped you’ll continue, if you’re concerned/irritated you’ll stop. So think of every consequence before asking something of the user. We design every product with this in mind. We call this ‘emotion driven UX’.
Ok, now are you going to show me some cool animations!!1!
Almost.. in just a few decades (web) interactions seem to have come full circle. Coming from the bare bones semantic web where function and data structure was key, we soon started seeing small design improvements and animations being added. Simple link states and text formatting were added to emphasise certain elements of the page.
Then things started to (literally) spiral out of control.. You thought the <BLINK> tag was bad? Well hello Shockwave/Flash!! Minute long pre-loaders, balls rolling into the screen and opening into menu’s… It was an over the top mess, and websites seemed to be turning into designer showcases rather than usable products. Even today, when there’s too much happening on a design, people call it “flashy”… (I’m pretty sure that’s not a coincidence 😉)
Fortunately the rise of mobile devices forced people back into reality, and gradually everything became more structured, simplified and returned to its core. Functional was the norm once again. Websites became increasingly more complex and contained a lot more information, which required UX Designers to think harder about making complicated data structures simpler en understandable for the user.
Nowadays devices are smarter and stronger than ever before and apps/websites are offering more and more information and functionalities. If we don’t want to overwhelm our users and keep things within their grasp then it is time to continue our cycle and start realising the importance of a new step of Meaningful Motion in design.
What is Meaningful Motion
Motion is essential to bringing digital products to life. Something as simple as tapping a card to expand and reveal more information is made better by fluid animation. New content is introduced, shared elements move into their new position, and the user is given guidance with a clear focal point by connecting spatial relationships and different contexts of the content. It can help guide users through a specific task or flow and can give more meaningful feedback and show causality during complex tasks.
Of course, there are many stumbling blocks on the way to achieving these kinds of results. Many of the animations we create are too complex to translate directly to code, so we have to be creative and rely on interesting approaches like internal motion tools, as well as the use of .gifs and MP4s.
At the end of the day, animating fun and delightful stories and interactions is not easy, but the payoff is priceless.
Ok, here comes the visual awesomeness!
Enough theory, let’s dive into some recent examples from our portfolio.
Add to ‘watch later’
To educate the user where to find their ‘what to watch next’ content we show them where to find it through this flying cover animation.
In & Out
When you know where you are, and more importantly how you got there, navigating back and forth is much more intuitive.
Downloading progress
Nowadays super-fast internet seems the norm, but for one of our African clients (Showmax), we were challenged with relatively slow internet connectivity.
Showing a standard progress-bar could suggest the download is hanging or doesn’t work. So for this issue we designed a ‘dynamic progress-bar’ which gives you feedback that the download is actually in progress.
#MotionMonday
When writing this post and searching our projects for meaningful animations, we got all excited. That’s when we decided to make this a monthly thing. So if you want to stay up to date on the latest trends around meaningful motion, follow us on one of our socials.
Thanks for reading.
+Drie team
