Mendesain Dengan Gerakan yang Dikurangi Untuk Sensitivitas Gerakan

CSS baru-baru ini menambahkan fitur yang memungkinkan kami mengenali preferensi dan kualitas pengguna tertentu dari lingkungan pengguna saat ini. Salah satu fitur baru tersebut, khususnya fitur media dengan gerakan yang dikurangi, dapat sangat berguna untuk mendesain gerakan yang lebih inklusif di web.

Beberapa tahun yang lalu, saya menulis artikel tentang mendesain animasi web yang lebih aman untuk sensitivitas gerakan dan opsi terbatas yang kami miliki saat itu untuk mendesain gerakan yang aman di web. Beberapa hal tetap sama sejak artikel asli itu, seperti jenis efek gerakan yang dapat memicu, dan pentingnya konteks dan harapan pengguna. Namun yang berubah adalah keberadaan dan dukungan fitur media prefers-reduce-motion. Itu membuat perbedaan besar dalam bagaimana kita dapat merancang gerakan dalam pekerjaan kita menjadi inklusif dan dapat diakses.

Mengapa Mengurangi Gerak?

Rilis iOS7 pada tahun 2013 memicu kesadaran di seluruh dunia desain digital bahwa beberapa gerakan di layar — bahkan jika itu adalah bagian dari antarmuka — dapat memiliki konsekuensi fisik bagi orang-orang dengan kepekaan gerak. Pada tahun-tahun sejak itu, sistem operasi seluler dan desktop utama telah menambahkan fungsionalitas bagi orang-orang untuk mengurangi jumlah gerakan yang mereka temui di sistem operasi mereka.

Artikel seperti "Interaktif Anda Membuat Saya Sakit" dan "Aksesibilitas Untuk Gangguan Vestibular" berbagi cerita langsung tentang bagaimana pilihan desain kami, terutama seputar gerakan, dapat memiliki konsekuensi fisik bagi mereka yang sensitif terhadap gerakan. Akar penyebab sensitivitas gerak ini dapat sangat bervariasi antar individu. Untuk beberapa, itu berakar pada gangguan vestibular, sementara untuk yang lain mungkin berasal dari migrain atau faktor lain. Apa yang memicu juga dapat bervariasi dari orang ke orang, atau bahkan dari hari ke hari untuk beberapa orang. Gejala fisik yang dialami individu sebagai akibat dari gerakan pemicu itu dapat berkisar dari sedikit pusing atau sakit kepala hingga mual atau lebih buruk.

Pilihan desain yang kami buat seputar animasi dalam pekerjaan kami secara langsung memengaruhi bagaimana pekerjaan kami memengaruhi orang-orang dengan kepekaan gerak. Mengetahui jenis gerakan apa yang berpotensi memicu, dan bagaimana kami dapat menguranginya dengan pilihan desain kami, membantu kami merancang pengalaman yang aman bagi audiens kami dan tidak akan menyebabkan bahaya yang tidak diinginkan. Animasi masih benar-benar dapat memberikan dampak positif pada upaya UX kami, tetapi terserah kami untuk memastikan kami menggunakannya secara bertanggung jawab, sama seperti kami mencoba menggunakan alat desain kami yang lain secara bertanggung jawab.

Lebih suka Mengurangi Gerakan Di Web

Fitur media yang lebih disukai-dikurangi-gerak sekarang memiliki dukungan browser yang kuat. Ini didukung di versi Edge, Firefox, Chrome, Safari, Opera, iOS Safari saat ini, serta di Browser Android dan Chrome untuk Android. Tingkat dukungan yang kami miliki saat ini menjadikannya sesuatu yang benar-benar dapat Anda gunakan dalam produksi. Juga, jika browser seseorang tidak mendukung fitur ini, tidak ada hal buruk yang terjadi, itu hanya akan diabaikan dan semuanya akan berjalan seperti sebelumnya.

Di sisi pengembangan, kita dapat menguji gerakan yang dikurangi dengan cara yang sama seperti kita menggunakan kueri media lain di CSS atau JavaScript untuk mengetahui apakah gerakan yang dikurangi telah diminta.

