5 Quick UI Animation Tips to Make Your Website Move Users

Gone are the days when Flash ruled the web in terms of motion design, animation and interactivity. This is when I got my start with web development and design, and it was the time of the uselessly dreaded Y2K bug and when the dot com bubble went ker-plop! In retrospect, things were simpler back then. Motion design, animation and sophisticated interactivity were all under one roof with Flash and it was super fun to design, animate and develop all within one platform. That being said, it was also the days of skip intro sites and nobody misses that.

Flash forward nearly two decades later (😬 eek!) and here we are. The web is a far better, albeit far more complicated place to be. Animation is everywhere on websites and mobile apps. It’s often executed beautifully – and this time, under the hood, it runs mostly on CSS and JavaScript.

Okay, enough of this elder nerd reminiscing, and on with the website user interface (UI) animation tips!

  1. KISS – Keep It Subtle, Stupid
    For users, the best implementation of animation may be something they barely even notice. Keeping animations small, short and subtle can add polish and finesse to a website or user interface.
  2. Inform and Guide – Don’t Just Wow
    Movement in your design or app UI should bring meaning. Maybe it’s a small promo zooming and fading in quickly to draw the eye, a navigation menu sliding in from offscreen on mobile, or a “We’ll email it right away!” message that swings down from a “Get Your Free White Paper” call to action button when your mouse is over it.
  3. Have Purpose
    Animation in UI should always have a purpose for the user. Think of dismissing a mobile browser window by swiping to make it gracefully fall off screen.
  4. Be Quick About It
    Under pretty much all conditions keep your choice of motion short and sweet. An exception to this, however, would be a how-to instructional animation where a substantial amount of information must be communicated.
  5. Practice Moderation
    As with most fun things in life, moderation in animation is key. If you follow all the tips above and then some, but still get carried away with the number of instances and/or variety of techniques or effects you use, you’ll have disappointed – and potentially dizzy – users scrambling for the back button or a different Google search.

Well there you have it. Five useful UI animation tips to help your design guide and inform your website audience. Motion done right can keep users on your site longer, which increases your chance of gaining more legitimate leads and increasing your brand’s awareness in your industry.

Whether you’re in need of a simple website refresh to better promote your B2B products or services or a full-scale redesign, rebuild and migration to a CMS that doesn’t suck, we would love to have a quick chat and get you a quote, plan and timeline pronto. Shoot me an email and let’s get it movin’! 🤘🏼🤓🤘🏼

Tagged with

Brian Larson

In an industry that changes nearly every second, Brian somehow manages to both stay on and ahead of that elusive “cutting edge.” With 16 years of experience specifically in interactive, Brian applies his geeky knack for a wide array of B2B and B2C clients and brands. Brian’s keen focus is on responsive front end web design and […] Read Bio »


Click below to get all the crazy good marketing insight from SCG's B2B Simplified blog delivered straight to your inbox. We won’t bug you too often and we won’t share your email. Promise.