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.
Okay, enough of this elder nerd reminiscing, and on with the website user interface (UI) animation tips!
- 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.
- 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.
- 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.
- 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.
- 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’! 🤘🏼🤓🤘🏼
Click below to get all the crazy good marketing insight from SCG delivered straight to your inbox. We won’t bug you too often and we won’t share your email. Promise.