Animasi dan gerakan

Pernahkah Anda naik mobil, perahu, atau pesawat dan tiba-tiba merasa dunia berputar? Atau pernah mengalami migrain parah sehingga animasi di ponsel atau tablet Anda, yang dibuat untuk "menyenangkan" Anda, tiba-tiba membuat Anda sakit? Atau mungkin Anda selalu sensitif terhadap semua jenis gerakan? Ini adalah contoh berbagai jenis gangguan vestibular.

Pada usia 40 tahun, lebih dari 35% orang dewasa akan mengalami beberapa bentuk disfungsi vestibular. Hal ini dapat menyebabkan pusing sementara, vertigo akibat migrain, atau disabilitas vestibular yang lebih permanen.

Selain memicu vertigo, banyak orang merasa terganggu dengan konten yang bergerak, berkedip, atau di-scroll. Orang dengan ADHD dan gangguan defisit perhatian lainnya mungkin sangat terganggu oleh elemen animasi Anda sehingga mereka lupa mengapa mereka mengunjungi situs atau aplikasi Anda sejak awal.

Dalam modul ini, kita akan melihat beberapa cara untuk membantu mendukung orang dengan semua jenis gangguan yang dipicu oleh gerakan.

Konten yang berkedip dan bergerak

Saat membuat animasi dan gerakan, tanyakan pada diri Anda apakah gerakan elemen tersebut berlebihan. Misalnya, warna yang berkedip dari gelap ke terang atau gerakan cepat di layar dapat menyebabkan kejang pada penderita epilepsi fotosensitif. Diperkirakan 3% penderita epilepsi menderita fotosensitivitas, dan lebih sering terjadi pada wanita dan orang yang lebih muda.

Panduan WCAG tentang kedipan merekomendasikan untuk tidak melakukan hal berikut:

• Berkedip lebih dari tiga kali dalam satu detik
• Berkedip di bawah batas kedipan umum dan kedipan merah.

Kedipan ini dapat, paling baik, menyebabkan ketidakmampuan untuk menggunakan halaman web atau, paling buruk, menyebabkan penyakit.

Untuk gerakan ekstrem apa pun, Anda harus mengujinya menggunakan Alat Analisis Epilepsi Fotosensitif (PEAT). PEAT adalah alat gratis untuk mengidentifikasi apakah konten, video, atau animasi layar kemungkinan akan menyebabkan kejang. Tidak semua konten perlu dievaluasi oleh PEAT, tetapi konten yang berisi kedipan atau transisi cepat antara warna latar belakang terang dan gelap harus dievaluasi, hanya untuk amannya.

Pertanyaan lain yang harus Anda tanyakan pada diri Anda tentang animasi dan gerakan adalah apakah gerakan elemen tersebut penting untuk memahami konten atau tindakan di layar. Jika tidak penting, pertimbangkan untuk menghapus semua gerakan—bahkan gerakan mikro—dari elemen yang Anda buat atau desain.

Misalkan Anda yakin bahwa gerakan elemen tersebut tidak penting tetapi dapat meningkatkan pengalaman pengguna secara keseluruhan, atau Anda tidak dapat menghapus gerakan tersebut karena alasan lain. Dalam hal ini, Anda harus mengikuti panduan WCAG's tentang gerakan. Panduan tersebut menyatakan bahwa Anda harus membuat opsi bagi pengguna untuk menjeda, menghentikan, atau menyembunyikan gerakan untuk: elemen bergerak, berkedip, atau di-scroll yang tidak penting yang dimulai secara otomatis, berlangsung lebih dari lima detik, dan merupakan bagian dari elemen halaman lainnya.

Menjeda, menghentikan, atau menyembunyikan gerakan

Tambahkan mekanisme jeda, berhenti, atau sembunyikan ke halaman Anda untuk memungkinkan pengguna menonaktifkan animasi gerakan yang berpotensi bermasalah. Anda dapat melakukannya di tingkat layar atau tingkat elemen.

Misalnya, produk digital Anda menyertakan banyak animasi. Pertimbangkan untuk menambahkan tombol JavaScript yang dapat diakses untuk memungkinkan pengguna mengontrol pengalaman mereka. Saat tombol dialihkan ke "gerakan nonaktif", semua animasi akan dibekukan di layar tersebut dan semua layar lainnya.

