We use UI animations to indicate change, soften cuts, and express our brands.
- Indicate the change of a state. Interactive elements use states to indicate focus, hover, selection, and errors.
- Soften harsh cuts between interactions that expose additional page elements or introduce new data on an existing page. This can also reduce perceived latency.
Examples: search results, applying filters, card selection, image galleries, modals - Express our brands and create delight. While our brands each have their own tone, we don’t want 14 different animation styles. The table below defines two categories of animation styles.
|
Brands
|
Brand feel
|
Animation feel
|
Effect examples
|
|
Tru
Home2 Suites
Tapestry
Hampton
Hilton Enterprise
Hilton Honors
|
Lively and friendly
|
Quick and soft
|
Soft bounce
Anticipation
Soft overshoot
|
|
Embassy Suites
HGI
Homewood Suites
DoubleTree
Waldorf Astroia
Conrad
Canopy
Hilton H&R
Curio
LXR
|
Tranquil and luxurious
|
Balanced and stable motion or small, soft movements
|
Ease in
Ease out
Change opacity Change
color, scale, or blur
|
Duration
Movement should be slow enough that the user can recognize what’s happening, but fast enough that they are never waiting. The magnitude of change in an animation and its importance combine to determine its duration.
Examples:
- Elements that have been closed or dismissed are a low magnitude change and can move fast.
- Introducing new content can be a larger cognitive load and should be a slower transition.
|
Type
|
Duration
|
|
Change of a state on a button or form field; icon transitions
(Example: hamburger to x, or play to pause)
|
Fastest
|
|
Dismiss modal; dismiss alert; close off-canvas menu
|
Fast
|
|
Introduce modals; open off-canvas menu; image galleries; introduce alerts
|
Slow
|
|
Page transitions
|
Slower
|
Do
- Keep animations simple
Don’t
- Animate separate items in different directions at the same time