{"id":4806,"date":"2016-12-13T11:32:37","date_gmt":"2016-12-13T11:32:37","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4806"},"modified":"2020-12-13T22:39:27","modified_gmt":"2020-12-13T22:39:27","slug":"enhance-user-experience-animated-transitions","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/enhance-user-experience-animated-transitions\/","title":{"rendered":"Enhance Your User Experience with Animated Transitions"},"content":{"rendered":"

Providing users with a seamless experience while using your interface is a popular goal when building digital products. Modern-day devices and software enable complex animated transitions between elements on your screen, and as designers, we should embrace this development for a better user experience. But how do you define good animated transitions?<\/p>\n

\"Good animation is invisible. You shouldn\u2019t notice that you\u2019re looking at animation.\"<\/em> - Pasquale D'Silva<\/a><\/p>\n

<\/div>
<\/svg><\/div>

\"Good animation is invisible. You shouldn\u2019t notice that you\u2019re looking at animation.\"<\/p><\/span><\/blockquote>\n

Animation and User Experience<\/h2>\n

In order to define a good transition, understanding the relation between animation and the User Experience is key.<\/p>\n

Animation maintains context<\/h3>\n

Our digital products enable us to do the unimaginable these days, like ordering a cab<\/a> from your wrist or preparing a meal<\/a> without having to think. Subsequently, it means our job as interface designers is crucial for a successful product. With all these complex interactions and possibilities, users can quickly lose context and orientation within the product. If elements on your screen are suddenly (re)moved, you can lose an understanding of the interface. It\u2019s not peculiar to use animations and sound effects in movies when someone goes through a time machine, so it\u2019s only natural to use this in your interface as well.<\/p>\n

Animation provides feedback<\/h3>\n

Using animation can provide the user with valuable feedback without cluttering your interface or overwhelming the user with information. A great example is the Camera app in iOS when trying to focus on an object. The crosshair fades in and shrinks to mimic focus, when it grabs the correct focus and exposure it blinks twice and it fades out to inform the user they\u2019re ready to snap the photo. These types of animations offer very specific information without overwhelming the user.<\/p>\n

<\/div>
<\/svg><\/div>

\"Using animation can provide the user with valuable feedback without cluttering your interface\"<\/p><\/span><\/blockquote>\n

<\/p>\n
\"Several

Several animations help clarify what\u2019s happening during shooting.<\/p><\/div>\n

<\/center><\/p>\n

Animations gives focus<\/h3>\n

If an interface features a lot of elements, it can be desirable to shift the attention of the user to a specific element on the screen. Using animation enables the designer to play with position, scale and opacity to grab the users\u2019 attention. Another trick is to use an asynchrone timeline of animations to pull focus on the element that animates last.<\/p>\n

\"If you disable animations, the flow should feel broken; if it is not, this might mean your animations are superfluous.\"\u200a\u2014\u200aMicha\u00ebl Villar<\/a><\/span><\/p>\n

Animations don\u2019t fix user flows<\/h3>\n

Animations can definitely help to improve the feeling of using an interface, but are merely a small part of the user interaction. The animation can help a user to understand the path they\u2019re walking on, but you need to make sure the path leads to the right destination and expectation.<\/p>\n

<\/div>
<\/svg><\/div>

\u201cIf you disable animations the flow should feel broken; if it's not it might mean your animations are superfluous\u201d<\/p><\/span><\/blockquote>\n

Animated Transitions in Interaction Design<\/h2>\n

Animation can improve the user experience in your digital product, but not every animation is suitable for your product. Nokia did research in 2010<\/a> in which they concluded that users have mixed feelings about animations as part of a transition. By using different speeds and animation curves they were able to determine which was the ideal animation.<\/p>\n

Easing<\/h3>\n

Computer generated animations are linear by nature, while animations that make use of easing are generally experienced as more pleasing and natural. Nokia discovered that animations progressing from slow-to-fast are generally experienced as slow products, most likely because the product provides feedback slower than expected.<\/p>\n

<\/div>
<\/svg><\/div>

\"The faster you show progress the quicker your user is hooked.\"<\/p><\/span><\/blockquote>\n

The feedback a product provides should be as quick as possible to convey the message the product is responsive and fast, even if the path to the destination is slower in the end. Users generally are more likely to wait for something if you\u2019ve already shown progress, so the faster you show progress the quicker your user is hooked. Just make sure your loading times are fast, and don\u2019t show consistent progress and switch to this:<\/p>\n

<\/p>\n
\"feedback-time\"

Credits: xkcd.com<\/a><\/p><\/div>\n

<\/center><\/p>\n

Examples of great animated transitions<\/h2>\n

We have collected a few examples in User Interfaces that enhance the user experience without being obtrusive or annoying.<\/p>\n

Calendar on iOS<\/h3>\n

To ensure a user understands where they are in terms of time, they provide a zoom and scale animation to keep context alive when transitioning between screens. Because of the zoom animation the user is presented with an invisible layer-system where years are on the bottom and months are on top.<\/p>\n

Facebook on iOS<\/h3>\n

Another great example of using animation to improve a transition is when opening and closing photos in the Facebook app. Tap on any photo and it will present a full screen view of that photo. To improve the experience, the photo on which you tap stays in the screen and zooms in, while the interface behind and around it fades in. Closing the photo puts it back in its place in the timeline. It\u2019s really easy to track what is happening with your interface with these little animations.<\/p>\n

<\/p>\n
\"Manipulate

Manipulate elements you tap on to keep it clear.<\/p><\/div>\n

<\/center><\/p>\n

Iconjar<\/h3>\n

These animations are not limited to mobile devices. For example on the Iconjar website when you click a link to open a dropdown it will reveal in a seamless fashion. Because the dropdown grows and fades in, the user understands it originates from the link you\u2019ve clicked.<\/p>\n

<\/p>\n
\"Growing

Growing animations help to know the origin.<\/p><\/div>\n

<\/center><\/p>\n

Summary<\/h2>\n

Animations don\u2019t only offer aesthetically pleasing goodies, but can be real user experience enhancers too. It\u2019s key too find the right balance between fun and function and make sure your user flow is great without animations too. A good transition is one that is not obtrusive, enhances the user experience and is fun at the same time.<\/p>\n

To wrap things up, here are a few links with inspiration for great looking animated transitions and animations and additional resources:<\/p>\n