The Secret Ingredient to Building a Successful Website:

Uses: Common Uses of Animation and their Significance

When something moves, especially on a mostly stagnant webpage, it becomes very difficult for the user not to look. Animations are commonly exploited in this way with pop-up or banner advertisements. Using animation to draw your attention to something that is not significant to you is annoyingly effective; but, when the content becomes important to you, the animation becomes pleasantly useful. If we use the power of motion to work toward a common goal, the user has an all-around more enjoyable experience. There are a few ways in which we see this used in websites today.

In platforms where it is necessary to save your work, a reminder to do so can be a saving grace. Some applications will remind you to save with a vibrating or moving button.

Another example may be found in applications that have notifications. To notify you of incoming messages or alerts, a developer may opt to include a shaking bell icon to grab your attention and increase interactivity.

There are certain movements that universally have specific meanings. Many of these movements can be easily replicated using HTML animations.

Occasionally, when you enter information incorrectly, a website may notify you of your mistake with an error shake. Error shakes reinforce the idea that something has gone wrong with an imitation of the universal head shake gesture. The animation provides the user with immediate, clear feedback, which may not otherwise be achievable with different methodology.

Alternatively, a website may also guide you through a process with animations. For instance, when moving files around, supporting animations may work as a form of validation; they ensure that you are moving through the process correctly.

“Cognitive load” is the time it takes for your subconscious to process incoming information. In the case of websites, “cognitive load” usually refers to understanding where every element resides on the webpage. To make navigating the site easier for visitors, designers usually want to reduce the amount of cognitive load required.

One example of reinforcing continuity to reduce cognitive load is to establish “homes” for certain elements on the webpage. For instance, if you tap on the “Checkout” button for a transaction, a window may slide out from the right-hand side of the screen prompting you for your information. Now, you know that the “Checkout” window resides on the right side of the screen. Although seemingly small, this information is very helpful in subconsciously understanding and retaining the site’s layout, which actually makes maneuvering around significantly easier.

In this website, we will cover how simple applying these effects can be. Navigate to the Example section to view specific examples of these animations in motion, or click Tutorials to learn more about how you can incorporate these features yourself.