Animation and the UX Workflow

Animation and the UX Workflow


NOTE: This article is a follow up to a previous blog post: 
How to use Disney’s Principles of Animation to Improve UX. 


imaginative use of screen real estate

As UX professionals, we play a key role in raising the bar to improve customer experiences. It’s often the simple attention to detail that signals to the customer that we’re thinking about them. In the digital space, we focus on user interactions within applications devices or processes.

With the ever evolving computing power of desktops, increased browser sophistication and use of native apps, everyday we learn of new ways to push the limits of what defines a well crafted UI. When used correctly, motion can be a key utility in helping your audience achieve their goals.

When should I consider animation?

As a UX designer, you’re most likely part of, if not running, the discovery phase of your project. This may include stakeholder interviews, personas, brand interviews, usability tests, journey mapping, contextual inquiries, etc. During this phase, you’ll learn a lot about your users, but most likely they will never come right out and tell you they need “animation” or “motion”. So how do I know if animation is something worth considering as part of the UI design?

When talking with users you may hear feedback such as…

  • I don’t know where to focus.
  • What’s most important here?
  • I have no desire to use this tool.
  • How do I know what to do next?
  • How do I know I have completed my task?
  • I don’t understand what this data is telling me.

When you hear statements like this, it may be revealing opportunities where motion can enhance the experience.

Getting buy-in from the team

At this point as a designer, you may be considering some initial ideas on how motion can help enhance the experience. How do I get buy-in for my ideas? Trying to convince a team of stakeholders, product managers, clients and developers that spending extra time and money on animation enhancements “ just feels like the right thing to do”, will only get you so far. How do I make time for the extra effort within my typical, already demanding project timeline? How do I convince the team that animation is the right solution for a particular UX scenario?

The quickest and most universal path to gaining buy-in from your team is to align your animation ideas to user needs and goals. This will ensure we aren’t merely creating animation for ourselves that doesn’t benefit the user in any way.

How can I align animation to user needs?

When a designer aligns animation concepts to specific user needs, it starts to reveal it’s value. It also avoids contemplating meaningless, overly complex animation. You want to avoid wasting everyone’s time and effort. Especially, if it provides no value to your audience.

Key Functions of Animation:

  • Orienting users within their environment.
  • Providing a deeper level of clarity.
  • Providing useful feedback to your user.
  • Allows for more imaginative use of screen real estate (on and off canvas).
  • Reinforces element hierarchy.
  • Directing users where to focus.
  • Hinting at what to do next
  • Smoothly transports users between navigational contexts.
  • Explains changes in the arrangement of elements on a screen.
  • Provide visual cues that acknowledge user input immediately.
  • Better communicates a brand message.
  • Create affordances that look and feel like direct manipulation of the screen.
  • Creating visceral aesthetics and appeal that encourages usage and increases adoption.

Align User Research Feedback to Animation Functions

How do I integrate animation into the UX workflow?

The following is a suggested strategy for integrating animation into the UX workflow. If your project is Agile, this approach should occur within the duration of a sprint cycle. If you’re running a waterfall project, It typically occurs during the design and analysis phase of a user research effort.

Discover & Explore

Only after you have a firm understanding of your audience, and can confirm your design is a match to that understanding, should you enter into a collaborative effort with your team. So, start with a bit of ground work to set the stage.

  • Research – Consume and familiarize yourself with all the available information about your target audience as possible. These could be artifacts such as personas, customer journey maps, user research, branding guidelines, style guides, etc.
  • Align – Ensure your animation is addressing specific user needs and goals. When possible, align your proposed animation function(s) to specific user feedback (as illustrated in the chart above) and show how it’ll enhance the ability of your user to complete their goal(s).
  • Explore – Take time to explore various sources of inspiration which showcase animation. There are plenty of portfolio sites such as Dribbble, Behance, and CodePen where you can find many examples to riff from.
  • Communicate – Share your intentions early with your development team and client. Let them know that you are considering a solution that needs motion. Prepare yourself with the results of your leg work researching and aligning your ideas to the users needs and goals.Remember it’s more challenging to do it alone. Work with your developer. Technologists can help to expand upon what’s possible. Communicating early will reduce the chance of an idea getting shot down prematurely.

Design & Storyboard

  • Sketch – As with any design process, the best place to start is with paper, whiteboard, and/or a drawing app. This medium get’s the creative juices flowing in an uninhibited, iterative way.
  • Storyboard – Once you have some thoughts and ideas going, create a storyboard of the key states of your animations. You will need to rely on simple annotations to envision the flow. This is an effective way to communicate your ideas with others early in the process.
  • Share – Sketches and storyboards are great tools for getting some early feedback from your team. Don’t be shy about sharing your sketches and storyboards. They are great tools for getting your team to understand what you plan to create and gathering valuable collaborative insights
  • Decide – Based on time available, decide what needs to be prototyped and how your animation will be reviewed and/or user-tested. You’ll then need to choose the proper approach for creating your prototype.

