The use of animation in user interface (UI) design, and the effect it has on the user experience (UX), is something I’ve become interested in recently — especially now we have started to redesign the Moodle interface.

What started me thinking about this was reading the endlessly fascinating Google Material Design Guidelines. These are extremely easy to read, and provide a comprehensive background to Google’s look and feel across it’s many products and services.

Incidentally, if you’re that way inclined, read it! It’s full of ‘I didn’t realise that, but it makes so much sense’ moments. For example, did you realise that there are rules governing what elements look like as they overlap?

Motion provides meaning

Material Design is a good place to start when trying to work out what effect motion has on the overall UX of a given product. Material Design specifies motion to be able to offer:

  • Guided focus between views
  • Hints at what will happen if a user completes a gesture
  • Hierarchical and spatial relationships between elements
  • Distraction from what’s happening behind the scenes (such as fetching content or loading the next view)
  • Character, polish, and delight

(Material Design, 2018)

Some of these have been used long before this specification was written; loading indicators, for instance, have existed in many forms — almost always as a “distraction from what is happening…”. Often they are simply a single repeating animation to help users pass the time, and to communicate that the waiting time will be finite, i.e. something will eventually happen.

Many of these points have been created as a result of the rise of mobile design and the necessity to tie together the various screens of an app with some sort of visual metaphor so the user is aware that the screen they are currently looking at relates to one they were just using — but can no longer see.

Retaining user engagement across page transitions

Let’s look at that last scenario — moving from one page of a mobile app to the next — in a little more detail. Google aims to maintain user engagement across page loads by maintaining elements on screen between those pages, and animating the change. A user’s eye is intended to follow elements that exist in both pages: the elements don’t disappear and reload in a new position; instead they animate and move to their new position.

The overall aim of this — and I think it works — is to start with the user looking at the new page from a position of engagement. The user already knows what content they expect to see, because they know why the page has appeared (it’s the result of the action they performed earlier, e.g a tap on a button), and what relationship the new information on the page has to the information on the previous page.

(Material Design, 2018)

The image above is from a video illustrating the approach to maintaining shared elements across a screen change (in this case a card expanding to provide more information). Click the link beneath the screenshot to watch the video in full.

Material Design provides this advice for pages with different amounts of shared content:

  • If all content elements are shared
    While a surface is expanding, a significant number of elements should remain visible during the transition.
  • Few content elements are shared
    While expanding a surface, if only a single element will be present after the transition, that element should be the focal point of the transition, controlling all other elements.
  • No content elements are shared
    If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.

These rules ensure that no transition becomes too complex and overwhelming to the user.

I’ve really only touched the surface with this topic. I hope to expand on this further by looking at some other ways that motion is employed in UI design to create a satisfying UX.