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'all 2022
Search
UX Y'all
October 12, 2022
Design
0
93
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
68
Redefining UX Design in the Age of Generative AI - Will Ryan
uxyall
0
59
How to critique other people’s designs without pissing them off - Ingrid Towey & Jess Schaefer
uxyall
0
39
Are we breaking people with our designs - Steve Banfi
uxyall
0
40
The Breaks Design Thinking Workshop - Sara Sosnowski
uxyall
0
45
Are you ready willing and able to lead a UX Research and Design team? - La Tosca Goodwin
uxyall
0
47
Breaking the Research Paradigm: Unlearning Biases and Fostering Inclusive UX - Rachel Rodney
uxyall
0
34
Breakthrough User Research with Trauma Informed Practices - Sumonthip Gmitro & Michiko Stas
uxyall
0
40
Decolonizing Your Design System Unveiling Biases and Revolutionizing Inclusion - Michelle Chin
uxyall
0
64
Other Decks in Design
See All in Design
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
180
decksh object reference
ajstarks
2
910
「これをゲームにしたい!」と言われた時ゲームデザイナーが考えること
kinakobooster
5
5.2k
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
850
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
プロダクトデザインは子育て/Product design is parenting
medley
0
280
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
0
170
Resolving text accessibility dilemmas in UIs
romanshamin
0
130
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
1
110
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
A better future with KSS
kneath
231
16k
Atom: Resistance is Futile
akmur
258
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Optimizing for Happiness
mojombo
370
69k
Done Done
chrislema
178
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
We Have a Design System, Now What?
morganepeng
42
6.7k
Design by the Numbers
sachag
274
18k
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!