Animating modals for enterprise software
Modals create a focused view for users to complete tasks and consume relevant information without any distractions. Given the depth and array of features within Rubrik apps, we often leverage modals to help users protect their data in a focused manner.
The design of SaaS (Software-as-a-Service) products often emphasises achieving the core functionality in the most efficient way possible. However, there is an underlying assumption that business users don’t really care about good design, which I believe is a misconception.
At Rubrik we are committed to delivering an experience on par with what our customers are used to with industry leading consumer apps and animating the modal interactions is another step in that direction.
The need to animate
The need for visual delight is crucial in the long-term adoption of a feature. In the initial phase, functionality and utility are important factors when it comes to adoption of a feature, however, gaining customer loyalty to your product in the longer run is an entirely different ball game. Motion has the highest level of eminence in an interface, and not even text and images can compete with moving objects when it comes to attracting user attention [1].
In the Rubrik UI, all global actions are initiated through modals, which provide a focused view to the users. The creation and management flows relevant to objects (like Virtual Machines, Databases etc.), organisations, and all other entities under Rubrik involve frequent use of modals. Therefore, incorporating animations into modals seemed justifiable. At a high level, the decision to animate modal states was driven by two main intentions:
1. Creating a sense of visual delight
2. Meaningful visual representation of states
Visual Delight
In the current landscape of product development, the low barrier to entry makes the user experience a critical factor in determining which solution users will adopt. The accumulation of tiny, delightful experiences has a powerful psychological effect of satisfaction on users, leading them to be engaged and emotionally loyal to the product. It’s crucial to create a sense of visual delight to keep customers engaged and invested in the product [2]. Additionally, animations serve as a way to subconsciously reaffirm to customers that they are using a feature which is frictionless, smooth and fast.
Although having known the extent to which animations attract user attention, we were mindful of the fine line between attracting attention” and “distracting a user, hence we were always cautious not to end up distracting users from their primary workflow.
Meaningful Visual Representation
Associating a specific state of a component with a corresponding interaction creates a pattern in the users’ minds whenever they interact with that component [2]. In the case of modals, there are only two possible states — opening and closing of the modal. To enhance the user experience, we decided to associate a pair of subtle animations complementing each of those states.
By combining these two factors, we were able to get close to achieving a state where users’ primary needs are maintained with immersed productivity. At the same time, we were able to serve them subtle animations without distracting them from the main task.
The Process
As the first step, we conducted a comprehensive analysis of how animations were implemented in other popular SaaS products for their modal interactions. Here are some observations we made:
1. Shopify: Shopify’s modal interaction consists of two states. When opening the modal, it slides up with a fade-like animation, creating a smooth and visually appealing effect, and slides down with the exact animation regardless of whether the users choose primary or secondary actions, cancel or close the modal. [Link]
2. Slack: Slack’s approach to modal interactions is straightforward, with a basic instant appearance and disappearance of the modal. It has little to no animation visible. [Link]
3. Google and Zendesk: Google and Zendesk modals open up by expanding uniformly from the center of the screen, adding a sense of focus, whereas the closing animation is a basic instant disappearing effect. [Link]
4. Mailchimp: Mailchimp has fading in and out animations for both the opening and closing states of the modal, bringing a subtle touch of elegance to the user experience [Link]
Observations:
1. Most SaaS products rely on using very basic and simple interactions with restraint to avoid any visual load on the users.
2. For some products, the opening and closing states influence the animation but it is not a universal pattern.
3. All interactions are very quick and intuitive to help users efficiently continue their flow of tasks without causing any interruption.
This comprehensive research on how animations are used to enhance modal interactions served as a foundation for our own modal animation design. It allowed us to create our own unique experience here at Rubrik while also being informed by best practices from these popular SaaS products.
We followed an iterative process to get to the final version of the animation. Following the guiding principle of bringing visual delight in a subtle manner, we kickstarted things with a few iterations:
- Slide-In
Analysis: This style of animation was slightly unconventional and reminiscent of old-school powerpoint animations. Technically, it added some meaningful visual representation to the opening and closing states of the modal, however, it didn’t contribute much in helping the user believe that the particular feature is fast and frictionless.
2. Fade/Dissolve:
Analysis: While the intention was to keep the animation subtle enough to not distract the users, the classic fade style didn’t seem noticeable enough for the fast-paced application workflows used today.
3. Expand/Shrink:
Analysis: This style of animation encapsulated the requirements in the best way yet. There was a clear distinction between the opening and closing state of the modal. At the same time, it aligned with the basic speed expectations we set in order to make the feature feel seamless.
4. Screen Flash Effect:
Analysis: This iteration also did a great job in visually differentiating the opening and closing states and had a great delight factor as well which is certainly noticeable. However, one downside was that the effect was too explicit and could potentially distract the users.
5. Horizontal Centre Expansion:
Analysis: A similar variant of the screen flash effect. The only difference being that the modal opened across the horizontal plane and closed with a slightly subtle reverse effect of the way it opened. This also aligned with the basic expectations and was unique in its own way.
Feedback
Once we had the iterations ready, we had multiple rounds of feedback sessions with different stakeholders — the design systems team, team leaders, engineers and other product designers, to zero in on the final iteration, and then further refine it.
After a close consideration between the Expand/Shrink effect and the screen flash effect, we came to a general consensus to proceed with the Expand/Shrink effect, due to the following reasons:
1. Expansion and shrinking of a component starts and ends on the exact centre of the screen, thus creating a clear point of emergence and closure. This makes it easier for the users to associate the interaction with the opening and closing states of the modal.
2. It is fast and subtle at the same time. Out of all the iterations, this one came the closest to catering to both of our primary requirements.
However, the process doesn’t end just at deciding how we want the animation to look like. Other factors, such as speed, delay and timing for different interactions matter a lot. Through multiple discussions and iterations we decided to go ahead with a combination of 100ms and 150ms for the time taken for opening and closing interactions of the modal respectively.
The process of improvement and validation does not stop here. Once the animation is implemented, we’ll also validate the intended goals and measure success by receiving direct qualitative feedback from customers as part of our continuous research sessions at Rubrik.
Final Version
References
- Harley, A. (2014, September 21). Animation for attention and Comprehension. Nielsen Norman Group. https://www.nngroup.com/articles/animation-usability/
- Babich, N. (2016, July 1). Motion in UX Design. UX Planet. https://uxplanet.org/motion-in-ux-design-90f6da5c32fe#:~:text=Motion%20help%20designers%20create%20better,It%20provides%20a%20visual%20feedback.
The whole process of creating these animations wouldn’t have been possible without all of the people involved. Thanks to Reuven, Vinay, Cat, Dilsad, Tiffany, Binan, Charlsy, Oded, Mukul, Chirag, Saravana and Deepak for all the feedback along the way. Thanks to Nandita for helping bring this to life from the prototyping stage.
Interested in these kinds of design projects? Check out our Medium Page!
