Functional and delightful, animation is one of the staples of modern web design. Details of interaction design is what makes a fundamental difference on modern websites. Animation can communicate status, guide the users attention, help the user see the results of their actions and even influence behavior.

Here are just a few examples to illustrate places where you can add some animations in your website to improve the experience:

Progression

Loading Animation

One of the most common uses of animation for the web is to distract the user from loading times. Loading animation influences your users’ perception of time, making it seem less than it actually is.

You should always try to make the wait more pleasant if you can’t shorten the line

Loading animation are best when they are simple. Any extra effects such as sound aren’t necessary. Also good loading animation is engaging. When your users have something interesting or fun to watch while they wait, they less focus on loading time.

Progress Animation

Animation can show you your progression through a linear sequence. A classic “loading bar” is the most common example of such animation.

But you can also consider using progress animation for multi-step linear process.  ##Skeleton screens A skeleton screen is essentially a blank version of a page into which information is gradually loaded. Such action creates the sense that things are happening immediately as information is incrementally displayed on the screen. Almost any site can utilize a skeleton screen together with a subtle animation when loading it’s content to keep users engaged.  #Visual Feedback *Animated response to user’s action*

Good interaction design provides feedback, which communicates the results of any interaction, making it visible and understandable. When a site visitor doesn’t know which items are interactive, or what interactions to expect, this lead to confusion. Combat this confusion by thoughtfully designing interactions to be clear and understandable.

Hover Animation for Destkop / Elevation for Mobile

As a means to show an element is interactive, hover effects are one of the most common examples of visual feedback.

However, hover effects won’t work on mobile devices because there’s no mouse cursor. This means that your buttons and other interactive elements should have visual signifers that suggest that elements are interactive before user tap them and provide *immediate feedback after the interaction*. Such feedback indicates to a user that their actions have triggered a response, like button in example below that appear to depress when activated.  ##Attracting Attention It’s well known fact that human eye is attracted to motion. This makes animation the perfect tool for *drawing attention* and *reinforcing the actions a user is preforming*.

For example, form entry can be greatly enhanced with some animation. If correct data has been entered, a simple ‘nod’ animation can be introduced upon completion. Whereas a horizontal shake can be used when denying the input. When users notice such animation they instantly understand the action.

#Navigation *Relationship and transition*

A recent trend is hidden navigation menus that reveal themselves upon clicking on buttons like the hamburger icon. Animation is essential in establishing a connection between the two states, and preventing a jarring transition. A well-designed transition enables the user to clearly understand where their attention should be focused.

Below is an example of Brian Hoff Design website. When user clicks on the circular arrow button, an oversized menu box pops out from the right. The “pop out” animation makes the menu appear as if it slides in from offscreen and makes the whole interaction run smoothly.  ##State Change Without Hard Cuts Transitions are invaluable for indicating changes of state. In his article Smart Transitions In User Experience Design Adrian Zumbrunnen provides a great example on how animation can help user maintain context when they click on a link that lead to the different section on the same page.

Just compare this static instant change which feels like a hard cut:

With an animated behavior:  Later example of the navigation uses subtle animations to help the user see where they are in the article in relationship to the other sections.  #Creative Effects Creative animation can make your user experience truly delightful and memorable. They bring entertainment value to the interface.

Storytelling Long Scrolling

Not too long ago, the rule of above the fold was indisputable. Designers focused most of their attention on making this area full of valuable information. Luckily, we now know that ‘above the fold’ rule isn’t absolute true. In fact, “66% of attention on a normal media page is spent below the fold.” The shift of focus from above the scroll to below makes scrolling an essential element of interaction design.

Animations breathe life and fun into the scroll

The storytelling potential of animations can add an emotional connection to an otherwise dull interface. Instead of the parallax animations which is very common, opt for something subtler. Consider breaking up your site into scrollable “chunks.” Within each chunk, you can introduce the content through animations. Animations in example below make the content “come alive” by animating simple art illustrations.

#Tools and Tutorials

• 15 UI Animation Tutorials. A guide on web animation for beginners.
• Web Animations. Advanced guide from W3 to synchronization and timing for animation in web pages and APIs.
• CSS3 Animation Cheat Sheet. A useful collection of ready-made animations that lets you apply CSS classes to any element you wish.
• Tools To Create Animation With. A list and analysis of 16 popular animation tools.

Conclusion

Design is more than just about visual presentation. Design is about interaction. Animation is critical to communication. We need to embrace the interactive nature of the web from the very beginning and think of it as natural part of design.

Thank you!