11Dec/2017

How to approach motion design in the user interface?

Looking at different tools as the different approaches to design the motion in the digital design sprints

With the rapid development of the app and web-app market, the motion design is becoming more and more important. The motion design does not only help a certain brand to unfold its character in another dimension, it also helps the user to experience the interface in much richer textures. We experience our surroundings as the time passes by in the real world, that is also how we as human learn to understand the relations between the interactions. So it is also very natural for more and more interface design driving their digital product through the motion design.

Retrospective on motion design in UI design.

The idea of motion design is much older. Since the invention of the motion pictures, experts have spent countless days to perfect this disciplines. But it is not recently the motion design re-enter the UI design field again. There was a time when the internet is filled with motions and interaction, and also there was also the time when we are afraid of motions will pull down the product performance. But with more and more stakeholders realize that user experience is equally important as the product performance, sometimes these two holds onto each other. So, Today you will find more and more UI design deploy more deliberate motion to either enhance the user experience or to strengthen brand impact or both. This is partly because the technology for implementing motion design is becoming much cheaper and faster. This is also because of that, there are more and more emerging conventions for UI motion design now, so the motion design becomes an assistance instead of obstacles. To integrate the motion design in your next project, often you will have to prepare yourself in different approaches. Today there are several options for designers. I would like to walk through these options and talk about pros and cons.


The 3 UI motion approaches/tools for the digital designer today.

1. Interface motion design tools, integrated workflow.

During the post flash program era, there are a lot different tools entering and starts to define the UI motion design as an individual disciplines. Framer, Pixate, Proto.io and much more.

+Pros+
These tools extend your static UI design with timelines and gestures. so you don’t have to spend the time to re-build your scenes. Most of the time, you can just work with your current layers. You can either export the live working prototype or export your timeline as a movie format. They are best to use when you know what kind of motion and gestures you want to explore.

-Cons-
Their disadvantage is also their best advantage, that is they often limit their animation to certain preset. You can write your own code and logic, but it does require you to know coding to some extent, and sometimes the designers would prefer to work with more instant feedback in the creative process.

2. Prototype code, progressive enhancement of your digital product

As we mentioned, that most of the interface motion design tools have the option to write your own code, most of the time javascript based. Not every designer prefer to start their visual design from a line of code, but with more and more frameworks, the barrier for the designer to demonstrate their concept in code is becoming lower and lower. You can start with a lot of pre-defined CSS animation in different frameworks, such as Bootstrap, Foundation sites. Both frameworks are relatively easy to get started with but don’t expect the built-in animation will tell a complex concept. If you are comfortable with javascript and can easily abstract your concept into front-end language, you will be offered with more options and freedom. GSAP(Greesock) is really popular and fun to work with, especially if you are looking to construct more complex and robust UI motion sequence; anime is another option, it packs with a lot of the similar function as GSAP, but with a more refine and simpler control over the timeline properties. Mo js is another js framework to manipulate timeline and sequences, the unique feature for MO js is it has its own Mo js is another js framework to manipulate timeline and sequences,>player, where you can exam and edit your animation sequences.

+Pros+
You will gain full control over your UI motion quality, down to the last detail on how the browser will render your animation. By writing your own UI motion code, it is also easier to pair them with different logic and functionalities.

-Cons-
There are 2 major drawbacks to this approach.

  1. Depends on the program you are working with and the export options it has, you probably will have to re-build your graphic assets in code.
  2. There are a lot of uncertainties when you move your creative work into the prototype code too early. E.g. differences between your and your client’s viewing environment can largely impact how your UI motion is received. If your prototype code has a certain function that only works on WebKit browser, and your client is viewing it on a firefox, or IE, then you could spend more time to fix your code than producing creative output effectively.
  3. You also potentially risk spending more time to rewrite a large part of your prototype code, if the creative work is not settled with the clients because changes are expected during this phase of the project.

3. After Effect, max effort on max impact

