Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Integrate Motion Design In The UX Workflow

As UX professionals, we play a key role in raising the bar for customer experiences1. A simple attention to detail is often what signals to the customer that we’re thinking about them. In the digital space, we focus on user interactions within applications devices and processes.

Incorporating animation and motion into your design process, allows for more imaginative use of screen real estate. (Image: Ramotion2)

With the ever-increasing computing power of desktops, browser sophistication and use of native apps3, every day 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 users achieve their goals.

When To Consider Animation Link

As a UX designer, you’re most likely a part of, if not running, the discovery phase of your project. This might include stakeholder interviews, personas4, brand interviews, usability tests, journey mapping5, 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 that they need animation or motion. So, how do you know whether animation is worth considering in a UI design?

When talking with users, you might 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.”

Statements like this might reveal opportunities to use motion to enhance the experience.

Getting Buy-In From The Team Link

At this point as a designer, you might be considering some initial ideas on how motion can enhance the experience. How do you get buy-in for your 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 get you only so far. How do you make time for the extra effort in your typical project’s already demanding timeline? How do you 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 that you aren’t merely creating animation for yourself, with no benefit to the user in any way.

How To Align Animation To User Needs Link

When animation concepts are aligned to specific user needs, they start to reveal their value. This also prevents you from contemplating meaningless, overly complex animation6. Avoid wasting everyone’s time and effort, especially if an animation provides no value to your audience.

Key Functions of Animation Link

Animation has the following functions:

  • orient users within their environment,
  • provide a deeper level of clarity,
  • provide useful feedback to the user,
  • allow for more imaginative use of screen real estate (on and off canvas),
  • reinforce the hierarchy of elements,
  • direct the user’s focus,
  • hint at what to do next,
  • smoothly transport the user between navigational contexts,
  • explain changes in the arrangement of elements on screen,
  • provide visual cues that acknowledge user input immediately,
  • better communicate a brand’s message,
  • create affordances that look and feel like direct manipulation of the screen,
  • create visceral aesthetics7 and appeal that encourage usage and increase adoption.

This matrix illustrates how to map user research feedback to animation functions:

Align feedback from user research to animation functions8
Align feedback from user research to animation functions. (View large version9)

“UX animation has the power to address many common user needs to help people complete their goals. This matrix aligns sample user research feedback(top) to animation functions (side).

When prioritized this way, it shows how animation can primarily be a tool for enhancing the UX and less of a novel way to create appeal.”

— Mark Di Sciullo

How To Integrate Animation Into The UX Workflow Link

The following is a suggested strategy for integrating animation in the UX workflow. If your project is agile, this approach should occur within the duration of a sprint cycle.

Discover And Explore Link

Only once you understand your audience well and can confirm that your design matches that understanding should you enter into a collaborative effort with your team. So, lay the groundwork first.

  • Research
    Consume and familiarize yourself with all of the available information about your target audience. This could be artifacts such as personas, customer journey maps, user research, branding guidelines, style guides, etc.
  • Align
    Ensure that your animation addresses 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 will enhance the user’s ability to complete their goal(s).
  • Explore
    Take time to explore various sources of inspiration that showcase animation. There are plenty of portfolio websites, such as Dribbble10, Behance11 and CodePen12, where you can find many examples to riff on.
  • 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 legwork of researching and aligning your ideas to users’ needs and goals. Doing it alone is more challenging; work with your developer. Technologists can expand on what’s possible. Communicating early will reduce the chance of an idea getting shot down prematurely.

Design And Storyboard Link

  • Sketch
    As with any design process, the best place to start is with paper, a whiteboard and/or a drawing app. This medium gets the creative juices flowing in an uninhibited, iterative way. You’ll need:

    • a pad of paper or notebook (storyboard templates are ideal);
    • a whiteboard;
    • any drawing program or app (SketchBook Pro, Mischief, Photoshop);
    • bonus points if you are using a pen (stylus) display or pen tablet.
  • Storyboard
    Once you have some thoughts and ideas going, create a storyboard of the key states of your animations. 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.
Storyboard sketch example13
Sample storyboards illustrating various motion concepts for an Apple Watch financial app. (View large version14)

Prototyping Animation Link

Prototypes rapidly get your ideas into motion before you’ve spent 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, when refinements and iteration are 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 applications on the market, to jumping directly into a coded prototype that provides the most accurate representation of what’s feasible in a production environment.

The choice of whether to use a prototype application or to create a coded prototype boils down to the following:

  • How much fidelity is required to explain the interactions?
  • How much time is available? (Time equals costs. Do you have time to learn a new tool?)
  • What tools or approaches are you currently most comfortable with?
  • How complex or sophisticated is the motion?