Menggunakan kueri media

Selain selektif dalam memilih animasi, memberi pengguna opsi untuk menjeda, menghentikan, menyembunyikan gerakan, dan menghindari loop animasi tanpa batas, Anda juga dapat mempertimbangkan untuk menambahkan kueri media yang berfokus pada gerakan. Hal ini memberi pengguna lebih banyak pilihan terkait apa yang ditampilkan di layar.

@prefers-reduced-motion

Mirip dengan kueri media yang berfokus pada warna di modul warna, @prefers-reduced-motion kueri media memeriksa setelan OS pengguna yang terkait dengan animasi.

Pengguna dapat menetapkan preferensi tampilan untuk mengurangi gerakan. Setelan ini berbeda di seluruh sistem operasi, dan dapat dibingkai secara positif atau negatif. Dengan @prefers-reduced-motion, Anda dapat mendesain situs yang menghormati preferensi ini.

Di macOS dan Android, pengguna mengaktifkan setelan untuk mengurangi gerakan. Di macOS, pengguna dapat menetapkan Reduce motion di Settings > Accessibility > Display. Setelan Android adalah Remove animations. Di Windows, setelan ini dibingkai secara positif sebagai Show animations, yang diaktifkan secara default. Pengguna harus menonaktifkan setelan ini untuk mengurangi gerakan.

Untuk memastikan aksesibilitas bagi individu yang mengalami kesulitan dengan gerakan, bahkan animasi yang lebih pendek dari batas 5 detik yang diuraikan dalam panduan WCAG 2.0 AA harus didekati dengan hati-hati, dan metode yang paling andal adalah memberdayakan pengguna yang telah menunjukkan preferensi untuk mengurangi gerakan dengan memberi mereka kontrol eksklusif atas animasi, yang memungkinkan mereka memulai dan menghentikan animasi menggunakan kontrol khusus, seperti tombol putar dan tombol jeda.

Peningkatan progresif untuk gerakan

Sebagai desainer dan developer, kita memiliki banyak pilihan untuk dibuat, termasuk status gerakan default dan seberapa banyak gerakan yang akan ditampilkan. Lihat lagi contoh terakhir tentang gerakan.

Misalkan kita memutuskan bahwa animasi tidak diperlukan untuk memahami konten di layar. Dalam hal ini, kita dapat memilih untuk menetapkan status default ke animasi gerakan yang dikurangi, bukan versi gerakan penuh. Kecuali jika pengguna secara khusus meminta animasi, animasi akan dinonaktifkan.

Kita tidak dapat memprediksi tingkat gerakan yang akan menyebabkan masalah bagi penderita kejang, vestibular, dan gangguan visual lainnya. Bahkan gerakan kecil di layar dapat memicu pusing, penglihatan kabur, atau lebih buruk lagi. Jadi, dalam contoh berikut, kita menetapkan default ke tanpa animasi.

Kueri media berlapis

Anda dapat menggunakan beberapa kueri media untuk memberi pengguna lebih banyak pilihan. Anda dapat menggunakan @prefers-color-scheme, @prefers-contrast, dan @prefers-reduced-motion secara bersamaan.

Mengizinkan pengguna memilih

Meskipun membuat animasi ke dalam produk digital kita untuk menyenangkan pengguna bisa menyenangkan, kita harus ingat bahwa beberapa orang akan terpengaruh oleh desain ini. Sensitivitas gerakan dapat memengaruhi siapa saja, mulai dari merasa sedikit tidak nyaman hingga menyebabkan penyakit atau kejang yang melemahkan.

Anda dapat menggunakan sejumlah alat yang berbeda untuk memungkinkan pengguna memutuskan apa yang terbaik bagi mereka, daripada menebak berapa banyak gerakan yang terlalu banyak. Misalnya, tambahkan tombol untuk mengaktifkan atau menonaktifkan animasi dalam situs atau aplikasi web Anda. Pertimbangkan untuk menetapkan tombol tersebut ke nonaktif secara default.