You’ll need: 

  • Any pad of paper or notebook
    • Storyboard templates are ideal
  • Whiteboard
  • Any drawing program or app. (Sketchbook pro, Mischief, Photoshop)
    • Bonus points if you are using a pen (Stylus) display or Pen tablet.
ui-animation-storyboards
Sample storyboards illustrating various motion concepts for an AppleWatch financial app.

Prototyping Animation

Prototypes rapidly get your ideas into motion before spending too much time coding. From a UX perspective, the main purpose of a prototype is to get your ideas in front of users early in the design process. where refinements and iteration is easier and less costly.

There are two main ways to approach prototyping animation. The spectrum ranges from highly exploratory prototypes using one of the many available applications on the market, or jumping directly into creating a coded prototype which provides the most accurate representation of what’s feasible within a production environment.

When choosing whether to use a prototype application or to create a coded prototype, It boils down to the following:

  • How much fidelity is required to explain the interactions?
  • How much time is available (Time =costs, do you have time to learn a new tool?)?
  • What tools or approaches are you currently most comfortable working in?
  • How complex/sophisticated is the motion?

Use your own judgement to discern the proper approach. If you can easily and quickly communicate a motion using a simple Photoshop timeline animation, it’ll be just as effective as a fully coded prototype if it achieves the end game of getting the point across.

Prototype Applications

Prototyping applications have been streamlining the process of how we think about animation within the context of the UI. Everyday there’re more and more new tools available for designers. These tools are rapidly evolving to include features for creating transitions, transforms, and tweens.

The app you choose should be dependent on whether the motion concepts are more exploratory or not. Also, what needs to be considered is how rapidly a prototype needs to be created, how it’ll be reviewed, how it’ll be tested with users, and what a designer’s comfort level is with a particular application.

The following is a list of popular prototype applications for UX animation. 

  • Adobe Photoshop – Through the use of the timeline, comps that start out in a Photoshop canvas can easily convert to  frame animation. Photoshop is very useful for motion exploration on top of existing comps.
  • Adobe After Effects – This tool is a powerhouse for unbound creative exploration. The danger with over use of this tool, is that it’s very easy to create something that is not feasible to build with current front-end technologies. Risk aside, it’s worth considering how After Effects fits into a UX Workflow since there many creative uses for this tool especially when exploring new possibilities and pushing the envelope for motion.
  • Keynote – Yes, Keynote. A self-playing presentation that leverages the “Magic Move” properties is a fast way to show UI interactivity and motion. Thoughtbot has a wonderful overview of prototyping animation with keynote.
  • Adobe Edge Animate – An environment for designers to explore motion UI concepts using keyframe-like animation. It’s generated output relies on proprietary .js libraries. This will make many developers leary of the production readiness of animations produced with this tool.
  • Axure 8 (in beta at the time of writing) – This exciting new version of Axure has added more animation patterns with many interesting easing options. Axure gets you thinking about motion during your early wireframing efforts.  Animation is mainly through events (onPageLoad, OnClick, OnHover, OnMouseOver, etc.) and does not include any ability to keyframe. It does however, get a designer thinking in ways that’s easier to dialog with developers.
  • Invision – This highly collaborative, browser-based application includes an array of animated transitions and gestures. This screen flow prototyping tool (builds prototypes around a series of screens that are connected via interactions) is ideal for quickly setting up clickable hotspots without getting overly complex. All motion occurs on either click events or page redirects. Easily preview your design on any device. Even includes free mobile user testing features so you can conduct your user studies within Invision. Coming soon, There are plans to incorporate more timeline based animation features. Very cool.
  • Flinto – A mobile app prototyping tool for the Mac. This screen flow prototyping tool is a desktop app that allows you to rapidly links up screens and apply animated transitions. There are many animation transition properties that can be fine-tuned to get the motion just right. Easy to iteration by drop-n-dragging new screens on top of the old.
  • Principle – Another mobile app prototyping for the Mac. This one also has the ability to use a timeline to keyframe animated transitions.
  • Proto.io  – This is another browser based app. It includes some sophisticated animation abilities. Through the use of  “interactions” and “states”, a designer can prototype complex motion and can even create keyframe-like animations.
prototype applications for UX animation
A continuum of applications for prototyping UX animation

