Animating the Web
Animations have become an increasingly popular way of enhancing the user experience on the web. They add a level of interactivity and engagement that static designs cannot provide. Animations can range from subtle transitions to complex, eye-catching visual effects. They are used in a variety of contexts, such as in website navigation, form validation, notifications, product demos and much more.
One of the primary benefits of using animations on the web is that they can help to guide users through a website. By providing visual cues and feedback, animations can help users understand where they are on a page and how they can interact with it. For example, a subtle hover effect on a button can indicate that it is clickable, while a smooth scrolling animation can indicate that there is more content below the fold.
Despite these benefits, there are also some potential downsides to using animations on the web. One of the biggest concerns is that they can slow down the performance of a website. If animations are not optimised properly, they can cause a website to load slowly, which can lead to a poor user experience.
Another potential issue is that animations can be distracting if they are overused or too complex. This can make it difficult for users to focus on the content of a website, and can ultimately lead to a negative user experience.
As with all the tools available to us, animations should only be deployed when necessary, and when it serves a functional purpose for the user.
In short then, animating elements should:
- Provide useful information
- Inspire confidence
- Guide the end-user
So, how do we go about doing this correctly you ask? I've compiled a short list with examples, that serve to showcase some of the ways animations can be deployed in accordance with the principles outlined above:
Orientation
Orientation is all about letting the end-user know where they are. This could be their physical location on the page, their location on in a multistep form and so on.
It is often useful to provide the user with a clear indication that their location has changed and in what direction. Left, right, good, bad and so on.
The following example is a simple signup form, that shows just one way to provide that information:
Orientation Example
Changes
Providing visual indication when an element changes is often useful. It indicates that an element has been changed and might not serve the same purpose anymore. A clear example of this is the well known basic toggle:
Change Example
New Elements
Adding new elements to the page is rarely done without disrupting the flow, or at the very least drawing the users attention. Animating this action serves to enhance the experience and minimise disruption and flow.
The following example adds a new element to the page, but does so in a smooth motion, so as not to interrupt and confuse the user:
New Element Example
Attention
When a change occurs on a page or an event takes place that requires the end-users immediate attention, it's useful to draw their gaze to said event. Animating this "call to action" serves to do so, by capturing users attention.
The following example highlights an event that indicates that attention or action is required:
Attention Example
Visual Feedback
Providing the user with visual feedback when an event happens, helps them to understand that the status quo has changed, and more importantly in what way it has changed and why.
Take the following dialog for example. Sliding the dialog into view this way, provides the immediate feedback that is expected when the button is pressed. But more importantly it tells the user where the dialog "was" and where it's gone once closed again.
Visual Feedback Example
This is a title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit necessitatibus illo deleniti doloremque culpa voluptas recusandae, sunt eligendi amet, ut modi voluptatibus ipsa quas voluptatem consectetur atque, velit reprehenderit debitis.
Status
Relaying system status is something that comes up often in my work. We provide automated cloud hosting at cloudservers.dk, which requires some processes to run in the background, during which time nothing happens in the front-end.
To minimise support requests and build trust with out customers we try to provide live status updates wherever and whenever possible. This lets the users know that the system is in fact working as intended, and thus avoids a lot of panic and frustration.
Among the many different indicators we use, the status bar is probably the clearest example of how an animated progress bar can put a user at ease, when a process is running in the background:
Status Example
Conclusion
In conclusion, animations can be a powerful tool for enhancing the user experience on the web. They can guide users through a website, improve the overall aesthetic, and improve usability. However, it is important to use animations thoughtfully and strategically to ensure that they do not have any negative impacts on the user experience. By doing so, we can create engaging and effective websites that users will love.