Use your own judgment to determine the right approach. If you can easily and quickly communicate a motion using a simple Photoshop timeline animation, that will be just as effective as a fully coded prototype.

Applications for Prototyping Link

Applications for prototyping streamline how we think about animation in an interface. Every day, more and more tools become available to designers. These tools are rapidly evolving to include features for creating transitions, transforms and tweens.

The application you choose will depend on whether the motion concepts are more exploratory. Also, consider how rapidly a prototype needs to be created, how it will be reviewed, how it will be tested with users, and the designer’s comfort level with the application.

The following is a list of popular prototyping applications for UX animation:

  • Adobe Photoshop15
    Through the use of the timeline16, comps that start out in a Photoshop canvas can easily be converted to frame animation. Photoshop is very useful for motion exploration on top of existing comps.
  • Adobe After Effects17
    This tool is a powerhouse for unbounded creative exploration. The danger with overuse 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 workflow18, because this tool has many creative uses, especially for exploring new possibilities and pushing the envelope with motion.
  • Keynote19
    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 Keynote20.
  • Adobe Edge Animate21
    This environment allows designers to explore motion UI concepts using keyframe-like animation. Its generated output relies on proprietary JavaScript libraries, which will make many developers leery of the production-readiness of animations produced with this tool.
  • Axure 822 (in beta)
    This exciting new version of Axure23 adds more animation patterns with many interesting easing options. Axure gets you thinking about motion during your early wireframing efforts. Animation is done mainly through events (onPageLoad, OnClick, OnHover, OnMouseOver, etc.) and does not include any keyframing. It does, however, get a designer thinking in a way that makes it easier for them to communicate with a developer.
  • InVision24
    This highly collaborative browser-based application includes an array of animated transitions and gestures. The screen-flow prototyping tool (in which you build 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. It even includes free mobile user-testing features so that you can conduct your user studies within InVision. There are plans to incorporate more timeline-based animation features25, too. Very cool.
  • Flinto26
    This mobile app prototyping tool for the Mac allows you to rapidly link screens and apply animated transitions. It has many animation-transition properties that can be fine-tuned to get motion just right. Iterating in this screen-flow prototyping tool is easy by dragging and dropping new screens on top of old ones.
  • Principle27
    This prototyping tool for mobile apps, also for the Mac, allows you to use a timeline to keyframe animated transitions.
  • Proto.io28
    This browser-based app 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.
Prototyping applications for UX animation29
A continuum of applications for prototyping UX animation. (View large version30)

Coded Prototypes Link

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

Relying on standard out-of-the-box motion pattern libraries could possibly limit your exploration of solutions, resulting in bland outcomes. 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. They’ll also stay grounded in reality. This requires a comfort level with HTML and CSS and sometimes JavaScript. Designers will need to have a good grasp of how to work in a modern front-end development environment31. When a designer and developer can collaborate in this way, the probability of success is always high.

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

  • CSS3 Animations32
    This is the most basic way to get started. A UX animator who wishes to create coded prototypes needs to have a solid foundation in CSS3 and HTML5 to understand the fundamentals of how a web UI works.
  • Motion UI33, ZURB
    This Sass library, originally for ZURB’s Foundation for Apps, will help you quickly create CSS transitions and animations. Rapidly prototype animated elements and movements with a simple class or Sass mixin.
  • Transit34
    This simple CSS transitions and transformations library is for those who are familiar with jQuery.
  • Velocity35
    A more robust and well-documented JavaScript library, this one is tailored specifically to motion designers.
  • GSAP (GreenSock Animation Platform)36
    This full-fledged animation platform will animate anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, etc.). It’s recommended by Google for JavaScript animations.
  • Famous37
    A full-fledged app framework (mainly for mobile), Famous is built on an open-source 3D layout engine, fully integrated with a 3D physics animation engine. The idea behind Famous is that browsers were never made to render apps — games were built to render apps. If you want smooth graphics and animation (60 FPS), you’ll need GPU acceleration, which Famous makes possible by rendering to the DOM, canvas or WebGL.
  • Framer38
    Framer is a self-contained prototyping framework and coding environment. It integrates with Photoshop and Sketch. While 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. Supporting fine-grained control of gestural interactions and motion, it allows designers to accurately communicate these interactions with developers.
  • React39
    Developed by Facebook, React is a JavaScript library for building large, dynamic, data-driven, production-ready user interfaces.
