Animasyon ve hareket

Hiç araba, tekne veya uçağa bindiğinizde aniden dünyayı hissettiğiniz oldu mu? döner mi? Migren rahatsızlığınız o kadar kötüyse ki telefon veya tabletinizdeki animasyonlar “mutlu etmek” amacıyla oluşturuldu aniden midemi bulendirdin? Belki de her zaman her tür harekete duyarlı mı? Bunlar farklı proje yönetimi metodolojilerine vestibüler hastalıkları.

40 yaşına kadar yetişkinlerin% 35'inden fazlası şu belirtileri yaşamış olacaktır: vestibüler işlev bozukluğu. Bu da geçici baş dönmesine, migrene bağlı baş dönmesine veya daha fazla belirtiye neden olabilir kalıcı vestibüler engellilik.

Birçok kişi baş dönmesini tetiklemenin ötesinde hareket ediyor, yanıp sönüyor veya kaydırılıyor. dikkat dağıtan içeriklerdir. Şuna sahip kullanıcılar: DEHB dikkat eksikliği ve diğer dikkat eksikliği bozukluklarının dikkatini dağıtan animasyonlar bile neden web sitenize veya uygulamanıza gittiklerini unutmadıklarını ilk sırada.

Bu modülde, çalışanlarınızı daha iyi desteklemenize yardımcı olmanın hareketin tetiklediği her tür bozuklukla başa çıkmanıza yardımcı olur.

Yanıp sönen ve hareketli içerik

Animasyon ve hareket oluştururken, öğenin aşırı hareket edip etmediğini kendinize sormalısınız. Örneğin, ekranda koyu renklerle parlayıp sönen renkler veya ekranda hızlı hareketler, ışığa duyarlı epilepsisi olan kişilerde nöbetlere neden olabilir. Epilepsi hastalarının% 3'ünün ışığa duyarlılıktan muzdarip olduğu tahmin edilmekte, kadınlar ve gençler arasında daha yaygın olarak görülmektedir.

WCAG'nin yanıp sönmeyle ilgili kuralları şunları önermektedir:

• Herhangi bir saniyede üç kereden fazla yanıp sönüyor
• Şu değerin altında yanıp söner: genel yanıp sönme ve kırmızı yanıp sönme eşiği.

Bu yanıp sönmeler, en iyi ihtimalle bir web sayfasını kullanamamanıza veya en kötüsü, hastalıklara neden olabilir.

Ekstrem hareketlerde, algoritmik düğmeyi kullanarak Işığa Duyarlı Epilepsi Analiz Aracı (PEAT). PEAT, ekrandaki içeriklerin, videoların veya animasyonların tespit edilmesini sağlayan ücretsiz bir araçtır. nöbetlere yol açabilir. Tüm içeriklerin PEAT tarafından değerlendirilmesi gerekmez. ancak ışık ve karanlık arasında yanıp sönen veya hızlı geçişler barındıran içerikler ne olursa olsun, arka plan renklerinin değerlendirilmesi gerekir.

Animasyon ve hareketle ilgili kendinize sormanız gereken bir başka soru da öğenin hareketinin ekrandaki içeriği veya işlemleri anlamak için gerekli olup olmadığıdır. Bu gerekli değilse, inşa ettiğiniz veya tasarladığınız öğedeki tüm hareketleri, hatta mikro hareketleri de kaldırabilirsiniz.

Elementin hareketinin gerekli olmadığını, ancak aynı zamanda veya başka bir kullanıcının hareketini kaldıramazsınız bir neden sunmalısınız. Bu durumda WCAG’in harekete ilişkin kurallar da var. Yönergelerde, kullanıcıların uygulamayı duraklatması, durdurması veya hareketi gizle: gereksiz hareket eden, yanıp sönen veya kayan öğeler için otomatik olarak başlatılan, beş saniyeden uzun süren ve başka bir sayfanın parçası olan öğeler.

Hareketi duraklatma, durdurma veya gizleme

Duraklatma, durdurma veya gizleme ekleme kullanıcıların sorunlu olabilecek reklamları kapatmasına olanak hareketli animasyon. Bunu ekran veya öğe düzeyinde yapabilirsiniz.

