Unit 4, Interactive Animation

What are interactive animations?

Interactive animations are, to put it very simply, animations that let the viewers participate on more levels than just viewing. Ways in which viewers can be engaged are many. The most typical of these involve sub-menus and show-reels.

Interactive animation services provided by Fudge Animation Studios are exhaustive. Right from interactive info graphics and pictorials to DVD style menu selections for animated videos, we possess all the requisite expertise and experience in abundance.

Why interactive animations are better

Interactive animations seek active participation from the viewers. They allow the viewers to choose the direction in which a video will progress or an info graphic will take shape. Getting your viewers engaged at this level certainly boosts the chances of your business winning them over!

The advantages of interactive animations are listed below:

  • Interactive animations make sure that targeted delivery of a video or an advertisement is possible –better conversion!
  • Interactive animations are known to make viewers stay on your website for longer – lower bounce rates!
  • Viewers decide what they want to watch and what they want to skip – better engagement!
  • Interactive animations are attractive, compelling and convincing – higher responsiveness.

Animations are no longer the very pleasant surprises they once were  nowthey‘re expected.

That’s not a bad thingsince animations bring both practical and enjoyable benefits to a design.

This article outlines the 8 types of web animation that make a site more effectiveand the best practices for applying each.

1. Loading Animations

One of the oldest uses of animation for the web is to distract the user from loading times. Meaning when you open up a app like mobile games for example, it plays a short animation to keep the user distracted before it finishes loading.

As shown in the above example created with the animation editor in UXPin, even short loading animations still add a little sophistication or at least entertainment during the dead time. Loading animations are popular for flat design, minimalism, portfolios, and one-page sites — all of which are basically and mainly simple.

2. Navigation and Menus (Non-scrolling)

In order to save screen space, a recent trend is hidden navigation menus that are revealed by clicking on buttons (like the hamburger icon). For these, animation is essential for visually connecting the two elements and preventing a jarring transition.

Click on the circular arrow button in the below prototype created with UXPin and an over-sized menu box pops out from the left. The “pop out” animation makes the menu appear as if it slides in from off-screen and makes the whole interaction run smoothly.

Animation of a mobile website’s off-canvas navigation drawer

3. Hover

Hover animations are very practical for conveying that an element is interactive. In some cases, this might be the only sign that a button or piece of text is clickable. When a user is in doubt over how an element functions, they tend to move the mouse over it anyway, making hover animations fairly intuitive.

Animation of an interactive app

4. Galleries and Slideshows

Animated galleries and slideshows showcase multiple images without distracting the user.

How fast and how many images cycle are up to the designer, but these decisions should not be taken lightly — even slightly quickening the rate at which images change could give the site an unwanted “rushed” feel.

Galleries and slideshows are easy to use because they naturally imitate real-life photo album functionality. However, we wouldn’t advise that you take that metaphor too far with a isomorphic visual treatment. Minimise the actual design of the slider or gallery, then ensure you show each image for 5-9 seconds.

Animation of an image gallery

5. Attracting Attention

Any biologist will tell you that the human eye is attracted to motion. This makes animation the perfect tool for controlling your visual hierarchy, especially as part of a site with mostly static images.

Animations are a great way to add intrigue to forms, calls-to-action, or even menu items.

Animation of an interactive website











Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s