Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Val Head — A New Look At UX Animation — UX Y'al...
Search
UX Y'all
October 12, 2022
Design
0
110
Val Head — A New Look At UX Animation — UX Y'all 2022
UX Y'all
October 12, 2022
Tweet
Share
More Decks by UX Y'all
See All by UX Y'all
Breaking Down the Distinctions Evaluating AI generated Web Designs - Laura Ruel
uxyall
0
130
Redefining UX Design in the Age of Generative AI - Will Ryan
uxyall
0
120
How to critique other people’s designs without pissing them off - Ingrid Towey & Jess Schaefer
uxyall
0
88
Are we breaking people with our designs - Steve Banfi
uxyall
0
120
The Breaks Design Thinking Workshop - Sara Sosnowski
uxyall
0
120
Are you ready willing and able to lead a UX Research and Design team? - La Tosca Goodwin
uxyall
0
84
Breaking the Research Paradigm: Unlearning Biases and Fostering Inclusive UX - Rachel Rodney
uxyall
0
120
Breakthrough User Research with Trauma Informed Practices - Sumonthip Gmitro & Michiko Stas
uxyall
0
80
Decolonizing Your Design System Unveiling Biases and Revolutionizing Inclusion - Michelle Chin
uxyall
0
140
Other Decks in Design
See All in Design
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
130
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
Goodpatch Tour💙 / We are hiring!
goodpatch
31
890k
portfolio.pdf
onof003
0
160
#Dubois Challenge 2025: Economics
ajstarks
1
170
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
380
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimizing for Happiness
mojombo
379
70k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Music & Morning Musume
bryan
46
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
339
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Transcript
Val Head • UX Y’All 2022 A new look at
UX animation
Val Head • UX Y’All 2022 A new look at
UX animation
None
Animation & UX
UX animation • Visual continuity • Reduce cognitive load •
Connect contexts • Direct attention • Branding, voice and tone
User Preferences
“The prefers-reduced-motion media feature is used to detect if
the user has requested the system minimize the amount of animation or motion it uses.” prefers-reduced-motion
None
None
What type of motion to reduce? “…any motion that creates
the illusion of movement…” - WCAG
Multi-speed or multi-directional movement Commonly triggering motion effects: Spinning effects
Constant motion near text When you use any of these in your work, be sure to provide a reduced option.
Not on that list: Animated colour changes, opacity fades,
non-motion effects
How to respect reduced motion requests?
1. Identify potentially triggering motion effects 2. Choose a
reduced effect based on context Respecting reduced motion requests:
None
None
CSS @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }
JS let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () =>
{ if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();
None
None
None
None
smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
Container Queries
Container Queries in short: • Assign a container • Query
details about that container • De fi ne styles of other element(s) based on the results of that query
div { container:my-container / inline-size; } CSS
@container my-container (max-width:50em) { .thing { animation-duration: 250ms; } }
CSS
None
None
@container street (max-width:500px) { .cloud1 {animation-duration: 20s;} .cloud2 {animation-duration: 26s;}
.skyshapes {display: none;} } CSS
CSS @keyframes fl oating { 0% {translate: calc(0cqi - var(--cloud-width));}
100% {translate: calc(100cqi + var(--cloud-width));} }
Why adjust animation based on container size?
Focus or simplify animation for smaller contexts Emphasize with
strong motion for larger contexts Change playback sequence when layout changes Why adjust animations based on container size?
Container queries are for design too!
oddbird.net/2022/08/18/cq-syntax/
None
Thank you!