Dalam CSS yang akan terlihat seperti ini:

 @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }

Dan dalam JavaScript:

 let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged()

Cara apa pun yang Anda pilih untuk mengaksesnya, kueri media ini akan mengembalikan salah satu dari dua nilai: no-preference (false), atau reduce (true). Setelah diambil, Anda dapat menggunakan nilai ini untuk menginformasikan apa yang Anda tampilkan di browser.

Dari dua nilai yang dapat dikembalikan, satu-satunya yang dapat dipastikan telah disetel dengan sengaja adalah nilai reduce (true) . Tidak ada preferensi (salah) dapat berarti bahwa orang yang bersangkutan baik-baik saja dengan semua jenis gerakan, atau bisa juga berarti bahwa preferensi itu belum ditetapkan. Hal ini membuat pendekatan apa pun yang menyamakan nilai tidak ada preferensi (salah) dengan orang yang bersangkutan memilih untuk mengikuti semua tingkat gerakan tidak dapat diandalkan. Karena itu, pendekatan yang lebih baik adalah mengurangi efek gerakan yang berpotensi memicu ketika nilai reduce (true) dikembalikan.

Misalnya, di sini animasi pantulan perulangan diganti dengan animasi fade in saat diminta mengurangi gerakan:

 /* A constant bouncing motion effect applied to the title */ h2 { animation: bouncing 1.5s linear infinite alternate; } /* Replace it with a safer effect when prefers-reduced-motion returns true */ @media (prefers-reduced-motion) { h2 { animation: fade 0.5s ease-in both; }

Mengurangi Gerakan Dari Perspektif Pengguna

Sebagian besar sistem operasi utama memungkinkan orang untuk mengatur preferensi mereka dalam pengaturan sistem mereka. Kata-kata yang tepat dan lokasi pengaturan bervariasi, tetapi preferensi dapat diatur pada sistem operasi iOS, OSX, Windows, dan Android.

Dalam Praktiknya, Lebih Suka Fitur Media Gerak yang Dikurangi

Memutuskan bagaimana menggunakan fitur media gerak yang lebih disukai untuk digunakan adalah saat kami memiliki ruang untuk menciptakan solusi yang paling sesuai dengan konteks produk dan konten kami. Untuk sebagian besar proyek web, Anda harus terlebih dahulu mengidentifikasi setiap efek gerakan yang berpotensi memicu di situs Anda, dan kemudian menggunakan fitur media preferensi-reduksi-gerakan untuk memberikan versi yang dikurangi dari efek tersebut.

Mari kita lihat setiap langkah secara lebih rinci.

Mengidentifikasi Gerakan yang Berpotensi Memicu

Untuk menemukan gerakan yang berpotensi memicu yang mungkin Anda miliki, lihat beberapa alur pengguna yang umum untuk situs atau produk Anda dan lihat lebih dekat efek gerakan yang digunakan: Apakah Anda memiliki interaksi yang memiliki gerakan besar? Adakah zoom besar, efek berputar, atau efek paralaks? Semua jenis efek animasi tersebut kemungkinan besar akan menimbulkan masalah bagi orang-orang dengan kepekaan gerak. Sebaliknya, efek animasi seperti warna memudar, perubahan opacity dan perubahan kecil dalam skala tidak mungkin menjadi masalah. Jika ragu, tidak ada salahnya untuk menambahkan efek tersebut ke daftar "untuk mengurangi" Anda untuk berhati-hati.

Pedoman Aksesibilitas Konten Web merekomendasikan untuk menyediakan versi yang diperkecil untuk setiap “gerakan yang menciptakan ilusi gerakan…yang tidak esensial bagi makna konten”. Saya pikir itu membantu untuk melihat beberapa contoh juga, terutama jika Anda tidak menganggap diri Anda sensitif terhadap gerakan di layar. Saya membahas contoh gerakan yang berpotensi memicu di artikel saya sebelumnya dan posting ini di blog Webkit juga memilikinya. Kemungkinannya adalah, kecuali situs Anda sangat bergantung pada gerakan, Anda akan berakhir dengan daftar efek yang cukup singkat untuk difokuskan di sini.

Buat Versi Gerakan yang Dikurangi

Selanjutnya, Anda ingin menentukan kondisi gerakan tereduksi yang paling tepat untuk efek yang berpotensi memicu ini. Bisakah animasi dengan mudah disesuaikan untuk menggunakan efek non-gerakan seperti fade opacity atau crossfade untuk permintaan gerakan yang dikurangi? Apakah menjeda gerakan atau menghapus efek sepenuhnya untuk gerakan yang dikurangi akan mempertahankan makna konten?

Peran dari gerakan tersebut akan menjadi faktor penting dalam memutuskan versi reduksi apa yang paling tepat. Anda tidak ingin menghapus konten secara tidak sengaja atau menurunkan pengalaman secara keseluruhan. Berikut adalah beberapa contoh dari apa yang mungkin bekerja dengan baik untuk efek yang berpotensi memicu yang Anda temukan:

Transisi Halaman Besar

Efek transisi halaman besar kemungkinan dapat diganti dengan efek crossfade untuk mode gerakan yang diperkecil. Hal yang sama biasanya berlaku untuk zoom besar atau transisi berputar yang bertransisi antara status atau tampilan yang berbeda.

Ilustrasi Animasi

Ilustrasi animasi, di sisi lain, mungkin paling baik diganti dengan versi statis untuk mengurangi gerakan jika sebagian besar untuk kepribadian atau efek branding. Anda harus memastikan versi statisnya tetap bermakna, dan susunan yang paling bermakna mungkin tidak selalu menjadi awal atau akhir animasi. Menambahkan fungsionalitas untuk memutar ilustrasi animasi sesuai permintaan untuk pengurangan gerakan juga dapat berguna dengan memungkinkan orang memainkan animasi saat mereka siap untuk itu.

Jangan lupa untuk mempertimbangkan gerakan dalam gif animasi atau video yang diputar otomatis di sini juga. Ini juga dapat berisi gerakan yang berpotensi memicu dan akan membutuhkan versi yang dikurangi jika ada.

Efek Paralaks

Efek paralaks dan efek pengguliran halus yang dilebih-lebihkan secara universal memicu orang-orang dengan sensitivitas gerakan, jadi efek tersebut harus dikurangi secara signifikan atau dihilangkan seluruhnya untuk pengurangan gerakan. (Setiap orang yang saya ajak bicara dalam penelitian saya tentang ini menyebut paralaks secara khusus sebagai masalah bagi mereka.) Efek pengguliran yang mulus dapat diganti dengan perilaku tautan jangkar browser default seperti yang dijelaskan di sini oleh Eric Bailey. Menghapus efek paralaks untuk mengurangi gerakan adalah solusi ideal, tetapi pastikan untuk memeriksa bahwa semua konten yang diperlukan masih terlihat dan dapat digunakan dengan paralaks dihilangkan.

Dalam kebanyakan kasus, mengganti efek yang berpotensi memicu dengan efek yang lebih aman untuk mengurangi gerakan adalah cara terbaik untuk mempertahankan sebanyak mungkin maksud dan kegunaan konten. Untungnya, mengganti efek yang dikurangi bisa sangat mudah juga.

Contoh Pengurangan Gerak

Misalnya, katakanlah saya menandai animasi tajuk ini sebagai berpotensi memicu ketika saya membuka situs saya. Gerakannya cukup besar untuk menciptakan ilusi gerakan, sehingga kemungkinan akan memicu, dan beberapa arah gerakan juga cenderung bermasalah. Ini pasti salah satu yang saya masukkan ke dalam daftar efek yang memerlukan versi yang dikurangi saat meninjau situs saya.

Semua foto tanaman memiliki gaya yang sama yang diterapkan pada status akhir animasinya untuk memposisikannya secara intrinsik di mana mereka berada dalam aliran dokumen secara default:

 .active .plant1, .active .plant2, .active .plant3 { transform: translateY(0); opacity:1; }

Dan masing-masing memiliki keadaan awal dengan pemosisian untuk menerjemahkannya sedikit di atas atau di bawah posisi intrinsiknya untuk memulai. Seiring dengan transisi yang ditentukan untuk membuat animasi terjadi:

 .plant1 { transform: translateY(-100%); transition: $dur $ease-both; } .plant2 { transform: translateY(120%); transition: $dur $dur/6 $ease-both; } .plant3 { transform: translateY(-100%); transition: $dur $dur/3 $ease-both; }

Animasi teks bekerja dengan cara yang sama tetapi dengan terjemahan horizontal dari setiap kata, bukan terjemahan vertikal.

Saya dapat mengubah animasi ke opacity transisi alih-alih mentransisikan posisi transformasi ketika gerakan yang dikurangi telah diminta dengan mengubah status awal animasi seperti ini:

 @media (prefers-reduced-motion: reduce) { .plant1, .plant2, .plant3 { transform: translateX(0); opacity:0; } }

Sekarang, ketika fitur media gerak-lebih-lebih disukai kembali benar, status awal setiap animasi foto tumbuhan akan diatur ke posisi akhir dengan opasitas 0. Ini berarti ia dapat menggunakan properti transisi yang sama — easing, durasi, dan offset yang sama — tetapi opacity akan dianimasikan sekarang alih-alih posisi melalui transformasi:

Perhatikan bagaimana saya tidak perlu membuat perubahan apa pun pada durasi, easing, atau penundaan animasi untuk melakukan ini. Mengganti properti animasi, tetapi masih menggunakan detail animasi yang sama, sudah cukup untuk mengurangi gerakan. Contoh khusus ini dibuat dalam CSS, tetapi menukar properti animasi bisa sama mudahnya dengan JavaScript atau saat menggunakan pustaka animasi juga.

Contoh Pengurangan Gerak Di Alam Liar

Anda dapat melihat pendekatan ini beraksi di viljamisdesign.com, yang kebetulan merupakan salah satu situs pertama selain apple.com yang saya perhatikan bekerja dengan gerakan yang dikurangi. Saat Anda membuka situs dengan gerakan yang dikurangi, animasi bintang yang berputar dihentikan dan gerakan judul yang lebih besar dihapus. Tapi animasi seperti berbagai efek hover semua masih ada. Ini menghasilkan pengalaman yang memiliki kemampuan UX dan detail desain yang utuh, sekaligus lebih aman bagi orang yang meminta pengurangan gerakan. (Berikut adalah video Viljamisdesign.com baik dengan dan tanpa pengurangan gerakan yang diaktifkan untuk referensi: https://vimeo.com/39979166/1bd41d1919)

Halaman Airpods Pro juga merespons pengurangan preferensi gerakan, tetapi dengan cara yang sangat berbeda karena konten dan efek yang digunakan. Hampir semua gerakan di halaman berpotensi memicu karena memiliki banyak gerakan zoom besar dan efek gaya paralaks. Ketika gerakan yang dikurangi diminta, semua efek paralaks dan gerakan besar akan dihapus, tetapi mereka melakukan lebih dari sekadar menjeda atau menghapus animasi. Versi yang Anda lihat dengan gerakan yang dikurangi yang dipilih telah dirancang dengan hati-hati untuk mempertahankan konten dan makna yang sama dari pengalaman gerakan penuh. (Berikut adalah video situs The Airpods Pro baik dengan dan tanpa pengurangan gerakan yang dipilih untuk referensi.)

Tambahkan Toggles Kustom Untuk Pengalaman Motion-Heavy

Saya sebutkan di atas bahwa sebagian besar situs "berbasis tugas" kemungkinan hanya memiliki beberapa animasi yang mungkin memicu dan memerlukan versi yang dikurangi. Tapi itu bukan satu-satunya jenis situs web yang ada di web. Proyek yang melibatkan banyak gerakan, seperti situs yang dimaksudkan lebih untuk mendongeng atau menciptakan pengalaman mungkin mendapat manfaat dari pendekatan yang sedikit berbeda.

Untuk proyek seperti ini, akan sulit untuk membuat daftar gerakan yang berpotensi memicu dan memberikan alternatif yang dikurangi untuk setiap gerakan karena hampir semua gerakan yang digunakan berpotensi memicu. Plus, gerak adalah bagian yang sangat banyak dari konten dan maknanya. Merancang mode gerakan yang diperkecil untuk jenis situs ini akan mengambil pendekatan yang lebih global dan lebih banyak upaya untuk memastikan makna konten Anda dipertahankan bahkan saat gerakan dikurangi.

Untuk situs pengalaman yang sangat beranimasi ini, menyediakan sakelar gerakan khusus yang terlihat adalah hal yang berguna untuk disertakan. Ini akan memungkinkan orang yang mungkin belum mengetahui tentang pengaturan gerakan yang dikurangi, atau yang mengalami sensitivitas gerakan pada saat itu, untuk menyesuaikan pengalaman dengan cepat. Pengalih gerakan menyediakan cara bagi orang yang peka terhadap gerakan untuk berpartisipasi dalam konten Anda dengan cara yang tidak akan membuat mereka muak. Itu pasti lebih baik untuk semua orang yang terlibat daripada mereka harus menghindari situs Anda sepenuhnya.

Konteks Adalah Faktor Kunci

Ingatlah bahwa konteks juga memainkan peran besar di sini. Tak seorang pun ingin dikejutkan oleh sejumlah besar gerakan di mana mereka tidak mengharapkannya. Jika Anda mengunjungi situs yang disebut sebagai pengalaman bercerita yang sangat interaktif, Anda akan memiliki harapan yang sangat berbeda dibandingkan saat Anda mengunjungi situs web bank Anda. Kedua situs tersebut tentu saja dapat menampilkan animasi dalam jumlah besar, tetapi itu akan menjadi kejutan yang tidak terduga di situs bank.

Membuat Toggle Gerakan Kustom

Ide toggle kustom adalah sesuatu yang saya sebutkan kembali di artikel 2015 saya, tetapi hari ini itu adalah pilihan yang jauh lebih layak. Di web saat ini, kita dapat membuatnya dengan lebih mudah, dan bahkan membuat sakelar yang lebih cerdas daripada yang dapat kita lakukan beberapa tahun yang lalu.

Marcy Sutton memiliki contoh yang bagus tentang bagaimana sakelar gerak kustom modern dapat bekerja di CodePen ini. (Contoh ini adalah bagian dari kursusnya tentang membuat aplikasi web yang dapat diakses, yang juga sangat layak untuk dicoba.) Contoh ini menggunakan sakelar untuk menghapus semua gerakan karena hanya mencakup satu animasi, tetapi pendekatan ini dapat digunakan untuk memberikan pengurangan gerakan efek di seluruh aplikasi atau situs mengikuti logika yang sama juga.

Fitur utama dari pendekatan ini adalah seberapa baik Marcy menghubungkannya dengan teknologi web modern, yaitu lebih menyukai gerakan yang dikurangi dan penyimpanan lokal. Saat menggunakan pendekatan ini, jika seseorang datang ke situs Anda dengan permintaan pengurangan gerakan, mereka secara otomatis mendapatkan versi pengurangan gerakan tanpa harus mengaktifkan sakelar secara manual juga. Dan jika seseorang meminta sakelar untuk mengurangi gerakan, preferensi itu akan disimpan melalui penyimpanan lokal sehingga mereka tidak perlu berulang kali membuat pilihan ini setiap kali mereka berkunjung.

Situs resmi Animal Crossing adalah contoh dunia nyata yang luar biasa dari sakelar pengurangan gerakan khusus yang dikombinasikan dengan fitur media pengurangan gerakan yang disukai. Ini adalah salah satu contoh favorit saya dalam menangani gerakan yang dikurangi. Pilihan desain yang mereka buat seputar cara mengurangi potensi gerakan pemicu, sambil tetap mempertahankan nuansa keseluruhan situs dan konten, sangat bagus. Saya menulis lebih banyak tentang bagaimana mereka melakukannya di posting blog ini. Ada banyak situs di luar sana yang audiensnya bisa mendapat manfaat dari pendekatan serupa.

Cara Lain Untuk Menggunakan Pengalih Gerakan

Jika Anda sudah memiliki panel preferensi atau pengaturan, menambahkan tombol untuk meminta pengurangan gerakan bisa menjadi hal yang berharga untuk ditambahkan ke pengaturan ini seperti yang dilakukan Twitter di situsnya. Dalam hal ini, tidak ada banyak gerakan yang langsung ditampilkan saat mengunjungi situs dan sudah ada panel pengaturan, jadi menerapkan sakelar sebagai bagian dari preferensi pengaturan sangat cocok. Toggle Twitter juga menghormati pengaturan tingkat OS melalui kueri gerakan yang lebih disukai yang dikurangi dan telah disetel untuk hidup atau mati berdasarkan apa yang telah ditetapkan pengguna di tingkat OS. Merancang sakelar gerak Anda untuk menghormati pengaturan OS jelas merupakan pendekatan cerdas untuk mengimplementasikannya dengan baik di mana pun sakelar itu muncul.

Beralih kontekstual adalah pendekatan lain yang dapat digunakan untuk mengurangi gerakan pada ilustrasi animasi tertentu atau area konten lain yang muncul di seluruh situs Anda. Artikel The Dark Side of The Grid melakukan ini dengan baik dengan menambahkan tombol sakelar kontekstual ke setiap gambar animasi untuk memungkinkan pembaca memainkan animasi saat mereka ingin melihatnya, tetapi tidak membuatnya berulang tanpa henti saat mereka membaca.

Sejalan dengan itu, Dave Rupert berbagi teknik untuk menggabungkan gerakan yang dikurangi dengan elemen gambar untuk menunjukkan elemen statis sebagai ganti gif animasi ketika gerakan yang dikurangi telah diminta. Chris Coyier mengambil satu langkah lebih jauh dan menyarankan untuk menghadirkan play toggle untuk gif animasi tersebut berdasarkan pendekatan yang sama. Contoh de-animator gif Steve Faulkner juga bisa menjadi pendekatan yang berguna.

Semua ini, atau yang serupa, bisa menjadi opsi yang baik untuk mengurangi gerakan yang berpotensi memicu di web. Saya mengemukakan contoh-contoh ini karena dua alasan. Yang pertama adalah menunjukkan bahwa ada sejumlah cara pendekatan yang menyediakan pengurangan variasi gerakan dan Anda memiliki banyak fleksibilitas untuk menemukan pendekatan yang paling cocok untuk konten Anda. Dan kedua, seiring berjalannya waktu dan semakin banyak orang membangun situs dengan opsi gerakan yang dikurangi, semakin banyak solusi inovatif yang akan kita lihat dibagikan di komunitas.

Ada banyak cara kreatif untuk menambahkan sakelar dan pengaturan dengan cara yang masuk akal untuk konteks proyek Anda. Ini paralel yang menarik bahwa kami melihat semakin banyak situs web menyertakan panel pengaturan atau opsi untuk pengaturan preferensi seperti mode gelap. Menyertakan opsi untuk mengurangi gerakan bisa menjadi langkah alami berikutnya.

Semakin Banyak Kami Menggunakannya, Semakin Baik Untuk Semua Orang

Saya pikir penting bagi kami, orang-orang yang merancang dan membuat sesuatu untuk web, untuk memanfaatkan fitur media dengan gerakan yang dikurangi untuk membuat pekerjaan kami lebih inklusif. Dengan mengambil langkah-langkah untuk menghormati preferensi gerakan, kami membuat web lebih aman untuk digunakan lebih banyak orang, dan itu hanya hal yang baik. Kami benar-benar bisa ekspresif dan kreatif dengan gerakan di web sambil juga bertanggung jawab dan inklusif.

Tetapi tingkat kesadaran masih merupakan sesuatu yang perlu kita waspadai. Tidak semua orang yang mungkin membutuhkan pengurangan gerakan mengetahui opsi dalam pengaturan OS mereka. Mungkin lebih sedikit orang yang tahu bahwa itu dapat berpengaruh pada konten di browser mereka juga karena sangat sedikit situs web yang memanfaatkannya saat ini. Semakin kami memanfaatkan fitur media dengan gerakan yang dikurangi, dan memberikan pengalaman gerakan yang dikurangi dengan kualitas, fitur tersebut akan semakin bermakna bagi mereka yang membutuhkannya.