Using Animation in Web Design

by | Dec 8, 2017 | Informative Blog, Website Tips | 0 comments

[H]ave you thought about using animation on your website?  Even if the answer to that question is yes, you may have reservations.  What about the impact on site loading time – isn’t that a key point for SEO web design?  Won’t animation just be a distraction from the main message of my website?

The good news is that animations have moved away from FLASH technology, which did tend to increase loading times.  They are now created using CSS coding and JavaScrpit that can add animation to a site without overloading it.  Additionally, far from being a distraction, web designers and developers with experience and qualifications in computer animation will be able to use their skills to enhance users’ online experience.  In fact, the use of motion and animation was recently highlighted in an article from Inc.com. Animation will continue to trend in web design and it is increasingly important for small businesses.

What is Web Animation?

Animation used in web design can range from simple movements, such as a button that changes color when a user hovers over it. To something much more complicated like a character that walks across the screen. It can even be an animated film or cartoon that advertises a product. The trick is to get the balance of animation right for your site. According to a user experience research firm, the Nielsen Norman Group, careful consideration should be given to the goal purpose of an animation. Not just to have it included in a web page or application.

How Can Animation Improve My Website?

Animation can make your website easier to use. You can alert users about new features or pages on your site. Or attract their attention to something that they need to do.  For example, a log-in form could shake to show that information has been incorrectly entered.

Whilst animation can be great for grabbing a visitor’s attention. It can also be used to keep a visitor interested and stop them from leaving the site too soon.  A great example of this would be a loading sequence that keeps a user engaged even before the website is fully loaded.  A screen could load in different stages with different elements sliding in from either side. Or its content could cascade onto a page.  A further benefit of animation is that it can help users find their way around your site.  For instance, menu items can be set to fade away once a user has chosen where they want to go.

Using animation on your website can be a great way to make it stand out.  However, you should always remember that it should enhance the user experience, rather than simply be a distraction.  Used carefully, animation can serve as a guide to users around your website. Finally giving them the best online experience without diluting your core message.

Feature Photo by Glenn Carstens-Peters on Unsplash.