Coded Prototypes

More technically inclined designers can cut to the chase and jump right into the libraries available within their front-end UI framework to start the prototyping process. Otherwise, this part of the process will require collaboration with a developer.

Relying on standard out-of-the-box motion pattern libraries could possibly limit your solution explorations resulting in bland outcomes. But at the same time, not considering what is feasible is risky and guaranteed to produce disappointment and wasted time.

A UX designer who is comfortable rolling up their sleeves and digging into the code will be more in control of the details. It also keeps them in-touch with reality. This requires a comfort level with HTML/CSS and sometimes JavaScript .JavaScript libraries will provide you with wider browser support. The animations will also have a higher FPS so they will appear much smoother and are usually more performant.  Designers will need to have a good grasp on working within a modern front-end development environment. When a designer and developer can collaborate this way, there’s always a high probability for success.

The following is a small sampling of the many UI frameworks and libraries available for coding UX prototypes.

  • CSS3/HTML5 – The most basic way to get started. A UX animator who wishes to create coded prototypes needs to have a solid foundation in CSS3/HTML5 to understand the fundamentals of how a web UI works.
  • Zurb Foundation for Apps Motion UI – A Sass library for quickly creating CSS transitions and animations. Rapidly prototype animated elements and movements with a simple class or Sass mixin.
  • Transit – A simple CSS transitions and transformations library for those who are familiar with jQuery
  • velocity.js – A more robust JavaScript library. It’s highly performant and well documented. It’s tailored specifically for motion designers.
  • GSAP (GreenSock Animation Platform) – A full fledged animation platform. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, etc.). Recommended by Google for JS animations.
  • famo.us – This is a full-fledged (mainly mobile) app framework. It’s built around an open source 3D layout engine, fully integrated with a 3D physics animation engine. The idea behind Famo.us is that browsers were never made to render apps, games were built to render apps. If you want smooth graphic and animation handling (60fps) you need GPU acceleration which famo.us makes possible by rendering to DOM, Canvas, or WebGL.
  • Framer – A self contained prototyping framework and coding environment. It includes integration with Photoshop and Sketch. Although it doesn’t produce production ready code (and it’s switch from JavaScript to CoffeeScript is questionable), it does help designers share prototypes that feel real. With fine control over gestural interactions and motion, it allows them to accurately communicate these interactions with developers.
  • React – A JavaScript library for building large, dynamic, data-driven, production ready user interfaces by Facebook and Instagram.
Prototyping with Code
A small sample of the many UI frameworks and libraries available for using code to prototype UX animation

Test with Users

  • Schedule – Round up a small group of participants who represent your target audience (5 participants is ideal)
  • Conduct user testing – User testing sessions are ideal for validating if your animation is effective or not. Run your participants through typical tasks that would be performed on your application. Observe if your animation is helping or hurting the experience. Ideally UX sessions are captured using video so they can be referenced and reviewed afterwards. If you are conducting your sessions remotely, take advantage of the screen recording features available in web conferencing applications such as GotToMeeting or WebEx.
  • Review Feedback – Take time to reflect on the insights gathered from the user testing sessions. Ensure user needs/concerns from initial discovery phase are being properly addressed.
  • Decide – Once user testing is complete, feedback has been reviewed, you can make an informed assessment of whether further refinements are needed or if you’re ready to move on to production.
UX Animation Workflow
A UX animation workflow

Wrap

UX designers who are considering motion in their design, will find themselves under pressure to explain, communicate, and defend why the extra effort is required.

Know your audience and communicate your intentions to the team early. Leverage the growing spectrum of approaches available today, from paper to code, that’ll allow you to get the buy-in needed to smoothly integrate animation into your workflow.

Animation is awesome! The web is a static, dull, box without it. But when it comes to UX animation, subtlety is key and focusing on helping users achieve their goals is paramount.

Resources

  • Functional Animation In UX Design – An overview of how animation in UX design is a tool to create clarity and logic within an experience. Includes many useful examples.
  • Your UI isn’t a Disney Animation – Great insight into how to avoid creating animation that serves only to get in the way of the end user.
  • Animate.css  –  A bunch of cool, fun, and cross-browser animations for you to use in your projects.
  • CodePen Animation Examples – An inspirational playground of UI animations that can be dissected and forked to create new concepts or to just experiment.
  • Modern Web Designers Workflow – Although a few years old, this still provides a relevant example of a modern front-end workflow
  • A Guide to SVG Animations (SMIL) – An epic guide on animating with SVG
  • 84 Animation Examples using React – A gallery of the power of React for animation
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s