Defining scope
Previously, UI elements would populate instantly without any easing or motion, which felt jarring and led to change blindness in users. Where there were motion elements, they were often inconsistent. This did not fit our internal values of providing a cohesive experience for the user.
Hypothesis
By adding motion I aimed to:
Reduce the perceived latency in loading times and transitions.
Animated loading states and transitions are perceived as faster , ‘slow down to go fast’
Reduce Change Blindness by drawing user’s attention to changes that occur on a page.
Change blindness is the tendency for people to overlook things that change outside their focus of attention)
Reduce cognitive load and increase the discoverability of key features
Motion orients users, guides them to call to actions, and creates relationships between elements on a page
Core values
Motion can feel be subjective, so we kept a set of values in mind throughout:
Bring value
Do not add motion for the sake of adding motion.
Brand
How is motion reflecting our design system and being integrated with existing components
Accessibility
Ensure that all users can understand and engage with the content, animated or not, and provide options to turn off motion.
Research
Research questions
I established a set of research questions to test our hypothesis:
How can we strategically incorporate motion to enhance the user experience?
How can we define the purpose of the motion in relation to users' feelings of accomplishment and frustration?
What foundational design tokens (curves, speed, and duration) should be established to ensure motion feels cohesive?
In what ways can the spatial interface be defined to ensure that the motion feels natural and seamless?
How can we gather stakeholder feedback to refine and expand upon our initial motion design decisions?
Competitive Analysis
I researched and analysed various UX motion principles, including the Disney principles of motion that use illusion and physics to create believable interactions and character appeal.
I also looked at the 1944 psychology experiment by Fritz Heider and Marianne Simmel, which demonstrated that humans emotionally resonate with motion even on geometric shapes, indicating the impact of motion UI.
Additionally, I examined how large-scale design systems, such as IBM's Carbon, Google Material, and Audi document and implement motion design. This analysis provided a strong foundation to develop Anaplan's motion design system, and validated a business need for motion in the design system.
Research findings
Why should we add Motion?
Motion brings understanding
Motion gives a user context to help navigate a site and understand their decisions. Motion can quickly communicate if an action has successfully taken place, or point them towards something that might otherwise be missed.
Motion engages
Motion can help turn boring and repetitive moments into enjoyable ones. eg. an engaging loading state animation has been proven to reduce the feeling of waiting.
Motion tells a story
Motion can help convey characteristics in a UI, helping show a product’s personality, bring a modern feel and contribute to the overall unique visual design.
Motion foundations
Workshop
I presented these findings and foundations in a team workshop, with engineer, design and product stakeholders. We asked questions to assess engagement:
Where does motion succeed and fail?
What are the technical considerations?
This feedback, along with analysis of the research and prototypes were brought together to consider next steps.
Takeaways
Motion succeeds when:
it solves problems,
used sparingly,
it makes users feel confident.
Motion fails when:
it slows me down
it is not accessible.
Technical considerations found that tokenisation and spatial definition would be potential blockers. We wanted to address this early in our design process. We also wanted to see real coded examples alongside prototypes.
Expressive motion was thought to be a valuable place for new users, for onboarding and empty / loading states.
Designs
Interaction audit
Based on our foundations, I conducted an internal audit of existing interaction types. This gave us a framework of components and patterns that could be grouped.
I discovered existing motion behaviours and grouped components by these components and begun working on prototypes to define the motion values.
Prototypes
As a proof of concept, I worked on motion prototypes. I started with low-fi interaction mapping in figma, and definied an initial set of motion types for each component foundation.
From here I moved onto a high fidelity prototype that was used for further testing and feedback before development and implementation.
Spatial definition
Following prototype feedback, I wanted to involve the spatial plane of the UI to add an extra level of motion continuity. This would set the patterns components and their relation to one another. I held a paper prototyping session with engineers to define some levels that would be built into design tokens.
Modal matrix
Modals also needed further consideration, as the distance in relation to screen size impacted the motion. I worked on a set of levels that would impact the distance the modal had to travel. This would validate the reduction of latency requirement while keeping motion for larger components on the screen.
Output and next steps
I developed a set of matrixes for these additional motion requirements. Alongside these, I compiled tokens for curves, location and speed. These were applied to a set of components that would be added as a first iteration.
Example of token proposal:
Curve
Default (Ease In Out)
Exit (Ease Out)
Enter (Ease In)
Speed
Fast (100ms)
Mid: (300ms)
Slow: (500ms)
Location
Top, right, left bottom, centre, appear.
Eg. for opening a right hand panel:
Entrance
Enter-mid-left
Exit
Exit-fast-right