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
97
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
110
Redefining UX Design in the Age of Generative AI - Will Ryan
uxyall
0
83
How to critique other people’s designs without pissing them off - Ingrid Towey & Jess Schaefer
uxyall
0
63
Are we breaking people with our designs - Steve Banfi
uxyall
0
72
The Breaks Design Thinking Workshop - Sara Sosnowski
uxyall
0
83
Are you ready willing and able to lead a UX Research and Design team? - La Tosca Goodwin
uxyall
0
71
Breaking the Research Paradigm: Unlearning Biases and Fostering Inclusive UX - Rachel Rodney
uxyall
0
87
Breakthrough User Research with Trauma Informed Practices - Sumonthip Gmitro & Michiko Stas
uxyall
0
67
Decolonizing Your Design System Unveiling Biases and Revolutionizing Inclusion - Michelle Chin
uxyall
0
90
Other Decks in Design
See All in Design
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
1.9k
太田博三(@usagisan2020)
otanet
0
180
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
210
ZOZO CDO Office Design
zozodevelopers
PRO
1
360
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
330
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
440
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
230
Haruki_Konaka_Portforio.pdf
haruki556
0
550
アフォーダンスとシグニファイア
ryokanakai
0
300
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
1
480
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
230
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Building Adaptive Systems
keathley
38
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
A better future with KSS
kneath
238
17k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Statistics for Hackers
jakevdp
796
220k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
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!