How to Prototype Animated Interactions
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:
- A New Mobile UX Design Material
- Motion UI Design Principles
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.”
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
- To show the state change, it first shrinks slightly, then grows back to its original width
- The background colour changes from white to green.
- 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.
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.
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.