How to create killer Animations for Social Media App

There is a good saying:

“Good Design is Obvious and Great Design is Transparent”.

A great design, in the form of Animations can have a tremendous impact on how first-time users engage with the app.

Great Animations are not that easy to ignore, yet they are often taken lightly by the application developers. In Fact, there are a biggest army of those who believed that Animations are the unnecessary burden over user interfaces.

However, when you look with your user’s perspective, you will find out that Animations are meant to denote an essence of real and actual interactions.

Animations make users to actually communicate with the app thereby giving them plenty of reasons to be more active and involved with it such as:

• Enhance the sense of direct Interaction
• Letting people know the result of their actions such as tapping a mobile screen
• Making the users much more involved with an app
• Making your site appeal more attractive and emotion-driven

But, how to make your Animations more appealing and enticing?

Well, the answer lies in “Microinteractions”..

Microinteractions : What kind of sorcery are they?

Microinteractions are the small details that makes interaction within an app more pleasant and interesting from a user’s perspective. In other words, Animations are nothing but a series of Microinteractions executing one after other.

Ever noticed how the “thumbs up” icon on Facebook’s messenger gets bigger and better until you take your finger off the screen?

The Animation which is happening here is the best example of a Micro-interaction. Interactions such as entering a password to sign in a social network, pressing the ‘like’ button of social network, turning off the volume in a video streaming etc. are some examples of different kinds of actions that can be termed as micro-interactions.

Micro-interactions can make the interactions between the app’s UI and user more intuitive and appealing by:

• providing feedback on a certain interaction
• highlighting the status changes within the app
• visualizing the outcomes of user actions
• serving as a call to action

Microinteractions: When to use them?

Dan saffer, Author of book ‘Microinteractions: Full Color Edition: Designing with Details’ once quoted “Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible. Embrace the constraints and focus your attention on doing one thing well. Mies van der Rohe’s mantra of “less is more” should be the microinteraction designer’s mantra as well.”

In the Social media world, although tiny micro-interactions can be helpful to generate any sort of emotional appeal to users. However, there are several use cases where a micro-interaction in the form of an Animation can change the course of your app’s user interface.

Let’s check out some use cases..

The “Like” Animation in a Social network

According to the Manifest’s 2018 Consumer app survey, “liking/ favorite” content is the most widely used feature in a Social Media app.

Now imagine what it feels like if you make the feature more appealing for your users to interact. You can implement the animation like Instagram to make the feature look more interesting.

Data Input

If you have ever developed an app, you will understand how frustrating it is to create an account and setting up a new password. The frustration might also create hackles in your business. So why not make it more engaging? I mean, anything from a good UI of password screen to a password strength indicator might work and let you accomplish your goal.

Tab Micro-interactions

Tabbed widgets looks cool in mobile apps because of the smaller screen. I really love the following micro-interaction implemented by John Noussis. Upon gliding tab anchor arrow to the right, it will give you an illusion of the entire screen physically moving to the right. The entire animation is quite exquisite in its own sense. However, I think it’ll be more effective at a faster speed.

Transition Effects in Photo Gallery

A lot of social apps have lists or gallery containing images as well. To make browsing more pleasant, a very good option is to follow Material Design guidelines and use animation in transition between views.

Tools to implement Micro-interactions in your Social app

So, how can you implement micro-interactions in your social app?

Well, if your app is to be built upon platforms such as iOS and Android then Xcode and Android Studio are tools to design them with code.

Another option to build such kinds of Animation is using Framer tool. But, do note it’s only for available for mac Operating system.

If you are smart enough to know programming languages like React, Angular etc., you can create beautiful animations like such for yourself.

Conclusion

Animations can do wonders for Social Media. In this article, we understood how to create appealing Animations for Social Media users.