Using Animations to Improve User Experience

Loading Screens

Everyone hates the experience of seeing a loading screen. Animations are great to use for an interactive/animated loading screen which can keep users interested. Even though we’ve moved on from the days of being interested by loading indicators, animations can still be used to keep users interested even when on a loading page. Something as simple as a loading progress bar can achieve this – this shows the user that the page is actually loading and how fast it’s loading. Another example is called a “skeleton screen animation” This is when the page loads incrementally so at least some sort of content is visible to the user.

Animate Important Page Areas

As opposed to distracting users, animation can be used to highlight areas of the page where the user should focus on or interact with. There are two important factors for animations with this use: speed and position. Animations on the left will command more of the user’s attention than animations on the right. This is simply because we read left-to-right, so our attention is always automatically focused on objects on the left side. The speed is also a factor. Fast animations, especially animations in which the object changes position such as a box sliding onto a page, generally demand more attention from the user. For instance, an object quickly sliding onto the page will demand more of the user’s attention than an object slowly fading into the web-page – without changing position.

Navigation

This mainly revolves around one-page websites. If a user clicks a button to jump to a piece of content or section of a web-page they can easily get lost with the position, they have just jumped to. This can easily be solved with an animated scroll – both the page as well as any navigation system/bar that may be present on the website. For instance, instead of instantly jumping from one position to another position, the page should animatedly scroll to the desired position.

Call to Actions

Animations can be used to improve call to actions, such as a button you want a user to click on or keep their attention on. An easy example can be a shopping cart. When empty the shopping cart can simply be visible, but when it has products in the shopping cart can shake every few seconds and change colour etc. This will keep the shopping cart at the forefront of the user’s attention and remind them they need to checkout and complete their purchase.

Blue Whale Media

At Blue Whale Media we have our own in-house graphics team complete with a motion graphics and animation designer. For animations and graphics, amongst our other services, feel free to call us on 01925 552050 or use the form to contact us!