Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Val Head — A New Look At UX Animation — UX Y'all 2022
UX Y'all
October 12, 2022
Design
0
37
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
John Maeda The Dirty MBA UX Y'all 2022
uxyall
0
31
Jen Cardello - Re-wiring the enterprise - UX Y'all 2022
uxyall
0
71
Jean Servaas and Mirko Azis - The 100 year system - UX Y'all 2022.pdf
uxyall
0
54
Aaron Draplin - An Update From The Front Lines of Contemporary Graphic Design - UX Y'all 2022
uxyall
0
43
Lexi Namer_Hey_Designers_UX Y'all 2022.pdf
uxyall
0
35
Dean Schuster — Chips and Pickle Story — UX Y'all 2022
uxyall
0
35
Gretchen McNeely Piet Kruithof_Big Wheels Keep on Turnin_UX Y'all 2022
uxyall
0
15
Jacquie Goyena Elisabeth Parker_Productive Conversations About Race_UX Y'all 2022
uxyall
0
26
Michelle Chin Mary Fran Thompson_How to Design Inclusive Workshops in a Hybrid World_UX Y'all 2022
uxyall
0
17
Other Decks in Design
See All in Design
デザイン本部デザイナーのお仕事
mixil
0
530
MIXI スポーツ領域とライフスタイル領域のデザイン
mixil
0
470
Installing and Running decksh/pdfdeck
ajstarks
0
210
副業デザイナーズで作るデザイン組織 / Design Teams as a Side Job Designer
kgsi
0
620
サイボウズのプロダクトデザイナーについて
cybozuinsideout
PRO
0
630
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
0
140
[UX/UI design] Target users and developmental psychology
shira0000000
1
240
「わかりやすさ」を デザインする情報アーキテクチャ必修入門 / Introduction to IA for "Design for Understanding"
securecat
18
6.9k
WAI-ARIAウェイウェイ会
shikakun
0
330
Kurashiru Brand Guideline
delyinc
0
2.8k
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
140
家族アルバム みてねの企画からリリースまでとデザインの意図
naoyawatanabe
2
21k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1351
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
239
19k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Adopting Sorbet at Scale
ufuk
65
7.8k
Gamification - CAS2011
davidbonilla
75
4.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Designing for Performance
lara
600
65k
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!