7 Essentials Tips For Animations in Web UI Design

Animation and motion in web design are proving to be the biggest thing in recent years. Everywhere you look, there is some hint of movement – or actual movement in the form of a video or animated tidbit.

But how do you use it? Motion is more than just a good video clip or cartoon character. Creating real motion requires a directed approach and can combine still and moving objects. Here’s how you do it.

1. Be Subtle

As described in the free e-book Interaction Design & Animations, sometimes the best motion is hardly noticeable. It can be a little animation that happens as you move from one moment to the next or the twirl of text as you hover over a button.

Designers can easily obsess over movement and animations, but users just consider them part of the experience. In either scenario, the key is that movements happen naturally without distracting from the experience. The actions should be subtle elements that contribute to the overall look and feel of a website design.

2. Be Direct

Use a hero video or full-screen animation to convey motion and movement. However, you’ll want to consider how you convey intent with big movements on the screen.

The caution with big movement on the screen is intent. Does the motion look like it is supposed to? Does it work with the rest of the design and overall message?

While this usage directly contradicts the subtle approach, either technique can create a lasting impression. When taking the direct approach, test movements to ensure that they work properly across all devices and make logical sense to users. Going with something direct like this only to fall flat, will cause users to abandon your site.

3. Imply Direction and Create Balance

Direction, balance, and depth are techniques that you can use with motion,  or with still objects or images (to imply motion). These elements are often used within an image, video or dominant visual to convey a specific message.

  • Direction: Use directional “pulls”— such as arrows, people looking in a certain direction or weighted objects — to make a user look across the screen in a certain way to focus on a specific action.
  • Balance: Lack of balance also creates a sense of motion. When objects lack balance or the appropriate weight, they create anticipation for falling (which is, of course, a type of motion). Object placement is also important to balance.  For example, an asymmetrical framework can still lead users across the screen while at the same time creating visual interest because everything isn’t so even.
  • Depth: Motion can happen in a three-dimensional space as well. Depth can create a feeling of distance, which can give a user the feeling of being in the place where the motion is happening.

4. Do the Expected

Objects in motion should move as expected. Actions and interactions should mirror reality, making digital objects work just like their physical counterparts

This is a vital concept, especially for app and mobile elements where users will constantly touch the screen to perform tasks or actions.

Think of it this way. You have a music app with a volume knob on the screen. It should turn clockwise to increase the volume and counterclockwise to decrease the sound because that’s how it would work in the physical world. As described in the free -ebook Consistency in UI Design, your site or app should remain consistent with familiar patterns so users don’t get confused.

That’s one of the reasons gravity, for example, is so important for motion. Great user experiences are rooted in reality and great digital interfaces work similarly.

5. Watch Your Speed

The biggest missteps when it comes to motion are often speed and timing. When things work too quickly), it’s jarring and can make users feel uneasy, even if they can’t identify the root of the issue. Users will feel like they’re losing control if everything works too slowly.

You can think of timing and speed almost as you would think of a movie. Imagine you are filming and then watching the motion from your screen frame by frame. Can you take in all the information before the next action occurs? Are you waiting for the next thing to happen?

Speed also creates an emotional and physical response from users. Quick-paced action can feel chaotic and rushed, while slower movements are relaxed or could be considered lethargic. Match the pace of movements to the speed of actions you hope users will take: Do you want them to do something quickly (such as sign up for a form or make a purchase) or hang around the site for a while and explore?

6. Tell a Story

For a motion to have purpose and intent, it is should do something. When it comes to your message or brand, that “something” is to tell a story.

Screen Shot 2015-06-15 at 7.44.10 PM

But don’t overthink it. The motion does not have to tell the history of your company.  Motion can tell a story that happens in an instant or moment, such as how to click a button or how to interact with your site. When it comes to your story, think about what users should take away – is it to perform an action based on the message (call to action) or to remember who you are (informational)? Let the answer determine the type of story you tell.

 

7. Determine How to Use Motion – For the Interface or for Aesthetics

Proceed with caution. Too much movement can make a user motion sick. Seriously. Do you want to visit a website that uses parallax scrolling effects with dancing characters on the screen and buttons that change shape every time you whisk the cursor by? Probably not. It would be quite overwhelming.

So decide how movement is used in your framework – is it a tool or a visual?

Conclusion

There’s plenty of ways to use actual or implied movement in web design projects. Work with purpose and intent to find the most success. Remember that motion, movement and animation should have a life-like quality (or be so fantastic no one would ever mistake it as an attempt at reality).

Motion and movement in web design will only continue to grow and evolve in the years ahead. Don’t forget that motion is just as powerful a tool for transitioning users between content as it is for adding a bit of background visual delight.

Where is the Beef has experience in creating and designing for major companies like Soweto Theater, Joburg City Theater, Stages Restaurant to name a few. We would be delight to collaborate with you to create and design for you. Visit our website for more information.

3 Responses
  1. I simply want to say I’m beginner to blogs and really loved you’re blog site. Very likely I’m planning to bookmark your blog post . You surely come with impressive stories. Thanks a bunch for revealing your blog site.

  2. I simply want to tell you that I am beginner to blogs and truly liked your blog. Likely I’m planning to bookmark your website . You surely come with excellent articles. Thanks a lot for sharing your blog site.

Leave a Reply