How motion design brings UIs to life
Generating better understanding while making products fun to use? No problem, thanks to motion design! Verena Brückner (user experience designer at UID) and Kimberly Gassner (thesis at UID) explain the unbeatable strengths of animated UIs.
UID: What is motion design to you?
Verena: To me, motion design is the deliberate creation of animations and transitions within a user interface. AT UID, motion design is considered to be one of a host of possibilities to make user interfaces user-friendly and attractive. We distinguish between purely aesthetic animations, e.g. start-up animations, and functional animations that foster understanding. These are of utmost importance to us in interface design.
UID: What benefits does motion design entail for the user?
Verena: An animated UI is fundamentally different from a static UI: movements give feedback on a user's actions, e.g. a shivering keyboard when somebody enters a wrong PIN. It helps to direct the user's attention and to enhance understanding for the structure and contents of the application. All in all, motion design does a lot for a positive user experience—after all, the apps should be fun to use. "Living" UIs involve the users and address their feelings. Certain behavior and character traits are attributed to objects. It is important though not to overdo it, as this might put users off. The animations should never slow the users down in their work by making them wait for the animation to finish.
UID: What are the advantages for companies of using motion design in their apps?
Verena: Motion design is a powerful tool for companies that enables them to breathe life into their brands and to convey an image. Certain animation effects evoke a certain subconscious perception with the users. For example, it allows the provider of a travel booking app to control whether they want to be perceived as "dynamic and refreshing" or as "reliable and safe". In order to get to the root of these and other mechanisms, we decided to support Kimberly Gassner's thesis on animated transitions.
UID: Kimberly, what dimensions of animation did you elaborate on in your thesis?
Kimberly: By stocktaking the state of the art in motion design I was able to identify 5 "dimensions of animation":
- Abstract elements: What elements are animated?
- Relationships: What "social relationship" is there between the elements?
- User experience: How can animations support the user?
- Specifications: How is the animation implemented? With what level of intensity?
- Marketing & feelings: What emotions are triggered in the users?
Each dimension stands for an aspect that should be carefully considered when designing the animation. There are many parameters that can be adapted a little to achieve a great effect. In the practical part of my thesis, I therefore analyzed six variants of an animation with one dimension being altered in each of them.
UID: How did you proceed when you planned the practical part of your work?
Kimberly: There was a qualitative interview in which the participants were shown six different variants of the same animations. They then had to describe the animations in their own words using word cards for the respective animations. In this process, the Product Reaction Cards from the Desirability toolkit were combined with the terms used in AttrakDiffs. Moreover, brand characteristics that were examined in the thesis were added. And finally, the participants were asked to assess the intensity of an emotion with respect to the current animation using semantic differentials.
Setting for User Tests:
UID: Did the project result in any other insights for you and UID?
Kimberly: The findings of my thesis enable UID to customize the animations for their clients even better. Moreover, the project allowed us to gather precious information on how to accurately assess motion design in user tests. The results of the qualitative interviews were interesting for creating UIs with animations. Most participants do not perceive animations as animations but as UI feedback that they would miss if it weren't given.
UID: UID uses animations for customers such as BOSCH and TRUMPF — projects in which you, Verena, participated. What is so fascinating about motion design?
Verena: I particularly like the great effects that can be achieved with small, plain measures. And this works anywhere: whether it be a packing machine, a medical app or a coffee maker with an embedded device. A coherent overall picture enhances understanding and makes the product fun to use.
UID: What are your next challenges in the field of motion design at UID?
Verena: We are continuously working towards bringing the design process for motion design to perfection, from storyboards for the first visualized procedures to simple prototypes in PowerPoint or Axure all the way to detailed animations in After Effects. Handing over the animation concept to software engineering is always a major challenge. Despite differing definition options such as easing curves, a close cooperation and coordination is vital for fine-tuning the animations.
Verena has been working as a user experience designer with UID Ludwigsburg since 2012. She focuses on designing touch-based machine controls and optimizing corporate software. Verena studied product design and creative direction.
Kimberly just graduated from the Technical University of Ingolstadt, successfully finishing her course in user experience design. She spent her internship with UID in Munich. From October on, she will deepen her knowledge of human-machine interaction by joining the Masters program "Human Factors".