The effect of Micro-animations on User experience.

I believe that, given the condition of the web today, the impact of motion in interface designs could not be further understated. I understand that some websites have quite beautiful animations, where everything moves, twists, and turns and gives the impression that we're in a Dr. Strange-themed amusement park. Although they may be quite attractive to look at, I do believe that most of these animations aren't particularly intuitive. But, we won't get into them now because they aren't the focus of this write-up. I’d like to discuss the pop-up that actually "pops upwards" from below, letting your eye track the movements so it doesn't seem jarring and make you wonder for a split second what just happened; the notifications panel that slides in from the right when you drag your two fingers over the MacBook's trackpad; the way tiles pop in and out of the Windows UI... All of these elements, however tiny they may appear at the time, have a way of keeping consumers in sync with what is going on on the screen.

Walk with me.

What are Micro-interactions?

Micro-animations are simple, short animations that play when a trigger on an app or website has been interacted with. Triggers can range from something as common as scrolls, onscreen buttons, cards, icons and text, to physical outside-the-screen elements like trackpads, keys on the keyboard, device knobs and so on. One of the main purposes of UI animations is to serve as an effective tool for communication between the user and the product; they provide visual feedback that informs the user of the result of their action. When a user interacts with an element on the interface, a subtle animation can indicate that the action has been registered and is being processed. This feedback loop helps to reassure the user that the interface is functioning as intended and can prevent confusion or frustration. Interact with the payment buttons below:

Looking at these three examples, it is quite easy to see that it gets better from left to right, -or from top to bottom, depending on what device you’re reading on. You can also observe how almost inconsequential- micro, the animations feel. The image on the left (top on mobile) has a jarring effect that is likely to leave users stuck for a second or two, wondering if their actions had been registered at all. Not having a loading indicator on there, as simple as it seemed, held the model at a great disadvantage. UI animations also help the user follow along with whatever is happening on the screen. By using subtle movements or transitions, the interface can direct the user's focus to important elements or actions. This can be particularly useful in complex interfaces with a lot of information, as it can help highlight the most relevant content for the user.

If you care about user experience, you should care about micro-animations.

"

These animations are fundamentally designed to improve the user experience by making it much more engaging and intuitive. Designers are able to build experiences that are not only simple to use but also pleasurable by paying close attention to the smallest elements of how users engage with a product. One might argue that making experiences functional is the priority, and that “pleasurable” and aesthetics are luxuries not necessarily paramount, and while that is not going to be debated here, we do have to come to accept that it’s not an either/or situation- a good product thrives on the combination of these two ordinances- the form and function, to truly serve its intended purpose. The form is present to push the narrative forward, by providing more visual information about the user’s actions. For instance, the iPhone notification swipe gesture reveals downwards as you swipe from the top of the screen; however, the notification center isn't “located” at the top of the screen- it just unveils and moves a bit as you swipe downwards, giving you the impression that you’re pulling it downwards with the gesture.

A problem, however, that is faced when implementing motion is communication. Designers are often dreamers, who know how to add motion to their design prototypes in the hopes of having developers implement said ideas into the finished products. This isn’t usually the case, as budget, time and skill constraints are issues, and the work more often than not, is finished without the dream realized, leaving the product with half-baked, and sometimes fully missing animations that designers would be powerless to correct in review or be completely unaware of (sometimes due to negligence, or the budget not being enough to fund the designer staying on). Hence, it is crucial for every member of the team to know just how much micro-animations improve the product being made. Looking at you, developer… Aside from the form function argument that elevates the individual product, it is also crucial in the modern product market since people are continually inundated with various digital goods and services. Products need to provide a distinctive and compelling user experience that sets them apart from their competitors in order to stand out from the crowd. One might look at certain products and say, “Hey, this doesn’t look anywhere close to being good, yet it has a large user base that is fine with it.” The truth is, users are fine with what just works as long as it serves two major reasons: There isn’t a competitor, or at least a good enough competitor, out there. Most niche industry products depend on this - supermarket systems, flight systems, internal CRMs etc. The sunk cost fallacy- the amount of investment (time, sometimes money) and history a user has made on a product makes it quite difficult to jump ship. This became the reason for the continual user base of X, formerly Twitter, despite the introduction of Threads, a similar platform with less frequency of changes as X; there is simply too much history on that platform for Threads to have taken over. Note that only a fraction of platforms in the world can boast of this much investment sunk into them. Micro animations also play a part in a product's overall personality and tone. They give designers the chance to add character and charm to the product, which in turn improves its usability, retainability and relatability. For instance, there are more than 5 alternatives to Airbnb, none of which I had any idea of before attempting this article. Say what you will about the actual service of Airbnbs but once you open the app on web or mobile, you can see how focused on experience the platform is when it comes to design. There’s a micro animation in practically every section you venture into, and they are all so done well and fit into the theme seamlessly. I could produce multiple screenshots from multiple Vacation rental apps and you would most likely be able to tell Airbnb’s apart. It is important that we do not overload the user with motion though; the idea is to bridge the gap between the user and a product in ways that feel intuitive and seamless, so we might want to stay away from complex animations that take a while to load or animation that might distract the user. One of the cruxes that users currently have to battle with are interactions and animations that do not serve to push contextual narratives forward; that sometimes even counter-serve the purpose of the platform. As with any tool, the effectiveness lies in the hands of the user.

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus

Get in touch

harfyzz@gmail.com

Connect on LinkedIn

Afeez Yunus

Hire me on Toptal

Afeez Yunus