Improve user experience with animations Animations in web design

For a long time, animations in web design had a negative connotation, as users had to first click on “Skip Intro” links on numerous websites. Today, however, moving elements are an integral part of user-friendly web design. If you put a little thought into the animations, you not only get an effective design tool, but also improve the user experience of your users.

Digital products such as websites and apps live from their design: it is the graphical user interface that makes all functions accessible. Design is, therefore, not just the packaging, but a central part of the user experience.

Design is not just what it looks like and feels like. Design is how it works.

The broad browser support of CSS3 now offers numerous possibilities for working with moving elements in web design without JavaScript or plug-ins such as Flash. This makes it increasingly important for web designers to consider how a design reacts to user actions – and what users think of it.

Transitions and animations

With CSS3, there are basically two methods for adding movement to your layout: transitions and animations.

Transitions: CSS transitions are smooth transitions between different states of elements. The CSS property “transition” is used to define which property is to be used (alternatively, the keyword “all” can be used for all specifications) and how long the transition should take. In addition, timing can be defined and a delay can be set. The timing determines the character and course of the transition. This is how you define how natural the transition feels. The following are available:

• ease = slow start, then fast, towards the end again slowly
• linear = constant speed during the entire transition
• ease-in = slow start, then fast
• ease-out = fast start, slow end
• cubic-bezier = definition of your own curve

With the following snippet, for example, you can smoothly change the background color of a button to a different shade when a user moves the mouse over it or focuses on the button with the keyboard. Such transitions can appear more natural and pleasant than sudden color changes.

a.button { 
  background-color: #93be27; 
  transition: background-color 0.25s ease-out; 
}

a.button:hover, 
a.button:focus { 
  background-color: #6a891c; 
}

Animations: CSS animations are a little more complex. You define the changes using keyframes and then call them up (again by specifying the duration). If desired, you can also define the delay and progression of the animation. There are also options for controlling the direction and number of loops. The Mozilla Developer Network offers a good introduction to the possibilities of CSS animations. If you do not want to develop your own animations, you can find a practical tool in animate.css by Daniel Eden. It offers a variety of ready-made animations and can be limited to the classes required for the respective project using Grunt. This way, you can further reduce the size of the 58kb file (min version).

The following code example shows the basic way of working with CSS3 animations. It is part of animate.css and creates a pulsating effect in which the animated elements are enlarged briefly. To do this, it defines an animation called “pulse” with three keyframes at the beginning (0%), in the middle (50%) and at the end (100%) of the animation. The CSS property “transform: scale3d()” enlarges the addressed element and, in doing so, uses the GPU of the computer in modern browsers to improve performance. The animation is then linked to a class so that all elements with this class can use the pulsating effect. For better readability, it contains only the CSS properties without vendor prefixes.

@keyframes pulse { 
  0% { transform: scale3d(1, 1, 1); } 
  50% { transform: scale3d(1.05, 1.05, 1.05); } 
  100% { transform: scale3d(1, 1, 1); }
} 

.pulse {
 animation-name: pulse; 
}

Transitions and animations already have broad browser support of over 80%, but some still require vendor prefixes. Older browsers such as Internet Explorer 8 ignore the information. In this case, you should use static hover and focus effects so that the changes in state remain apparent in these browsers as well.

Better user experience through animations

When users visit a website, they are not idle: They click on links, open accordion fields or orient themselves in a menu by opening the submenus. They expect appropriate feedback when interacting. Transitions and animations play an important role here: they make it clear that the system will respond to a user’s action, bridge loading phases and clarify the relationships between content.

A good example is the website of Mail First, where transitions make orientation easier. The one-pager relies on an anchor navigation so that users can jump directly to the sections, and uses animations based on jQuery to make the path to them comprehensible. This makes it easier to understand the context of the content. Transitions like these establish the connection between a user action (e.g. clicking or typing) and the system’s reaction. This is particularly important when new content has to be loaded in response to an action: if the interface does not provide feedback, users quickly become unsure whether their click has been properly recognized. A small animation can increase the user’s confidence that something will now happen. To do this, you can, for example, use the often-neglected :active pseudo-class with modified CSS properties – it is activated when a link is activated.

a.button { 
  box-shadow: 0 5px 0 #5c7220; 
  transition: all 0.25s ease-out; 
}

a.button:active { 
  box-shadow: 0 2px 0 #5c7220; 
  transform: translateY(3px); 
}

Part of a good user experience is keeping the interface as minimal as possible. If the function of a button changes, you can use a transition to make this clear. One way of doing this is to only show the actions that make sense in the current context. A good example is provided by Adrian Zumbrunnen with “smart transitions”: A button with a plus sign (“Add”) can be changed to an “x” (“Close or Delete”) via transitions if users change their minds and want to remove an added element. A similar interface, but without animations, is used by Spotify in its web player to save songs in its playlist.