Prototyping with code40
A small sample of the many UI frameworks and libraries with which designers can use code to prototype UX animation (View large version41)

Test With Users Link

Here is the basic process for testing with users:

  1. Schedule
    Round up a small group of participants who represent your target audience (five participants is ideal42).
  2. Conduct tests
    User-testing sessions are ideal for validating43 whether your animation is effective. Run participants through typical tasks that would be performed in your application. Observe whether your animation is helping or harming the experience. Ideally, UX sessions are captured with video so that they can be referred to and reviewed afterwards. If you are conducting your sessions remotely, take advantage of the screen-recording features available in web conferencing applications such as GoToMeeting and WebEx.
  3. Review feedback
    Take time to reflect on the insights gathered from the user-testing sessions. Ensure that user needs and concerns from the initial discovery phase are being properly addressed.
  4. Decide
    Once user testing is complete and feedback has been reviewed, you can make an informed assessment of whether further refinements are needed or you’re ready to move to production.
UX animation workflow44
A UX animation workflow. (View large version45)

Final Notes Link

UX designers who are considering motion in their designs 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 on. Leverage the growing range of approaches available today, from paper to code, that will help you get the buy-in needed to smoothly integrate animation in your workflow.

With UX animation, subtlety is key. Focusing on helping users achieve their goals is paramount.

Resources Link

  • Functional Animation in UX Design46,” Amit Daliot, Smashing Magazine
    Daliot gives an overview of how animation in UX design is a tool to create clarity and logic within an experience, including many useful examples.
  • Your UI Isn’t a Disney Animation47,” Sophie Paxton, Medium
    Paxton offers great insight into how to avoid creating animation that merely gets in the way of the user.
  • Animate.css48, Daniel Eden
    Here are a bunch of cool, fun and cross-browser animations you can use in your projects.
  • CodePen animation examples49
    CodePen’s inspirational playground of UI animations can be dissected and forked to create new concepts or just to experiment.
  • Animating SVG With CSS50,” Chris Coyier, CSS-Tricks
    Get started using inline SVG code, right inside HTML, and animating the elements through CSS.
  • A Modern Web Designer’s Workflow51” (video), Chris Coyier, CSS-Tricks
    Although a few years old, this is still a relevant example of a modern front-end workflow.
  • Animation Examples52,” react.rocks
    This gallery demonstrates the power of React for animation.

