Since I have had an interest in motion design for a long time, I want to explore the intersection of motion design and user experience, to learn more about how to design motions appropriately to reinforce a better user experience. Therefore, I decided to initiate a research on motion design with the research questions as followed.
Q1 What is the value of motions in apps?
Q2 What & How motions are valuable under different contexts?
• The Principles of UX Choreography
• Creating Usability with Motion: The UX in Motion Manifesto
• Embracing Your Animated Future
• Jedi Principles of UI Animation
•. Personality of Interaction: Expressing Brand Personalities Through Interaction Aesthetics
• The illusion of life(video)
• Using the 12 Principles of Animation of Disney to designing UI animation will personify the motions and create a layer of emotional engagement for users.
• Besides creates emotion, animation can be used to support usability in motion.
Three motions were selected from each of the two articles above.
Since I didn’t have much experience in motion design, I decided to start from a low-fi prototype - motion in abstract context, so that I can test and iterate my design frequently before devoting much time to create a high-fi prototype. After several rounds of iteration, I finalized the best approach to each motion and started to create prototypes in real context.
1. Anticipation
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
2. Exaggeration
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
3. Follow through and overlapping
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
4. Overlay
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
5. Parenting
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
6. Transformation
Low-Fi
Hi-Fi
WITH
Low-Fi
Hi-Fi
WITHOUT
In order to understand how users from different backgrounds perceive the values of motions, I conducted 4 structured interviews with two participants in their twenties and two participants in their fifties. Besides, the two younger participants have some background in design and engineering whereas the older participants don’t.
I showed to the participants 6 groups of prototypes and asked them how they felt, after which I listed some values and asked them to choose which ones fit the motions.
After the interview, I consolidated findings and insights through affinity diagramming.
Different colored sticky notes represent feedback from different users.
Finding 1: Anticipation
1. Generally received optimistic feedback for this motion.
2. This is because: Anticipation makes the animation more realistic, fluent, and adds more fun elements to the whole effect.
3. Pay attention to design the speed of anticipation accurately to avoid a sense of lagging or delay.
Finding 2: Exaggeration
1. All received optimistic feedback for this motion.
2. This is because: All the participants think the application of Exaggeration makes the feature “Likes” more attractive. Some mentioned that the effect can deliver a sense of sincerity and confirmation.
3. Pay attention: The application of Exaggeration can have more elements added, like colors, layers, etc, to make the animation even more exaggerated and attractive.
Finding 3: Follow through and overlapping
1. Generally received negative feedback for this motion.
2. That is because: Under the context of revealing comments, Follow through and overlapping will make users feel messy and dizzy, since they can’t read clearly with the comments moving. It is especially a burden for older people.
3. A better solution can be: make all the comments appear at the same time.
Finding 4: Overlay
1. Young participants like it, but older participants don't.
2. This is because: Young participants think Overlay makes the action more fluent and pleasant. However, older participants find the motion messy.
3. A better solution can be: Decide whether to use the animation Overlay according to the age of the target users.
Finding 5: Parenting
1. Generally received optimistic feedback for this motion.
2. Parenting makes users think the app is well and deliberately designed in terms of interaction. And it is delightful since it gives people a sense of control.
Finding 6: Transformation
1. Generally received negative feedback for this motion.
2. That is because: The line moving around has already indicated that the video is uploaded successfully. So the application of Transformation is redundant and will complicate the whole action.
3. A better solution can be: Cancel Transformation. Transformation in combination with other motions may be too much.
• What is the value of motions in apps?
People think that if motion is used appropriately, it will have values like attracting, good-looking, fluent, logical, helpful, and so on, but there will be slight differences.
• What & How motions are valuable under different contexts?
1. Reasonable motions will improve the user experience, as well as the integrity and maturity of the product.
2. The commonly used UI animations and animations that are more realistic in daily life are more acceptable.
3. Motions will have different values according to different users, formats of content, and scenarios. This gave me the following design insights that can be applied to general motion design:
a. Design according to the profile of the target users: age, gender, job, educational level, etc.
b. Customize the use of animation according to the different formats of content: Pictures and icons are more suitable for complex motion effects, while words are suitable for simple motion effects. Especially when people are trying to obtain text information, it’s better not to add UI animation.
c. Customize the use of animation according to different scenarios: The action of transition is suitable for applying motions, while the action of revealing information should be as simple as possible.
1. Before researching a new topic, I need to read enough relevant papers to figure out the current research status so that I can define my research questions.
2. The background of the interviewees is determined by the research content. I need to make the background of the interviewees cover all target users as much as possible.
3. When I need the interviewees to choose some words I provide, I have to make sure they understand the meaning of those words. Because especially for single abstract adjectives, everyone has his own opinion which will cause confusion and inaccurate results.
4. Prototypes need to be clear enough for interviewees to recognize, otherwise, they will get confused and give the wrong conclusion.