Örneğin, dijital ürününüzün çok fazla animasyon içerdiğini varsayalım. Erişilebilir bir JavaScript açma/kapatma düğmesi eklemeyi düşünün Kullanıcıların deneyimlerini kontrol etmesini sağlamak için. Düğme "harekete geçme", tüm animasyonlar o ekranda ve diğer tüm animasyonlar dondurulur.

Medya sorgularını kullanma

Animasyonlarınız konusunda seçici olmanın yanı sıra, kullanıcılarınıza seçenekler hareketi duraklatmak ve sonsuz animasyon döngülerinden kaçınmak için hareket odaklı bir medya sorgusu da ekleyebilirsiniz. Bu da kullanıcılarınıza konusunda daha fazla seçeneğe sahip olur.

@prefers-reduced-motion

Renk modülündeki renk odaklı medya sorgularına benzer şekilde, @prefers-reduced-motion medya sorgusu, kullanıcının animasyonla ilgili işletim sistemi ayarlarını kontrol eder.

Kullanıcı, hareketi azaltmak için görüntü tercihleri ayarlayabilir. Bu ayarlar ve olumlu ya da olumsuz çerçevelenmiş olabilir. @prefers-reduced-motion ile site tasarlayabilirsiniz oluşturabilirsiniz.

MacOS ve Android'de kullanıcı, hareketi azaltmak için bu ayarı etkinleştirir. MacOS'te Kullanıcı Hareketi azalt için Ayarlar > Erişilebilirlik > Görüntülü Reklam Ağı. Android'in ayarı Animasyonları kaldır'dır. Windows'da bu ayar çerçeve içine alınır varsayılan olarak açık olan Animasyonları göster değerine ayarlayın. Kullanıcının hareketi azaltmak için bu ayarı kapatın.

Alternatif olarak, sonraki örnekler grubunda gösterildiği gibi, tüm animasyonlarınızı sonsuz döngüde oynamak yerine, beş saniye veya daha kısa sürede hareket etmeyi durduracak şekilde kodlayabilirsiniz.

Hareket için progresif geliştirme

Tasarımcılar ve geliştiriciler olarak, varsayılan hareket durumları ve ne kadar hareketin gösterileceği gibi birçok seçeneğimiz var. Hareketle ilgili son örneği tekrar inceleyelim.

Animasyonun, ekrandaki içeriği anlamak için gereksiz olduğuna karar verdiğimizi varsayalım. Bu durumda, varsayılan durumu tam hareketli sürüm yerine azaltılmış hareketli animasyona ayarlamayı seçebiliriz. Kullanıcılar özellikle animasyon istemediği sürece animasyonlar devre dışı bırakılır.

Hangi hareket düzeyinin belirli özellikleri olan insanlar için sorun yaratacağını nöbet, vestibüler ve diğer görsel bozukluklar. Çok az hareket bile baş dönmesi, bulanık görüş gibi durumları tetikleyebilir. Bu nedenle varsayılan olarak animasyon kullanmamayı tercih ederiz.

Katmanlı medya sorguları

Kullanıcılarınıza daha da fazla seçenek sunmak için birden fazla medya sorgusu kullanabilirsiniz. Hadi @prefers-color-scheme, @prefers-contrast ve @prefers-reduced-motion kullanın bir araya getirmek.

Kullanıcılarınızın seçmelerine izin verin

Kullanıcıları mutlu edecek dijital ürünlerimize animasyon eklemek eğlenceli olabilir. bazı kişilerin bu tasarımlardan etkileneceğini unutmamak çok önemlidir. Hareket hassasiyeti, hafif rahatsızlıktan neden olabilir. zayıflatıcı bir hastalık veya nöbet olabilir.

Kullanıcının en iyi seçeneğin hangisi olduğuna karar vermesine olanak tanımak için bir dizi farklı araç kullanabilirsiniz. fazla hareket olduğunu tahmin etmek yerine bu kitleler için optimize edebilirsiniz. Örneğin, bir açma/kapatma düğmesini kullanarak sitenizdeki veya web uygulamanızdaki animasyonu açın veya kapatın. Dikkatlice bu düğmeyi varsayılan olarak kapalı duruma getirir.

Öğrendiklerinizi sınayın

Hareket ve animasyon erişilebilirliği hakkındaki bilginizi test edin.