INNOVATION

UX animation – the basics rules

Good UX animations feel natural, subtle, and unobtrusive. They almost feel like the product is physical and responding to what the user is doing, not like a cartoon that’s been tacked on top. A big part of that is keeping them quick, keeping the motions subtle, and making sure they have a real purpose for...

Last updated: 16 Sep 2021 - 4 mins read

Robin Creative Director

Black UX notepad with an iPhone laying on it

CONTENTS

Good UX animations feel natural, subtle, and unobtrusive. They almost feel like the product is physical and responding to what the user is doing, not like a cartoon that’s been tacked on top. A big part of that is keeping them quick, keeping the motions subtle, and making sure they have a real purpose for being there. First off, they should be very quick. UX animations should be between 100 milliseconds and 500 milliseconds.

And that’s at an absolute maximum! Most of the time you don’t want them above 300 milliseconds or so. That’s really fast! It’s 1/10th to 1/2 of a second, which is much faster than most designers expect. And it might look rushed when you’re designing it and watching it over and over.

Lag time for longer animations

But remember, the longer animation is, the more lag time the user experiences. That becomes really frustrating. Especially on the second, third, or fourth time that you see it. You want the interface to feel snappy and responsive.

The general rule for timing is: the further something has to move on the screen and the more complex the animation, the more time you’re gonna need for it to look natural.

That means you should avoid big exaggerated movements especially on the desktop, where you have a lot more ground to cover. More complex animations take more time and they tend to be more distracting so, keep the transitions simple. Icons don’t need to dazzle users with a dance routine. A simple color changer halo appearing is enough to signal that something’s been clicked.

Avoid things bouncing back and forth and stretching like they’re made of rubber.

D. Laseur – Founder Flatline Agency

You take the physical metaphor too literally, it feels cartoonish and woozy. You also want to use easing to make the timing feel natural. You want things to accelerate slightly when they first start moving and slow down a little bit before they come to rest. Things in the natural world don’t move at a perfectly linear rate. They speed up and down a little bit.

So this box is moving linearly.

It looks stilted and awkward

This one has a bit of easing applied at the beginning and the end. Doesn’t it look better? So a small amount of easing makes things move more naturally and it helps the user’s eye track where something is moving.

Finally, animations need to serve a purpose and they need to communicate something to users. Don’t just include them to try and delight or communicate personality. That gets old quickly. They’re most useful for three reasons, feedback, discoverability, and transitions.

When used for feedback, keep it subtle

Basic principles – UX design

Clicking the cart doesn’t need to show a product thumbnail image, or swing in a big arc across the screen into the shopping cart. Simple color changes on the button and a little indicator on the cart are plenty to confirm that the system understood the user’s click. While you can use animation to draw attention to things that would otherwise be overlooked, don’t use animation to make up for weak signifiers.

The error notification

Showing an error notification sliding into view can be good because it helps users to notice it. Having a dancing arrow icon on a page that has a false floor is bad!

Just make the page look scrollable instead. Animations can also help with transitions because they can provide a visual metaphor for what’s happening. This goes beyond just a fancy loading indicator.

You can use them to help communicate the type of transition that’s happening. On the app store here when you click on an app card, it quickly morphs into a full-screen overlay.

That helps to communicate that you’re looking at the same thing, just in more detail. If that window just appeared instantly, it wouldn’t be the end of the world but the transition helps communicate the relationship between that full-screen view and the card on the previous screen. It also subtly suggests that you can swipe to close it. That can help the user unconsciously build their mental model of how the system works.

