- Overview
- User guide
Introduction
At Nedbank, we see motion as a powerful tool to enhance user experience and express our brand’s personality. Our motion guidelines are here to help you create engaging, intuitive animations that align with our values and design principles. By following these guidelines, you’ll be empowered to design consistent, delightful experiences.
Why motion matters
Motion breathes life to our digital interfaces, guiding users through their journeys and making interactions more enjoyable. It helps to:
Principles of motion
Accessibility
- Inclusive Design: Ensure animations are inclusive and do not cause discomfort. Avoid rapid flashing or strobing effects that could trigger seizures or migraines.
- User Control: Provide users with the option to disable animations if they prefer. This can be achieved through settings or preferences.
- Screen Reader Compatibility: Ensure that animations do not interfere with screen readers. Important information should not be conveyed solely through motion.
- Focus Indicators: Maintain visible focus indicators for interactive elements, even when animations are applied.
Authenticity
- Brand Alignment: Animations should reflect the bank’s brand values and tone. Use motion to enhance the brand story and create a sense of trust and reliability.
- Purposeful Motion: Every animation should have a clear purpose, whether it’s to guide the user, provide feedback, or enhance the user experience. Avoid gratuitous animations that do not add value.
- Realistic Physics: Use realistic motion physics to make animations feel natural and believable. This includes easing functions that mimic real-world acceleration and deceleration.
Simplicity
- Minimalist Approach: Keep animations simple and unobtrusive. They should enhance the user experience without overwhelming or distracting the user.
- Clear Communication: Use motion to clearly communicate transitions, changes in state, and interactions. Avoid complex animations that can confuse users.
- Efficiency: Ensure animations are lightweight and do not negatively impact the performance of the application. Optimize animations to run smoothly on all devices.
Consistency
- Unified Style: Maintain a consistent animation style across all platforms and devices. This includes using the same easing functions, durations, and motion patterns.
- Component Library: Develop a library of reusable animation components that adhere to the guidelines. This ensures consistency and speeds up the design process.
- Documentation: Document all animation guidelines and best practices. Provide examples and use cases to help the design team understand and implement the guidelines effectively.
Check out our full Motion guide
See moreNeed help? Get in touch.
Should you require any assistance or wish to collaborate with the Design System Team, please reach out via our Teams channel.
Teams: Design system - Queries
Implementing the Motion principles.
A combination of duration and easing will give you the required animation to use on the different components. Here are some examples of how it is used.
The role of motion guidelines in user journeys
These guidelines exist to help the design team create animations that are visually appealing, accessible, authentic, simple, and consistent, enhancing the overall user experience on our digital platforms.
Easing
Authenticity in product design fosters trust and loyalty. It ensures that our products and experiences reflect the brand's values and mission, creating a genuine connection with our users.
Timing
Achieving a user-friendly product starts with consistency in design. By allowing users to apply their existing knowledge, we reduce the learning curve and enhance the overall experience for both users and designers.
Small Interactions
(Tabs, buttons, toggles and input fields)
These interactions are normally quick and utility focused, and not distracting to the users.
These interactions are normally quick and utility focused, and not distracting to the users.
Medium Interactions
(Dropdowns, date pickers)
These interactions are also utility focused, and should not be distracting to the users. However, as larger components these should have a slightly longer duration to complete.
Large Interactions
(Banners, page transitions)
As the largest of interactions, these should take the longest time to complete. If these have has user interactions tied to them, eg. a card opening to a full page view upon click, then use standard easing curves, as it should be utility focused.
Check out our full Motion guide
see moreNeed help? Get in touch.
Should you require any assistance or wish to collaborate with the Design System team, please reach out via e-mail or our teams channel.
Email: elements@nedbank.co.za
Teams: Design system - Queries