Hareket, bilgidir
Bir web sitesindeki her animasyon, ziyaretçinin sorduğunu bile fark etmediği bir soruyu yanıtlar. Bu panel nereden geldi? Ne değişti? Şimdi nereye bakmalıyım? Hareket bu soruları yanıtladığında arayüz zahmetsiz hissettirir. Yanıtlamadığında ise, teknik olarak her şey doğru çalışsa bile, bozuk hissettirir.
Animasyonlu sitelerin çoğunun temel yanılgısı tam da burada: hareket, işin sonunda "premium hissettirsin" diye eklenen bir süs muamelesi görüyor. Oysa süs satmaz. Bilgi satar.
Rakamlar ne söylüyor?
Son iki yılda yayına aldığımız e-ticaret ve portfolyo projelerinde tutarlı bir örüntü var:
- Kademeli hareketle açılan ürün vitrinleri, statik ızgaralara kıyasla tıklanma oranında %20-35 daha iyi performans gösteriyor.
- Kaydırmaya bağlı hikâye sayfaları, statik öncüllerine göre ortalama oturum süresini iki kattan fazla artırıyor.
- Formlardaki mikro etkileşimler (kendini onaylayan bir alan, basıldığını hissettiren bir buton) terk oranını tam da eklendikleri adımda ölçülebilir biçimde düşürüyor.
Bunların hiçbiri hareketin güzel olmasından kaynaklanmıyor. Hareketin dikkati yönlendirmesinden, eylemleri onaylamasından ve ürünün size yanıt verdiği hissini kurmasından kaynaklanıyor.
Disiplin: üç kural
- Her animasyonun bir görevi olmalı. Giriş, vurgu, geri bildirim ya da geçiş. Görevini adlandıramıyorsanız animasyonu silin.
- Hız bir özelliktir. Arayüz hareketi 150-400 milisaniye aralığında yaşar. Daha uzunu tiyatrodur; onu tiyatroyu hak eden anlara saklayın.
- Ziyaretçiye saygı duyun.
prefers-reduced-motiontercihine uyun, okumayı asla animasyonla engellemeyin ve kimseyi harekete geçmek için bir animasyonun bitmesini beklemek zorunda bırakmayın.
En çok nerede karşılık verir?
Harekete yatırımın en yüksek getiriyi sağladığı yerler karar anlarıdır: ilk kaydırmayı kazanan hero bölümü, tıklamayı kazanan ürün kartı, basılmayı kazanan ödeme butonu. O anlardaki hareket süs değildir; satışı kapatan eldir.
Hareket tasarımı bu yüzden satar. Göz kamaştırdığı için değil; metinden hızlı, her türlü rozetten ve banner'dan daha inandırıcı biçimde iletişim kurduğu için.