SIGN UP FOR THE NEWSLETTER

    By signing up you agree with our privacy policy

    GET IN TOUCH

    To speak with us, call (+31) 613 326 179, send us an email, or reach out to us by chat or What’s App.

    THINKING

    Shopify Summer Editions ’23 – our favourites

    Imagine my Business – Imagine my Store – Imagine my Future This is the hook, Shopify introduces us to the Summer Editions ’23. One of the most powerful updates until now. There have been some changes in the digital world, which automatically affect the eCommerce industry – bringing a lot new opportunities to the field. Personalisation...

    Shopify’s one-page checkout

    By now, we’ve all heard of the Shopify Editions | Winter ’23 and the amazing upgrades that the eCommerce platform will be offering soon.  Shopify is one of the biggest players in the industry, holding a substantial market share in the United States and accounting for over $444 billion in global economic activity. The new...

    B2B with Shopify: Unlocking the Power of Business-to-Business Commerce

    In today’s digital age, eCommerce has revolutionised the way businesses operate and connect with their customers. Shopify, one of the leading eCommerce platforms, not only caters to direct-to-consumer (DTC) businesses but also provides robust features, which Shopify Plus merchants can utilise for business-to-business (B2B) transactions. This article explores the world of B2B on Shopify, its...

    Shopify Markets Pro: The Ultimate Solution for International eCommerce Businesses

    Are you looking to expand your eCommerce business and take over the international market? Yet the complexities of international transactions made you reconsider your decision? Shopify Markets Pro delivers an all-in-one solution that simplifies the process of selling globally. We’ll be showing you all the things you need to know about the new toolkit of...

    The logo of Klaviyo One, a comprehensive customer data platform (CDP) that revolutionises business growth and customer engagement.

    What is Klaviyo One?

    Klaviyo One is the all-in-one platform to grow your business. Klaviyo has always been a powerful email marketing tool, but with the release of Klaviyo One, they are now a complete customer data platform (CDP). This means that you can now manage all of your customer data in one place, and use it to drive...

    Various equipment such as camera are put on the white background

    Omnichannel versus Multichannel

    Omnichannel and multi-channel: what’s the difference? We’re going to be elaborating on the differences between omnichannel and multi-channel. So let’s jump straight into it! So let’s start off with a few definitions. The defintions First of all, when we speak about channels what we mean is a medium through which a brand is able to...

    Discover the power of HubSpot with Flatline Agency

    Discover HubSpot: Transforming Business with Flatline Agency

    At Flatline Agency, we understand the importance of leveraging powerful tools to drive business growth. One such tool that has revolutionised the way companies manage their marketing, sales, and customer service is HubSpot. As a gold HubSpot partner, Flatline Agency is committed to helping businesses unlock the full potential of this platform. In this blog,...

    a black background with white text: May edition newsletter from Flatline Agency

    Your Digital Pulse May Edition: Navigating Tomorrow’s Trends, Today

    Welcome to the May edition of Your Digital Pulse, brought to you by Flatline Agency ®️. As we approach the vibrant summer months, our team at Flatline is thrilled to share a monthly compilation of our most recent updates, expert insights, and strategic collaborations designed to redefine the digital marketing, eCommerce landscapes and beyond. In...

    My Shopify URL

    Your Shopify store URL serves as much more than just an address—it’s the gateway to your brand’s digital identity. So, understanding how to manage and optimise your Shopify URL is crucial. We will show you what a Shopify URL is, how to find and customise it, and tell you why it plays a pivotal role...

    How to activate Shopify Plus from Shopify

    Upgrade to Shopify Plus seamlessly with our guide. Discover the benefits, steps to activate, and advanced features for your growing eCommerce business. As eCommerce continues to evolve, businesses are seeking platforms that offer robust features, scalability, and seamless integration. Shopify Plus stands out as a top-tier solution for large-scale eCommerce operations. If you’re currently using...

    TCO blog featured image

    TCO in eCommerce platforms: an in-depth comparison

    Understand the TCO for top eCommerce platforms. Compare initial and ongoing costs for Shopware, Shopify, BigCommerce, and more! When it comes to selecting an eCommerce platform, understanding the Total Cost of Ownership (TCO) is crucial. TCO encompasses all expenses associated with purchasing, implementing, and maintaining a solution over its entire lifecycle. For businesses looking to...

    How to optimise your ad campaigns with the latest AI tools

    Discover how AI can transform your ad campaigns with tips on targeting, personalisation, creative optimisation, and programmatic advertising. Boost your ROI now! We all know that it is crucial to stay ahead of the competition when in comes to the world of digital marketing. One of the game-changing tools we have today is artificial intelligence....

    Hubspot Spotlight Spring ’24

    Hubspot just released their Spotlight Spring ’24 Editions… and let’s put it like that – they definitely did not dissapoint…. Since our favourite CRM-software just released over 100 new updates making all our work even more seamless to use we’re excited to show you the biggest ones. We will guide you through the 3 new...

    Flatline Marketing Services: Your digital pulse

    Discover how Flatline Agency tailors digital marketing solutions to boost your eCommerce success with the right tools and effective collaboration. Introduction At Flatline Agency, we know that understanding and connecting with your target audience is a crucial part of digital marketing. Our strategies include targeted SEO, engaging social media campaigns, and more. We believe that...

    HubSpot vs Salesforce featured image

    Season 3/5: HubSpot vs Salesforce: find the best CRM for your business

    Explore the benefits of HubSpot and Salesforce to determine which CRM best suits your business needs. Introduction Choosing the right Customer Relationship Management (CRM) system is crucial for efficiently managing customer interactions and business processes. Among the myriad of options available, HubSpot and Salesforce stand out as industry leaders. Each offers distinct advantages depending on...

    HubSpot Email Marketing

    Season 3/4: HubSpot Email Campaigns: manage and optimise responses

    Learn how to boost your email campaign’s effectiveness using HubSpot’s tools for tracking, optimising, and personalising your email strategies. Introduction Email marketing remains a cornerstone of successful digital marketing strategies. As businesses seek more refined analytics and automation capabilities, tools like the HubSpot Email Marketing become indispensable. The platform not only provides robust email marketing...

    This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.