How to design interactions effectively

Get 5 tips on building better interactions and animations for your websites.

Neal O’Grady
November 18, 2015
Web design

A website is not a static brochure. It offers all kinds of opportunities for animation and interactivity. But just because you can animate everything, doesn't mean you should.

The internet constitutes a completely different form of media, the fastest-evolving form we’ve ever built. Just load up a 90s-era website like Space Jam, and compare it to the site you’re on right now.

Big difference, right?

You’ll probably notice that the use of white space, typography, color, and imagery has drastically improved over time. Thankfully.

What you might not notice at first glance is the addition of motion. Page elements animate into place. Links change colors. And buttons grow, glow, and move to-and-fro as you hover over them.

The power of dynamism

Unlike graphic designers' work, your designs aren’t static — they’re dynamic, shaped by how people use interact with them. That’s what sets web design apart.

So now that we have this dynamic power, should we start making everything spin, twirl, bounce, and change color? Absolutely not. That’s like adding a new sound and transition effect to each slide and bullet point in Powerpoint. Nobody likes that guy.

The real question is: how can we effectively add animations and interactions to our designs? Let's find out.

Effective website animations and interactions possess 5 qualities. They’re:

  1. Subtle – Animations should enhance, not dominate. Visitors should barely even realize they’re happening.
  2. Natural – Animations should look and feel natural, not robotic and jarring.
  3. Informative – Although you should always strive to make your designs self-evident, when you’re trying something new, animations can provide subtle cues to provide context.
  4. Rare – If everything’s moving around and demanding attention, nothing will get it.
  5. Fast – Slow animations can make people think a site’s broken or non-responsive, leading them to bounce.

Let’s explore each of these points in more detail so you can make the most of your animations and interactions.

Animate subtly

Good design is obvious. Great design is transparent. – Joe Sparano

It always astonishes me that something that takes countless hours of tweaking to get just right can be digested in seconds.

“This is great. When can we launch?”

They just glanced at it, and they liked it. It didn’t require thought.

But that’s the ideal end result with design. A fantastic design is subtle. People shouldn’t even notice your animations consciously.

So why add animations if people aren’t even supposed to notice them? The key word is consciously. Because your visitors' subconscious minds definitely notice animations. Effective, subtle animations make your site feel better and more sensible. Animations should enhance the interaction without overpowering the content.

The best designs get out of the way and let people do what they need to do as easily as possible.

Interactions should match the tone of the site

Your animations should always match the aesthetic and tone of the site you’re building. If you’re building a site for kids, you can be more showy and bouncy. If it's for a luxury watch brand, be subtle and elegant.

‍Which animation do you think is better for an ecommerce site or consulting business?

Animations should be au natural

Animations should never be linear. Linear animations are jerky and awkward. They remind people of robots and machines, and are anything but natural. They’re actually a bit uncomfortable to watch.

Instead, make your animations and interactions smooth, and their easing (their speed over time) natural. For example, an easing of “ease-in” starts slowly, and accelerates until its end. An easing of “ease-out” starts abruptly, but slows down near the end. Linear easings have a uniformly increasing speed throughout the animation.

Keep it natural by using more natural easings like “ease,” “ease-in-out,” and more complicated ones like “ease-in-sine.”

‍Here's how you set the easing in Webflow

Interactions and animations should be informative — not just special effects

Your site isn’t a Transformers movie where explosions, giant robots, and Megan Fox cover up a simplistic, rehashed plotline.

Your sites serve a purpose: either to convey information or enable a transaction. So your animations should help your visitors’ with these tasks, and not just be overt flourishes designed to wow them.

Sites full of whiz-bang animations exist, and they can be really cool, but clients rarely pay for them. Instead, they’re built by designers and developers playing around on a Tuesday night. If the site's for a client, stick to informative animations.

But what’s an informative interaction? An informative animation enhances the user experience (UX). For example, buttons and links should should let people know they’re clickable. It helps remove the guesswork.

Motion draws the eye. That means animations can also be used to guide visitors to the next step or inform them of something potentially tricky.

In a perfect world, your sites will be clear as day on every page. But if you’re doing something a little different, like a full-height hero section, then some sort of visual cue—like a subtle arrow bouncing on the bottom of the page—can be extremely helpful.

The best animations provide purposeful guidance.

Animate sparingly

You can’t be subtle or informative if everything has some sort of animation. This is especially true if you make each animation unique.

For example, if you animate page elements into place as you scroll down a page, then don’t make the first one fade, the second slide, the third one spin, the fourth one checkerboard.

Just make them all the same. If you must add variety, have page elements on the left of the page slide in from the left, and those on the right slide in from the right. Animate similar elements in a similar fashion.

And only add a hover interaction on an element when people can actually do something with that element. On-hover animations are just confusing if you can't actually click, drag, or do anything with that element.

In other words, only add an animation when it actually helps your visitors.

Don’t keep people waiting

People have no patience on the internet. Every second of delay on page load decreases customer satisfaction by 16% and reduces sales by 7%. Making people wait can wreak havoc on a site’s profitability.

And people don’t get any more patient after the site’s loaded.

Note: Want to keep visitors on your site? Learn how to boost your site’s performance.

What does this mean for your animations and interactions? They should be fast.

After all, no one’s going to hover over a button for 2 seconds, no matter how dramatic your rollover effect looks.

Okay, maybe some will—the first time. But what about the third time? Or the twentieth? Think they’ll still have the appreciation and patience for a slow animation then?

Same goes for the complex, multi-stage loading animations and introductions we used to build in the days of Flash. Nobody wants to sit through those. People use the web to find the information they need, or the product they want, and then move on with their lives.

TL;DR: Keep your animations below 500ms in duration to keep them snappy.

Now go forth and animate!

Open up one of your current projects and start using these tips to improve your animations and interactions. It’ll make a difference.

Interactions done right truly take a site from good to great. They take advantage of the unique power that websites have over print media by making it more real and engaging. And clients and visitors alike really love them.

Note: To learn more about adding animations to your page using Webflow's visual web design tool, check out our course on Webflow interactions.

Have some great examples of animations and interactions done right? Tweet 'em at us!

There can be many reasons for a website to exist

I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.

left the tomatoes gif
There’s a reason why the tomatoes are on the plate. But how could you know that?

I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.

guy gif

That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.

Personality disconnect

Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex. 

Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be. 

Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.

girls dancing gif
Take it all in people.

If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience. 

For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation. 

Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list. 

Try not to be on the receiving end of this.

The ones who will make it to the other side are the ones who dared to be different

Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.

The truth is, brands willing to take risks will always come out on top.

So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”

But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple: 

Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.

As you were.

Neal O’Grady

Freelance designer, traveler and all-around web guy.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.