When working with animations to improve user experience, you should always keep an eye on current reception studies. Many of these studies show that even small measures can have a big impact. One example is loading bars: In several studies, Chris Harrison and his colleagues were able to show that the use of pulsating colors or moving hatching makes the loading process feel faster. The loading phase, therefore, seems less disruptive.

Animation as a design element

Of course, transitions and animations can also be used as a design element. They are useful, for example, for directing users’ attention: our eyes are drawn to where something appears or where a movement changes. Fifty Three uses this behavior to draw attention to the construction of their product Pencil: As users scroll down, the pencil slowly dissolves into its component parts, while animated text explains the function.

Animations also become interesting when working with different layers. With parallax scrolling, for example, elements on the individual layers move at different speeds when scrolling. Used skilfully, interesting effects can be achieved in this way, as demonstrated, for example, by the wedding website of the designer couple Jess and Russ. They tell their personal story as you scroll, and thanks to parallax scrolling, a jumble of letters finally turns into the clue that they met on the internet.

Technologies such as the JavaScript plug-in Skrollr by Alexander Prinzhorn help you to work with parallax scrolling. It allows animations based on the scroll position and can be extensively configured. It is used, for example, in the one-pager “A History of Interior Design”. Readers can learn more about different style epochs here. The transitions between these epochs are animated with a circular aperture. These transitions fit well with the illustrative style of the website and add to its appeal. Aaron Dicks, the designer, writes:

In our opinion, it is these animations that encourage users to scroll. The statistics speak for themselves. Of the 50,000 page views in the three weeks since the launch, the site has an average visit duration of 3:46 minutes.

However, the design work with animated layers does not have to remain purely a stylistic device, but can also say something about the importance of an element: the closer an object is, the more significant it appears. Google makes extensive use of this in its “Material Design”, the design language behind the next version of Android: in addition to the usual “flat” buttons (e.g. in dialog boxes), there are other buttons hovering above the design. When activated, they rise further upwards – in this way, the designer draws the user’s attention to the important actions. The designers behind Material Design also thought about where and in which direction new interfaces should open – it is worth taking a look at Google's design document.

You can also draw attention to important elements by fading them into view after a brief delay. This approach also helps to reinforce the personality of a design – and the effect should therefore also match the design language. The designer Val Head offers the following example: when you access a section on the former Apple website, a submenu with the products pops up after a while. Apple relies on a springy, playful transition – but is that appropriate for the straightforward products and for Apple’s brand? Opinions are sure to differ (Apple now uses a different transition).

Do not create barriers

As a responsible web designer, you will of course also consider accessibility when using animations. Animations should support users, not hinder them. Some recommendations from the Web Content Accessibility Guidelines WCAG 2.0) explicitly refer to moving elements. You should take these guidelines into account for largely accessible websites.

Offer text alternatives: All content and functions of a website must be available as text so that they are accessible for screen readers. This is particularly important for animations that carry meaning. For example, if you enter an incorrect password for Apple’s iCloud, the login window shakes – an interesting effect, but one that may not be understandable to all users. Apple therefore uses an additional message that appears when the password is entered incorrectly three times.

Avoid blinking: Content that blinks excessively should be avoided – these effects can cause epileptic reactions and are very annoying.

Ensure sufficient contrast: The different states of UI elements should be sufficiently distinguishable from one another. This applies, for example, to buttons whose color is to be changed when focusing with the keyboard or mouse. Colors that are too similar quickly appear random and are particularly difficult for people with color vision deficiencies to distinguish.

Allow users sufficient time: It is particularly important for animated texts that users have sufficient time to read them.

Allow users to control: Users want to keep control of their browsers. Animations should therefore not be too long, so that users do not feel as if they are in a movie that they cannot stop. WCAG 2.0 recommends an explicit control option (start, pause, stop) for all animations that

• start automatically,
• last longer than five seconds and
• are displayed at the same time as other content.

It may also be useful to give users the option to turn off animations altogether. This way, users remain in control. Greg Tarnoff recommends first defining the final state of all movements and then linking all animations to a separate CSS class (e.g. “.animate”), which you give to a parent element (e.g. “body”). This class can then be deactivated with a button in the page header and a little jQuery.

<a href="#" id="animationOff">Turn off animations</a>

$('# animationOff).on('click', function(e) { 
  e.preventDefault(); 
  $('body').toggleClass('animate'); 
} 

Note: This article first appeared in Screenguide 24 (10-11/2014).