skip to Main Content

6 info-bites on animations and transitions

1. 6 info-bites on animations and transitions
2. 6 tips on designing for existing digital products
3. 4 Steps to a better UX/Design resume

Quite often, somewhere between the user research, workshopping, IA and wire-framing, how we handle the UX transitions between interactions can be forgotten. Improving these can provide a more informative, enjoyable and dynamic user experience. Here is an overview of how to think about transitions in terms of improving usability, the technical considerations, and how to work out what's best for your website and/or app.

1. What are they?

Transitions are animations and movement applied to web and mobile site/app elements (e.g. pop-ups, transforming icons, slide-outs). From a basic technical point of view, when a User interacts with an element, the code changes the property value of an object over a period of time/seconds.

2. What are they good for (and examples)?

As you can read in Google’s Material Design manifesto, transitions and animations are useful for several main reasons – they are helpful in communicating to the User, improve the delight and immersion of the experience, and add to a responsive UX.

• move user along their journey
• convey a sense of navigation
• convey the relation of content to each other
• less thinking for the user about how and where to interact to get what they want
• explain any rearrangement of content
E.g. Point of origin (expanding pop ups from the interaction point, not just hoping up from the middle of the screen). Some page transitions here

• creates a smoother, more pleasurable user experience (although some are jerky in older browsers)
E.g. Ease-out (giving moving items acceleration and/or declaration, to make the start and stop of their movements soft) / Icons transforming into others / Radial effects (the ‘ripple’ affect to give the sense of dimension when pressure/interaction is applied – hover over the circular hotel images here)

• moves and hides elements as their priority changes as the User scrolls or moves around
E.g. Elaborate form/input fields on interaction (this reveals more detail of the UX when the user interacts, keeping the initial view clean and engaging) – example

3. What are the Cons?

• Overuse can create a busy, distracting environment
• Slow transitions can slow down the experience
• Older browser and older devices will have a different, less perfect experience than you might expect
• Hybrid/web apps are limited compared to what you can do with native apps

4. Technical considerations for web and web apps

Not all browsers support CSS3
Generally, if the browser doesn’t support the transition, the change of elements will simply be a snap, blocky change. But you need to consider if any information the transition relays to the user is still being really without it.

There is an extra amount of work load for development to incorporate these. With simple animations/transitions, is minimal, and only really becomes a major consideration when there a series of event that must occur (e.g. Slide out panel, THEN hide panel behind). Also, when developing to have different occurrence s to happen depending on browser.

It’s not always a quick, magical fix, and can take a little reworking.

In general, the effect on page load is minimal.

Smoothness and timeliness can vary with older browsers/devices, in particular if you have several transitions occurring at once, or a complex series of events.

5. How do you decide what’s best for your product?

I’d recommend the following:
• Define the most used elements on your product
• Get familiar with what can be done and what others are doing, by looking at your competitors, and at UI patterns
• From what you’ve seen, define the aspects of your product elements that you can add transitions to
• Define a small set that you can reuse across your product(s)
• Using existing examples of your defined set that you’ve found online and/or in apps, test them across older OS and devices
• Now you know what will work, integrate and test again!

6. Why define a standard set to use?

• For UX consistency of your product
• To become part of the UX branding of your product
• So your User isn’t overwhelmed with too many bibs and bobs whizzing around
• So your dev team can easily integrate pre-built transitions without always building and testing new ones

If you want to go crazy, check these out: