Animasyon ne zaman işe yarar, ne zaman yorar?
Bir blog kapağı hafifçe yükseliyor, menü kayarak geliyor, arka plan da sürekli hareket ediyor. Ayrı ayrı bakıldığında hoş görünen bu efektler aynı sayfada yarışmaya başlayabilir. Bir hareket eklemeden önce şu soruyu sor: Okurun neyi anlamasına yardım ediyor?
Hareketli arayüzleri seviyorum; ama benim için animasyonun bir işi olmalı. Kartın açıldığını, seçimin değiştiğini veya işlemin tamamlandığını anlatıyorsa anlamlıdır. Okurun her satırda beklemesini istiyorsa görsel gösteriye dönüşür. Ben canlı bir blog tasarlarken hareketi özellikle geçişlerde ve etkileşim geri bildiriminde kullanmak isterim. Metnin kendisi ise sakin ve rahat okunabilir kalmalı.
1. Hareketin bir görevi olsun
Örneğin kategori değiştirildiğinde seçili düğmenin renginin değişmesi, yeni durumu anlatır. Bir yazı açıldığında içeriğin nerede başladığını görmek gerekir; uzun bir giriş gösterisi izlemek gerekmez. Bu blog için önerilebilecek yaklaşım, basma hissini düğmede tutup yazı alanını sakin bırakmaktır. Bu bir tasarım önerisidir, her ürün için ölçülmüş tek doğru değildir.
2. Hareketi kapatmak deneyimi eksiltmesin
W3C, etkileşimle başlayan zorunlu olmayan hareketlerin kapatılabilmesini WCAG 2.2'nin 2.3.3, AAA düzeyindeki ölçütünde ele alır. Hareket bazı kullanıcılarda dikkat dağınıklığı veya fiziksel rahatsızlık yaratabilir. W3C açıklaması, işlevin gereği olan hareket ile dekoratif hareketi ayırır.
Pratik bir örnek düşün: Kartın büyümesini kapattığında başlığı, özeti ve Keşfet düğmesi hâlâ görünür olmalı. Kullanıcı gerekli bilgiyi elde etmek için bir animasyonu beklemek zorunda kalmamalı. Hareketi azaltmak, tıklama durumunu veya hata mesajını saklamak anlamına gelmez.
3. Sistem tercihine kulak ver
prefers-reduced-motion medya sorgusu, kullanıcının azaltılmış hareket tercihini CSS'e taşır. Bu tercihte büyüme, kayma ve paralaks gibi zorunlu olmayan efektleri kaldırabilirsin. W3C'nin C39 tekniği, hem hareketi kapatan hem de yalnızca tercih uygunsa etkinleştiren yaklaşımı örnekler.
Kapaktaki “Hareketi azalt” paneli, bu fikri anlatmak için AI ile hazırlanmış bir arayüz tasviridir; bloga eklenmiş ayrı bir ayar ekranı değildir.
Küçük bir deneme yap
Sayfayı sistemde hareket azaltma açıkken ve kapalıyken kullan. Aynı yazıya ulaşabiliyor musun? Seçili filtreyi anlayabiliyor musun? Düğmeye bastığında yanıt hâlâ belirgin mi? İki deneyim de anlaşılırsa animasyon süsün ötesine geçer: isteyen için destek olur, istemeyen için engel olmaz.
Benim yaklaşımım
Bir keşfet kartını tasarlasam üzerine gelince küçük bir yükselme ve ok hareketi yeterli olabilir. Yazının içine girince sürekli sallanan görseller eklemezdim. Aynı akışı hareket azaltma tercihiyle de kontrol ederdim: animasyon olmayınca düğmenin durumu ve içerik sırası hâlâ anlaşılmalı. Benim için iyi hareket, kapatıldığında anlamı beraberinde götürmez.