The last approach I have been experiment recently is Adobe After Efftec(AE). It might seem an overkill to use a visual effect based program to create UI motion, but the creative freedom it offers will compensate for its learning curve. Plus, if you have been using flash for building your UI design, there are a lot of principles and tricks you can re-use in the AE. So, let’s take a look at the pros and cons of it.

+Pros+

  1. You are working with keyframes and timelines visually, so with quick rounds of the visual storyboard, you can quickly introducing your UI motion to your design and your client.
  2. The timeline control is still one of the best among above 2 approaches, most of the time you are only using 20% of what AE can offer, but if you have the patient, the rest of 80%(especially expressions in AE) can really expand your creative visions and quality.
  3. The final output we are looking at here is a self-contained movie format, which means, you will remove part of the unwanted technical frictions between you and client, and stakeholders can focus more on story-telling than bug-fixing. This ultimately means that you are expecting a much better quality on the feedbacks, and hopefully will help you to drive the motion UI in the right direction.

-Cons-
However, you are not looking at the silver bullet on UI motion design, but only one piece of the puzzle.

  1. Lack of export possibilities. this means when you are done with your UI motion design in the AE, there are limited ways to export your work further to the final production. Airbnb’s lottie-web are one of its first kind to extract your motion and build it as the production code.
  2. Depends on your workflow and UI design complexity, you are probably going to spend some time to re-build your creative work and compose them in AE again. It is not the most enjoyable task.

What approach I should take??

As I said earlier, there is no silver-bullet for UI motion design currently. Neither approach is no better than the others. Each different approach mostly accommodates certain phase of the design sprint. Some are good at to visualize the concept and introducing the motion design to the clients; some are excellent when you need to lock down the last detail of the motion design; some are great to use-test and push the concept to the final production. Here are the parameters helps me to decide what approaches to take during the creative process.


Axis x indicates how complex you are expecting your motion UI design
  • x0. Are you looking to tell a complex story or concept your motion design? Most of the time, this will also imply that UI motion design is going to take an important part of the product.
  • x1. Are you aiming at the low-hanging fruit, e.g. micro animations on hover effect?
Axis y indicates where you are in the design sprint
  • y0. Are you exploring the possibilities, and willing to present all possibilities on the table?
  • y1. Do you need to deliver yesterday and running out of time?

For scenario A: x0 y0. I would recommend using AE because you will get the highest quality of client feedback and the best freedom to explore your creativity.

For scenario B: x1 y0. I would recommend using some of the UI motion programs, then you are both looking at some of the industry best practice and the close integration with the current UI design tools.

For scenario C: x1 y1. I would recommend to start prototype code, combine with one front-end framework. Then you can leverage most part of the framework, and ensure the best balance between performance and development speed.

For scenario D: x0 y1. I would recommend to start prototype code as soon as you can and work together with your front-end engineers. That is when you can lock down the key storyboard with the client. Because the prototype code can push the product to the final release most effectively.

As I mentioned earlier, there is no one best approach throughout the different design sprints. For the digital designer, it is part of the job to swap in/out different approaches to help drive the project forward. But for me personally, I would much prefer to find myself in scenario A, it is the most challenge on the creativity, and also offers the most possibility to elevate your UI design into a new level.
But that is not to say the micro-interaction motion is not important, sometimes, when you are sharp about your concept, they can really have a huge impact on user experience.

The importance of taking the right approach to your motions in UI design.

The motion gives UI designer an extra dimension to explore, more information need to be fed and processed than ever before; on contrary, the screen real estates is getting smaller. Therefore introducing this extra dimension to hold the information is inevitable, it channels some the anxieties caused by the information overflow. Taking the right approach in the different phase of the design sprints can both introduce fresh solutions to some of the old problems, and focus what UI design is best at. Designers don’t have to just “add more” to accommodate brand impact and more information but can arrange those design requirements to different keyframes in the motion timeline.

Halei Liu

Crafting digital experience since 2005