Using Animation to Improve Your Website User's Experience

When most people think about animation in design, they think back to the days of Flash, where pages took up to a minute to load and crashed your browser. Those days were incredibly frustrating and after the 2010 Flash Crash, it was suddenly easier to make website functionality and usability top priority.

Enter a new and improved age of web design; the rise of a user experience (UX) movement allowed designers to simplify a website and strip unnecessary elements. As the Internet progressed and technology, like HTML 5, was integrated into every website, animation has become more commonplace.

In some instances, web designers have gone overboard with this trend and created websites that contain more fluff than substance. As you might imagine, this approach can cause major performance issues for the end user. However, those out there using animation tastefully are getting a lot of eyeballs on their sites.

Here are a few techniques with examples that drive home the impact of simple animation:

Subtle Hovers and Zooms – Bad Assembly

As the user hovers over an image, it magnifies and becomes brighter to entice the user to complete the action of a click-through. This is an incredibly subtle effect that adds big value to a site.

Hidden Search Bar with Animation – CSSDeck

This interesting animation allows web designers to hide the main input field, but keep the search icon present. This feature is helpful with complex sites that have a lot of navigational elements in the top bar. If there is ever a chance to simplify navigation—take it!

Display Information – QARDS

By adding a parallax animation and fading the content in, Qards is creating an experience that makes the user feel like he/she is on a page totally separate from the homepage. What’s so great about this feature is that it guides the user through a seamless path on the site without requiring any extra effort.

What are some examples of animation that you’ve seen lately, or want to learn more about?


There are 0 Comments

Leave a comment