Animations should enhance your website, not overwhelm it by killing the user experience. They should serve a purpose and support you in getting your message across to your web page visitors.
Having a website and online presence strategy is important because it helps to establish credibility as a business and allows you to reach more consumers. Your website is often responsible for creating a user’s first impression of your brand, so you want to keep it simple for your customers to fill out forms, find the information they are looking for, or make a purchase in an engaging way.
The first important decision to make, when incorporating animations, is to make sure you’ve set a clear conversion/ impression goal for a given web page’s visitors. Then, define what’s the key take-away these users should get from visiting this page. What message should they leave with? Understanding this overarching goal will allow you to incorporate animations that effectively advance your goal, instead of detracting from it.
Animation or No Animation?
Users prefer websites that engage them without overwhelming them. It’s key to get a feel for what are too few or too many animations for your specific website. Below are some ways to consider using animations:
- Draw attention to your CTA’s (Calls to Action)
If you’re selling a product and want users to click on the “Buy Now” button, you can add animation to this button upon hover. Avoid moving animations on the product’s title or picture, as this might distract users from the action you want them to take.
- Break up content into digestible pieces
Display content in an eye-catching manner by using bite-size pieces that appear upon scroll. If more content is coming up, you can also use an animation to indicate that it will load soon.
- Tell a story
Walk users through the list of attributes of your product/service by animating them as the user scrolls through your page, making their learning experience dynamic.
- Add movement to a static page
A home page with no movement will not captivate users’ attention. By including animations on images or text, you can help ensure users pay attention to your page.
Type of Animation
Once you’ve determined you want to use an animation, the next step is deciding exactly which one is best for your site!
- Microinteractions: these are used on specific elements to make actions clearer and give users immediate visual feedback when performing an action. These usually occur upon hover to help indicate to users that they can click on something.
Elements onto which you may add microinteractions are:
- Action triggers such as CTA (Call to Action) buttons, navigation bars, linked images…etc
- Directionality indicators such as arrows and background scrolling
- Loading graphics
- Notification elements such as ‘new message’ icon or ‘complete order’ button.
2. Transitions and Navigation: these help users make their way across your website more easily by de-cluttering their path, presenting them with only the necessary information.
Elements onto which you may add Transitions and Navigation animations are:
- Hidden navigation bars that are revealed upon hover or click
- Image galleries and slideshows
3. Embellishment: these are additional, unique animations that can make your website stand out. We caution against adding animations where users don’t need or expect them, as this can be overwhelming instead of embellishing.
Elements onto which you may add Embellishment animations are:
- Company logo
- Background animations
- Background animations
Speed and Duration of Animation
Now that you’ve chosen the type of animation to use, you must remember how important it is to make it go at the right speed.
The optimal speed for interface animation has been deemed to be somewhere between 200ms and 400ms.
Note that the duration of the elements on your website should depend on both the distance traveled (if any) and the size of the object.
If you’re feeling inspired and are ready to start your next web development project with us, don’t hesitate to reach out!
If you’re interested in getting a quote on a project idea, please email us at Austin.Beverage@azularc.com. Also, feel free to check out some of our recent projects by clicking here.