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
100
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
120
Redefining UX Design in the Age of Generative AI - Will Ryan
uxyall
0
95
How to critique other people’s designs without pissing them off - Ingrid Towey & Jess Schaefer
uxyall
0
73
Are we breaking people with our designs - Steve Banfi
uxyall
0
90
The Breaks Design Thinking Workshop - Sara Sosnowski
uxyall
0
96
Are you ready willing and able to lead a UX Research and Design team? - La Tosca Goodwin
uxyall
0
73
Breaking the Research Paradigm: Unlearning Biases and Fostering Inclusive UX - Rachel Rodney
uxyall
0
96
Breakthrough User Research with Trauma Informed Practices - Sumonthip Gmitro & Michiko Stas
uxyall
0
71
Decolonizing Your Design System Unveiling Biases and Revolutionizing Inclusion - Michelle Chin
uxyall
0
110
Other Decks in Design
See All in Design
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
aya_murakami_portfolio
ayakaimi1101
0
1.1k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
260
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
870
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Being A Developer After 40
akosma
89
590k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
GraphQLとの向き合い方2022年版
quramy
44
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
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!