Movement is life
Motion is perhaps the most important and powerful visual stimulus dimension. In reality, everything of any interest in the visual world moves.
Movement is life – literally
Did you know that 70% of all your sensory receptors are in your eyes and almost 50% of your brain is involved in visual processing?
We’ve been programmed to respond to movement from the beginning of our history. Today’s digital jungle is a little different, but the movement still draws our attention more than anything. The data backs this up, movement and visuals are consistently attracting higher levels of engagement.
We like to move it move it
Motion supports usability in four ways:
- Expectation
Expectation falls into two areas — how users perceive what an object is, and how it behaves. Аs designers, we want to minimize the gap between what the user expects, and what they experience.
Hover state of a button builds an expectation the element is actionable
- Continuity
Continuity is all about the user flow and the ‘consistency’ of the user experience. Continuity can be thought of in terms of ‘intra-continuity’ — the continuity within a scene, and ‘inter-continuity’ — the continuity within a series of scenes that make up the total user experience.
The change between the states and the date is supported by different visual clues – confetti and the word changing to date with a pop
- Narrative
The narrative is the linear progression of events in the user experience that results in a temporal/spatial framework. This can be thought of as the series of discrete moments and events that connect together throughout the user experience.
By obscuring the main page the user is made aware of an additional non-primary context that they are operating in
- Relationship
Relationship refers to the spatial, temporal, and hierarchical representations between interface objects that guide user understanding and decision making.
Opening a menu reveals how the objects are linked, and the relationship between them
At the same time animation is a functional element embedded in the UI as a part of the functionality of that design. It supports the design and has very clear and logical purposes including:
- Reduces cognitive load
- Prevents change blindness
- Establishes better recall in spatial relationships
Animation brings user interfaces to life. In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.
How we moved it, moved it
Two years ago we decided we wanted to add this extremely important skill to our team’s ever-expanding toolbox. Thanks to our Learning and Development program we had the chance to enroll in a very good animation course called Motion Beast.
We set a time frame to complete it and the key results we wanted to achieve. The results speak for themselves – our platform is becoming more and more alive.
- We added hover animations on actionable elements, skeleton and loading animations;
- We added animated reactions on both Blogs and R&R
- We will update our Error screens to make this unwanted and frustrating experience a bit less hideous for the user;
- Animations will be added to the different types of recognition on our Recognition wall
- We are updating all our email templates which will include a nice animated on-brand illustration;
There are many more in the works or planned, and a lot of them are tiny and really subtle but their effect on the experience is going to be noticeable.
Benefits and problems
The big advantage (and also drawback) of motion is that it attracts user attention. We are sensitive and prone to be distracted by any type of movement. That’s why motion in user interfaces can easily become annoying: it’s hard to stop paying attention to it, and, if irrelevant to the current task, it can substantially degrade the user experience (just think about the moving advertisement banners you can see almost everywhere).
Although animations can be useful and can build user expectations about the UI, they should be used with cautiously — primarily as a tool for providing users with easily noticeable, smooth feedback.
Animation should be accessible
We take accessibility seriously. You can see that not only in our legal Accessibility statement but also in our Accessibility awareness page. You can read more about this in our blog poster here: https://www.rewardgateway.com/uk/blog/worlds-most-accessible-employee-engagement-platform
We strive to make our animations as meaningful and useful as possible without making any compromise with the accessibility standards we observe very carefully.
For example, we do not use animations longer than 3 seconds, the users have control over them and they automatically stop when the person is using a reader. This way we provide a delightful experience for all users no matter what’s their range of abilities.
Animation should be a supporting player
Animation should never take the starring role. Instead, it should be a part of a set of methods that work together to create a great interaction design. That the goal is to create a functional experience, not a platform for showing the designer’s animation skills.
Animation should be a complementary part of the design. It should empower the user to accomplish whatever tasks they need to at that point in time. It should make their interaction with the webpage smoother, more natural, and more intuitive.
Animation should never slow down the experience
Animations are less critical for user experience when they are simply time-filling visual stimulations during moments of transition (in fact, it’s these down-time animations that often frustrate participants in usability testing).
Animation can certainly add a lot to the user experience. Unfortunately, if it lags, any benefit is lost as the user only focuses on the performance issues.
Motion should be natural and express personality
Ultimately, animation is adding movement to your screen. To create the best possible experience, that movement should be natural. Animation is also a fantastic opportunity to get creative and express some brand personality in our products. This is an opportunity to transform the tedious into mesmerizing and allow us to celebrate important moments in the user journey.
When animation is used in a subtle way, it can help users build mental models about how the system works and how they can interact with it.
Instead of using animations to provide surface-level delight, animations can be leveraged for usability: as clues about what is currently happening with the system, as signifiers for how UI elements will behave, and as easily understandable spatial metaphors for the user’s location in the information space.
We're currently hiring and would love to hear from you. We provide our Engineers and Product teams with full accessibility training to understand how movement can progressively improve our UX. If you'd like to learn more about the other learning opportunities and support available for our teams check out rg.co/careers.
