BLOG & NEWS

How to integrate animation in UX

Animation sequence businessman on wheels

Animation has been gaining popularity as a method to improving user experience (UX) on digital platforms.  It’s not difficult to see how animation can benefit UX – Motion catches the user’s attention and can direct it to the place of greatest interest.  It enhances the user’s understanding of your website or app and can indicate to the user what he is expected to do next.

The question is, how can you integrate animation in UX and utilise it to the advantage of your website?  Well, firstly we need to ask ourselves, at what point of the UX process should animation be considered?

 

Thinking of animation at the start of the UX process

As UX professionals, our responsibility is to understand business objectives and users’ goals during the discovery phase.  Gaining these insights might involve circulating questionnaires or surveys, creating user personas and/or conducting stakeholder workshops.

During the discovery phase we learn about users and their goals but not if animation is needed and where in the site it can be placed.

In the initial research / discovery phase there are a range of concerns and requirements among stakeholders, including:

  • How to better communicate the brand message
  • How to point users to where the focus should be
  • Pointing out the most important element on the page
  • Indicating the success or failure of a task
  • Hints to users regarding what to do next
  • Keeping users interested by using loading sequences.

Stakeholder statements like this might reveal opportunities to use motion to enhance the user experience. Lo and behold, the process has begun.

 

Aligning animation with user needs and goals

Smashing Magazine presents a table matrix to easily identify what key animation function can be applied against the user’s objectives, based on feedback from the stakeholders during the discovery phase.  The table is a great example of how the research feedback can be aligned with the user’s needs for later application in the design phase.

Before beginning the wireframe design – It is important to always agree on any deliverables with the project manager, including prototypes and animation.  Communicate with the development team to test your solution and get their feedback.  Try to get them on board by showing them examples or quick sketches.

During the design solution process – The design phase, where prototypes will be created, needs to capture what key animation functions which will be placed to meet the different user’s needs.  My weapon of choice is Axure, which allows me to quickly create prototypes and add basic animation to the different elements on the page.

 

Some Examples of Great Animation at Work

macbook pro homepage

MacBook Pro – This page includes multiple types of animation and video layers used to communicated the features and spec for the latest MacBook model.

 

what does the bank of england do homepage

A scrolling website that educates and illustrates what the Bank of England does and what effect it has on the general public of the UK.  Scrolling is used in a creative way to introduce bite size chunks of information in an entertaining and visual manner.

 

Bonus – Leave some time for this one because it is addictive!

Land Lines homepage

Land Lines is an experiment that lets you explore Google Earth satellite images through gesture. Simply draw or drag a line and let the planet complete the picture.  The project was made in collaboration by Zach Lieberman and Google Data Arts Team.

 

Got it – Let’s start animating!

Here are a couple of my favourite animation techniques to think about in your next wireframe design:

  • Hover to reveal – Hover interaction used on images to reveal further content
  • Hover to reveal only necessary information – Hover interaction used to reveal information, presenting users only with the necessary information at each point in time
  • Scrolling behavior –  Headers that stick to the top of the page, but don’t interfere with the content, and minimizes when the user scrolls down the page.

Other great ideas for functional animation:

https://daneden.github.io/animate.css/

http://www.justinaguilar.com/animations/

https://greensock.com/examples-showcases

https://codepen.io/

CodePen is a playground for the front end side of the web.

 

Conclusion

It is great to meet with clients and users to capture useful data, but for me the design phase is still my favourite part of the digital project.  It is during this phase that I can collect the findings from the discovery phase and use everything I’ve learned to design the perfect solution.  It feels great to see how functionality, placement and transition can make a big different to the overall user experience.

This post was written by Jaime, our in-house UX expert who has been pushing boundaries and delivering great web experiences for our clients for many years.