What if, as a proactive frontend developer, you decide to enhance the Feel of your interfaces? I'm talking about adding a touch, just enough to make a difference.
A good UX could be what makes the difference between a user that will bounce off your product or a user that will become a monthly active user; the kind of person that will finally ensure the success of your business. The first responsible for a good retention is an elevated UCD (User-Centered Design) ensuring predictable behavior, visual consistency and making the user comfortable using the app. When it comes to fine-tune the best design for the humans that will potentially use your product, knowing them well is key. Useless to say it will comes with well conducted user researches to gather insights and feedbacks throughout the design process to make sure hierarchy, accessibility and simplicity are at the top level while navigating your app.
As I said above, your job is to build something that a human will use and appreciate. And what does every human have in common? Emotions.
<aside> ☝️ Speaking of motion and emotions, let me share with you the talk Motional intelligence from Cyril Mottier (CTO & CPTO at my previous company). It talks about the impact of animations on user’s emotions using your app.
</aside>
The impact of animations on psychology is pretty huge, and that’s something Apple understood well back when the first iPhone came out. What made a huge difference between iOS and its competitor is its user-centric design and the emotions the product used to give while using it. iPhone’s Operating System was way ahead of its time and we can easily say that the feeling navigating through the apps were really something. How and why did navigating in iOS and seeing its animations used to feel so smooth? Well, when you’re building something user-focused, that could be used by everyone, you should build something that everyone can rely to. Every day physics is something that concerns everyone, it is what make reality predictable in a certain way. In real life, nothing can pop from one frame to the next one in front of your face. Everything comes with a mass, a velocity and a direction naturally. That’s what Apple designers understood when building their product. They had to build an OS that will please the human eye and would be like the real world in a certain way. That’s when they came with one of the greatest idea in the UI world: physics-based animations.
A quick video illustrating first iOS versions animations for record.
A quick video illustrating first iOS versions animations for record.
When Apple released their first iPhone, physics-based animations were something new to the general public, everyone saw it but nobody did know why it felt so good to see. I personally think that this small idea, in addition to what was one of the greatest UI in the mobile world, did became the root of the iOS success. People used to try their friend’s iPhone, opening apps, browsing photos, sliding through iTunes albums and thought “I want one too”.
“Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity.” - Andy Matuschak (ex Apple UI-Kit developer)
We predicate a lot of things using maths while engineering. Physic-based animations will, instead of using incremental functions based on tan sin or cos curves and timing given in seconds, use more complex functions to which we’ll pass constants corresponding to real-life properties. Libraries programmatically using spring physics for example use a certain amount of constants like mass, tension and friction that are values that will predict the behavior of a spring suspending an element.
useSpring | Framer for Developers
Framer motion became a standard in the industry lately thanks to its huge amount of tools and hooks, including a useSpring hook.