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
81
Are we breaking people with our designs - Steve Banfi
uxyall
0
110
The Breaks Design Thinking Workshop - Sara Sosnowski
uxyall
0
110
Are you ready willing and able to lead a UX Research and Design team? - La Tosca Goodwin
uxyall
0
77
Breaking the Research Paradigm: Unlearning Biases and Fostering Inclusive UX - Rachel Rodney
uxyall
0
110
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
130
Other Decks in Design
See All in Design
アクセシビリティに取り組むメリット
magi1125
1
140
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.2k
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Cyber Heart Online Book
hjnasby
0
130
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
マンガで分かるサービスデザインガイドライン
senryakuka
1
900
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
450
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
760
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
420
NAHO SHIMONO_Portfolio2025
nahohphp
0
880
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Become a Pro
speakerdeck
PRO
29
5.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Automating Front-end Workflow
addyosmani
1370
200k
Producing Creativity
orderedlist
PRO
346
40k
Side Projects
sachag
455
42k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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!