Motion
Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to describe functionality, relationships and intention.
We are all for animations and encourage the SEB developer community to experiment with animations. We have tried to put down a few notes here as input. Do contact us if you would like our opinion on an animation that you have created: designlibrary@seb.se
Component meta
Component identifier
- pattern-motion
Design principles
Guidelines
Short description
Motion enhances usability in four ways:
- Expectation. How a user perceives resulting action and behaviour of an object.
- Continuity. The cause and effect of a certain action within a user flow that enhances the total user experience in a consistent way.
- Narrative. The linear progression of events and moments that results into an expected goal.
- Relationship. Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making.
When and how to use it
Use motion to help the user focus on the upcoming step, bring a task to their attention or indicate that an action is not available.
Make motion meaningful.
Behaviour
Motion should be quick, simple and intentional.
Do's and don'ts
- Do use motion to help a user complete a task.
- Do not animate everything, try instead to be subtle with microinteractions.
Interesting links
Specification
Time
- Stick to more than 200 ms - so that the user can see that something happens
- Some things get better with a delay
- "Ease-in" and "ease-out" makes start and stop smoother