(ds, jb, ml, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/usability-and-user-experience/
  2. 2 https://dribbble.com/shots/1928659-Delivery-Card
  3. 3 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/
  4. 4 http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/
  5. 5 http://www.tandemseven.com/blog/5-essentials-for-customer-journey-maps/
  6. 6 https://medium.com/@sophie_paxtonUX/your-ui-isn-t-a-disney-movie-703f7fbd24d2
  7. 7 http://www.ics.com/blog/visceral-appeal-ux-–-part-3-aesthetics
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/02/align-user-needs-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/02/align-user-needs-opt.png
  10. 10 https://dribbble.com/search?q=ux+animation
  11. 11 https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=UI%20motion
  12. 12 http://codepen.io/search?q=animation&limit=all&depth=everything&show_forks=false
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-ui-animation-storyboards-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-ui-animation-storyboards-opt.png
  15. 15 https://www.adobe.com/products/photoshop.html
  16. 16 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
  17. 17 https://www.adobe.com/ca/products/aftereffects.html
  18. 18 http://www.smashingmagazine.com/2015/06/fitting-after-effects-into-a-ux-workflow/
  19. 19 https://www.apple.com/mac/keynote/
  20. 20 https://robots.thoughtbot.com/animating-with-keynote
  21. 21 https://www.adobe.com/products/edge-animate.html
  22. 22 http://www.axure.com/
  23. 23 http://www.axure.com/c/blog/139-coming-axure-rp-8-new-animations-interactions.html
  24. 24 http://invisionapp.com
  25. 25 http://blog.invisionapp.com/motion-prototype-animation/
  26. 26 https://www.flinto.com/mac
  27. 27 http://principleformac.com/
  28. 28 https://proto.io/en/new-features/
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/02/protype-applications-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/02/protype-applications-opt.png
  31. 31 https://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
  32. 32 http://www.w3schools.com/css/css3_animations.asp
  33. 33 http://zurb.com/playground/motion-ui
  34. 34 http://ricostacruz.com/jquery.transit/
  35. 35 http://julian.com/research/velocity/
  36. 36 http://greensock.com/gsap
  37. 37 http://famous.org/
  38. 38 http://framerjs.com/
  39. 39 https://facebook.github.io/react/
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/02/protype-code-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/02/protype-code-opt.png
  42. 42 http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
  43. 43 https://www.gv.com/lib/the-product-design-sprint-validateday5
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/02/UX-animation-workflow-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/02/UX-animation-workflow-opt.png
  46. 46 http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
  47. 47 https://medium.com/@sophie_paxtonUX/your-ui-isn-t-a-disney-movie-703f7fbd24d2
  48. 48 https://daneden.github.io/animate.css/
  49. 49 http://codepen.io/search?q=animation&limit=all&depth=everything&show_forks=false
  50. 50 https://css-tricks.com/animating-svg-css/
  51. 51 https://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
  52. 52 http://react.rocks/tag/Animation
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Mark is a Principal User Experience Architect for TandemSeven. He has been enjoying a career as a human-centered design professional for over 20 years. He's designed many types of data-rich digital products and applications. Mark's experience spans the financial, pharmaceutical, retail, and entertainment industries.

You can follow him on Twitter at @markdisciullo and see his portfolio of animations and UX design at www.markdisciullo.com

  1. 1

    Its so sad how Tumult Hype keeps getting overlooked. As a spiritual successor to Flash, but completely HTML5 based, its timeline functionality greatly outshines the options listed in this article.

    5
  2. 2

    Dmitry Astapkovich

    March 16, 2016 2:52 pm

    So sad to see article about Motion Design with single short video in the begging and tons of text below. IMHO single showcase would be way more useful

    -2
    • 3

      Mark Di Sciullo

      March 16, 2016 3:21 pm

      Thanks for your comments Dmitry.

      Just to clarify, the intent of this article was not to provide yet another showcase article, (there’s plenty of amazing examples on Dribbble and Behance) but to provide the UX motion designer with some user centered strategies for getting their concepts into the product design workflow as well as helping them have the right tools in their toolkit.

      This article is also looking to stress the importance of how motion improves the user experience in ways that go beyond just providing aesthetic appeal, but by helping humans actually complete their tasks.

      Thanks for reading!

      7
      • 4

        Strange that I never see 2 programs that are invaluable to my corporate workflow in these lists . . .

        Using an Application:
        Adobe InDesign (yes, really). InDesign is perfect at and designed for layout, so app layout is a natural fit. Believe it or not, between its exceptional vector handling, event-based custom animation and button controls, and swf/html/epub output, its become the perfect fit for designing a pixel-perfect app on a defined grid, proto’ing animations/transitions, and exporting vector elements for final production builds. Kinda shocked few use it.

        Coded Prototypes:
        VisualStudio Blend (VS 2013/2015). If building to PC or Mac there is currently no better app for creating final code XAML/C+ UI’s complete with final animation and data bindings. Hand to the dev team and go :).

        1
        • 5

          Mark Di Sciullo

          March 18, 2016 12:01 am

          Thank you Aldous for bringing these additional tools to our attention and providing your insights. So many great tools. It’s a great time to be experiencing the convergence of UX and Motion Design!

          1
  3. 6

    Jason Arnesen

    March 17, 2016 12:01 am

    Great article. Currently I use Adobe After Effects for motion design when design interactions for UI design and development. Generally I add an animated gif as a visual to development that illustrates whatever the interaction is to do.

    2
    • 7

      Mark Di Sciullo

      March 18, 2016 12:05 am

      Thank you Jason! – I totally agree, After Effects is indispensable for quickly mocking up a proposed motion design concept…and doing it in a very convincing way. I have to admit, it is my favorite tool out of all of them listed above.

      3
  4. 8

    Excellent article, structured, thorough and actionable, I totally prefer this to a video review, so I have to disagree with @Dmitry Astapkovich.

    0
  5. 10

    Vicente Ocana

    March 18, 2016 1:55 pm

    Thanks for this extremely detailed article ! I have referenced it on my blog.

    I keep an eye on soon to be released SketchApp & Silver Flows, to see if it keeps the mighty simplicity of Sketch, applied to prototyping animations.

    1
    • 11

      Mark Di Sciullo

      March 19, 2016 4:43 pm

      Thanks Vicente — I am also excited about the possibilities of prototyping in Sketch with Silver Flows. I think InVision will be a good thing for Silver Flows.

      0
  6. 12

    Dane Williams

    March 18, 2016 10:24 pm

    Excellent job Mark! Lots of great practical info and some resources I’ll be checking out in the days ahead. You’ve thrown down the gauntlet for me to make my animations “subtle” yet more “focused” on being helpful to the user. Thanks!

    1

↑ Back to top