It’s all about the timing

Smooth website experiences are all about timing. Kurtis Justin, web developer at Bladonmore, tells us how long animations should take to maximise their impact

As the web continues to evolve, the ability to build more enticing user interfaces (UIs) has grown immensely. This allows us to move to dynamic and responsive sites that can tell a story and capture attention – and away from sites that were either static or relied on Adobe Flash and GIFs to add movement.

Some animations are full experiences that tell a story, others improve the look and feel of a website. We generally apply animations to anything with which the user can interact.

The type of animations we use to enhance UI are transitions: a CSS (Cascading Style Sheets) property that allows us to create smooth, light animations.

Highlight tactics

Transitions not only improve the look and feel of a site but are also there to help guide the end-user. They help to highlight content and show where the eye should be focused. They also make it easier for the user to see what has changed.
Creating a transition that looks smooth and works with the content can be a real challenge. Timing is everything and this is an area that needs extra attention. If the timing is off, it can have a negative impact on user experience. Our development team has categorised the types of animation and found what timings work with which categories.

Below are the transitions we use along with timings that we know work best for the end-user:

Simple hover and click effects

These range from buttons and links to tooltips and small dropdown menus. For buttons and links that have a small transformation, we tend to make them quick and responsive, around 100-200 milliseconds (0.1-0.2 seconds). We choose this speed as it’s quick enough for a user to get an instant response, but long enough for them to know that something has changed.

Section transitions

These range from tabbed content, pop-ups and carousels to accordions and navigation dropdowns. For tabbed content and accordions, the speed ranges from 250-600 milliseconds. At this range it is clear to the user what piece of content has changed. If the animation goes too quickly, the user might not immediately understand what change has taken place. The logic behind this is thinking about the amount of time something might take to move in real life – few things move from one state to another instantly. Animating at this speed also allows the user to focus on the content, rather than trying to figure out what has changed, keeping them in the story we are trying to tell.

Large transitions

These are your mega-menus, ‘scroll-to’ actions, and high-content multi-fade in transitions. These types of transitions involve moving larger amounts of content, occasionally with more than one item animating. Again, if these transitions are too fast, it can leave the user wondering what is happening, taking them away from the story being told. The range would usually sit between 600-1300 milliseconds. This is because, usually, these types of transitions contain smaller, sub-transitions which need their own timings.

More out there

There are many other types of animations and transitions that have not been mentioned. These animations are usually more complex and require specific thought on how and when they should animate. Despite this, we can still use the guidelines above to ensure the different aspects of more complex animations make sense to the user.

Whether a website’s primary goal is to articulate a message or funnel a user to a specific action, introducing subtle and polished animations plays an increasingly important role in encouraging users to take actions and interact with websites.

If you’d like more information on how Bladonmore can help your website to capture user’s attention please get in touch.