Looking for a way to breathe fresh life into your website, or draw attention to an important feature? Animations might be just the solution you need. If you’ve been around the Web for a while, you can probably remember the terrible animations of the dial-up days. Those aren’t the sort we’re talking about here.
Thanks to improved code, faster Internet connections, and increased computing power, today’s animations bear little resemblance to the grainy, glitch-plagued animations of old. Indeed, animations have now become a valued tool for any skilled web designer, and an important part of your Calgary online marketing. Like flat design, streamlined animations show off the modernity of your website. You can also use animations to inform, guide, and even inspire your site visitors.
Are Animations Right for Your Site?
Using animations effectively requires clear goals, and a plan to reach them. In other words, you don’t want to add an animation just for the sake of it, as that will just cause a distraction. Before you get started, consider why you’re adding an animation, and how it will help you reach a desired outcome, as outlined by Nielsen-Norman Group.
- Is the animation being used for attention-grabbing purposes? If so, where you place it is just as important as which animation you choose.
- Does the user have to do something to trigger the animation, or does it happen automatically? In either case, how often will the animation play? You may not want the animation to repeat, if it’s primary goal is directing the user to a specific place.
- Are you using animation to inform users? Timing is important when trying to inform, as you’ll want the animation to appear in conjunction with whatever item it’s meant to explain.
- Fun is a perfectly legitimate reason to add animations, as long as you avoid overdoing it. Consider your audience first to make sure they’ll have the desired response to “for fun” animations.
Primary Types of Animations
The end goal of your animation will help you figure out where to place it, and how to use it. With animations, timing is everything, especially when you are trying to inform the user. Placement is important too, and you may be surprised at the best place to present animations that aim to grab the user’s attention.
- What’s more likely to grab your attention, the bright light directly in front of you, or the fly flitting around in your peripheral vision? It turns out that for most people, that fly is simply irresistible. If you’re using an animation to draw attention, your best bet is to place it in the user’s peripheral vision.
- On a website, the peripheral area is basically anywhere outside of the main content body. Placing animations in these areas naturally draws the user’s eye. Animations placed directly in the line of site will still be noticed, but are less likely to shift the user’s attention from their current task.
- Informative animations are very practical tools, but need to be used carefully. A poorly placed, ill-timed, or repetitive animation will ultimately do more harm than good when it comes to informing your reader. The same goes for shifting animations. Any animation that moves as the reader scrolls should be subtle to avoid distraction.
- Forms are the most common place for informative animations, as you’ve likely experienced. As you fill out a particular line, an animation pops up to tell you what information is required, or how it should be formatted. The key is making sure that the timing is right. An informative animation needs to pop up as soon as the user starts working on the related task, if it’s to add value.
As you develop a plan to add animations to your site, remember to put yourself in the user’s shoes. An animation that seems fun the first time quickly grows tiresome if it pops up on every page, or causes problems loading pages. Used correctly, however, they are a powerful tool. Among the current popular trends in web design, animations check in near the top of the list for good reason.
Building an effective website means paying attention to every detail, and Emphasize Design has you covered. Follow our seven steps to a more effective website, and see the results for yourself!
