When designing websites and apps, user experience should be the primary concern. If your product isn’t user-friendly your audience is going to move on and find something easier to use. It’s as simple as that.
One technique for improving UX is animation. By bringing aspects of your site to life with animation design, you can draw attention to specific aspects of the experience and add interest. However, as anyone involved with UX knows, every decision made during the design must be based on logic and have a distinct purpose — and that includes animation. Including an animated element shouldn’t just be a matter of adding something “cool” to the design. It needs to be functional, and serve a purpose that improves UX.
With that in mind, there are several animation techniques that you can use to enhance UX while still serving important functions. These add the “wow” factor but don’t detract from the overall experience or create unnecessary confusion or questions about why they were included.
With that in mind, there are several animation techniques that you can use to enhance UX while still serving important functions. These add the “wow” factor but don’t detract from the overall experience or create unnecessary confusion or questions about why they were included.
1. Subtle Animation
When most people think “animation,” they think “Disney movies.” While anthropomorphic animals and singing princesses are one type of animation, animation geared for UX should be subtler. Users should know that something is animated — in fact, research shows that users actually prefer that something on the page moves because it gives the illusion of a smoother experience, not to mention that animation actually increases interaction — but the animation doesn’t have to be over-the-top to get attention. A simple bouncing button to indicate that’s where one should click is enough to get attention, while not distracting from the rest of the page.
2. Use Animation in Scrolling and Page Transitions
Animation allows you to turn site navigation into an interactive experience. New trends in scrolling, including infinite scroll and controlled modular scrolling, are ideal for subtle animation. Animating transitions between pages — a flipping page for a book-related site, or an origami-style page transition, for instance — adds movement without being too jarring or taking too long to load.
3. Stylize Anchor Text
Animation is an effective way to draw attention to anchor text on the page. Use an animation creator to create text that “does something” when a user hovers over it: change color, get larger, highlight, even add a moving click icon to encourage users to click on the text. It’s simple and subtle, but effective, and helps users find the information they are looking for easily without detracting from the overall page.
4. Animate Charts and Graphs
Charts and graphs are appealing to users in general, but adding some animation to them adds an element of excitement and interest — and grabs attention so users don’t just scroll past. Add animation to bar graphs, for example, by having the bars load when a user navigates to the page or scrolls past. Highlight specific data in a pie chart by having highlighted sections “pop out” from the pie with animated descriptors. Show changes over time with an animated line graph. Animating your charts taps into the natural human tendency to pay attention to movement, increasing the chances that your information will reach the audience.
5. Animate Forms
The most common way that users interact with your site is via forms. So why not animate them to get more attention and increase conversions? Animation helps make your forms more usable — for example, asking one question at a time via an animated form, or offering animated dropdown menus with answer selections — while also more interesting. Even including subtle animations, like highlighting the “send” button, can help drive users to the desired behavior, making it easier for them to follow through on calls to action and improving your response.
6. Offer Visual Feedback
When users do something on your site, such as sign up for a newsletter, download a resource, etc., it’s helpful to know where they are in the process. If they respond to an offer, they want to know that the response went through, and where they are in the process. Animations can offer this visual feedback that gives users a breakdown of where they are. One company that does this well is Domino’s Pizza. When customers order food for delivery, they are taken to a page where an animated guide shows them exactly what’s happening with their order and when — and gives them an idea of when they can expect their food. It’s interactive, fun, and a better experience for the customer.
Incorporating animation into your site or application design doesn’t mean having to create complex videos with fully developed characters and storylines. Subtle animations that are logical and enhance the user experience can improve results just as much.
