How to Prototype Animated Interactions

Written on 30 October 2014


In the early days of web design, animated gifs, <blink /> and <marquee /> tags were crude ways to add motion to a webpage. Before long, JavaScript emerged and in its nascent form it enabled a generation of designers to experiment with animations, most of it unnecessary and gimmicky, even the best of it slow and unstable. Web sites remained largely static affairs, and for the vast majority of serious websites, animation was unfeasible. Fast forward a few years and things have changed. Mobile apps have led the way in proving that animations are not just ‘details that delight’ but also an important part of the experience, making transitions easier to understand and reassuring users about what’s happening. Increasingly designers take a “mobile first” approach to building web apps, and it’s natural to want to include these transitions in web apps and make sure they’re part of the desktop experience too. Javascript and CSS have matured and the hardware has become faster, so designers can freely consider adding even the most complex animations and transitions in world class websites and apps.

Today for this article Chris Neale and Michael Le have collaborated to tackle this design frontier from an UX perspective.

What are we trying to achieve by using motion?

The question designers must continually ask themselves throughout the design process is “What are we trying to achieve by using motion?” All too often animation appears to be used for the sake of it, thus detracting from the core experience and making noise. As our very own Chris Kaminski says “using it well requires care, and using it poorly can be worse than not using it at all.”

To understand more about the different motivations and reasons for having animations in your design, we found that these articles to be helpful:

Once you have justified a reason for your animation, the next question is “How do you design the motion?”

Designing Motion with Traditional Tools

Designing motion requires a different set of tools to the ones us UX designers are  familiar with. We can’t easily crank out our favourite tools of yesteryear to do much of this – a clickable PDF prototype in Omnigraffle can only ever hope to simulate very simple, linear journeys and state changes. Axure goes a step further and let’s you demonstrate more complex interactions, but motion design is still impossible. Some designers may resort to lengthy annotation in wireframes and storyboards to describe an interaction, but these are liable to get confusing. For complex animations, some designers gravitate towards Adobe After Effects and for specific native iOS applications; Origami and Quartz. Not all designers were comfortable with After Effects and the learning curve for Origami and Quartz is steep for new beginners to interaction design.

“Designers have become documentation subject matter experts, known for the quality of the documents they create instead of the end-state experiences being designed and developed.”
Jeff Gothelf

Building Motion

All UX designers should be capable of designing, concepting, and articulating complex motion in their designs. The old tools don’t work, so which tools should designers be using to do this? Essentially, there’s no silver bullet nor should there be. Use whatever tool or technique you need to convey the idea quickly and move the project along an approach that should apply to all design work. HTML 5 and CSS now natively handle animations, so it makes sense to use the same tools for design as you use to build. Your design is informed by the affordances and constraints of the medium so it helps to know what they are. HTML and CSS are intimidating for new users to them, despite having a relatively shallow learning curve. Other tools like Pixate are a good way to prototype animations in a visual way without having to write code. The other big advantage of using HTML and CSS, however,  is that it’s easy to build with simple tools (all you need is a text editor) and it’s easily consumed (supported by most modern browsers).

For this article we picked an easy example to demonstrate how straightforward it can be – something that would be too complex to build with Axure but easy enough to make in only a few hours. The “Follow” button in iPhone’s Instagram app is a good example, so we tried to reverse engineer it quickly.

The animation has the following steps in it

  1. To show the state change, it first shrinks slightly, then grows back to its original width
  2. The background colour changes from white to green.
  3. The text in the button changes from “+ Follow” to “Following” and changes foreground colour from blue to white.

This spring animation sounds simple, but there’s a lot going on. The transition is not a linear because the speed at which the scale changes is not constant. This non-linear motion has an easing applied to it to produce a smoother looking transition to the human eye. How long should the animation last for? 0.5 secs or 1 sec? It is hard to just guess. This is more reason to build the animation and to test it because it is easier to show than tell.

Initially, we used JavaScript, more specifically JQuery’s animate() function, to create the button animation. We could easily edit the code and see the changes immediately. It makes experimentation and rapid iteration easy. We were able to try different easing functions from easings.net to work out the best speed for the movement at each point during the animation. We chose a combination of “easeInCubic” and “easeInOutBack” for the spring effect. Our in-house developer, Dan Simmons pointed out that using CSS3 animations would keep the code separated from the view and make it easier to understand. Overall this process was not overwhelming but it did require some knowledge of HTML and JavaScript to get going.

See the Pen Follow Button – Full CSS Animations on CodePen.

We also tried creating this animation with an application called Pixate. Pixate is a new mobile interaction design service which allows you to create complex interactions and animations without code. We were sceptical about its promises of being a 100% visual tool with no coding necessary, so we tried it out. Pixate promises to be the mobile interaction design tool to use with no coding required. We watched about 20 minutes of tutorials and 10 minutes later we had a working spring effect on the button, and even added a scrolling panel to simulate the pictures in Instagram.

use-experience-dashboard

The picture above shows the panel we used to add the animation to the button. Defining the animation using the visual editor was straightforward. We enjoyed the fact that whenever you made changes in the app it was reflected on our mobile devices in near real time. The final result can be shared with others via a link. Please check out the final prototype demo on Pixate.

We believe that UX designers should be able learn to prototype their own transitions. At the least designers should understand the different types of animation available to use. This knowledge will be useful to gain an appreciation and understanding of how to create motion. This skill can also help express their vision to stakeholders and the development team.

These tools and skills have helped us realise that creating animations doesn’t have to be a daunting experience. Hopefully, you will get to use your new skills in an upcoming project.

More from the blog