Disney'in 12 Animasyon Prensibi Arayüzde Nerede Tutar, Nerede Tutmaz
Arayüz animasyonu anlatılırken listenin başına hep Disney'in 12 prensibi konur. O liste 1930'ların karakter animasyonu için yazıldı; derdi çizilmiş bir figürü canlı göstermekti, bir butonun ne yaptığını anlatmak değil. Prensiplerin bir kısmı arayüze taşındığında gerçekten tutuyor, bir kısmı ise taşındığı anda süse dönüşüyor. Ayrımı yapmadan listeyi baştan sona uygulamak, kullanıcıyı bekleten bir arayüz kurmanın en kibar yolu.
Listeden arayüze sağ çıkanlar
Hareketin bir işi varsa prensip de tutuyor. Beklenti (anticipation) arayüzde bir ögenin tıklanabilir olduğunu tıklanmadan önce söyler: kartın imleç üzerine gelince bir iki piksel yükselmesi, orada bir şey olacağını haber verir.
Sahneleme (staging) ekranda aynı anda kaç şeyin kıpırdadığıyla ilgili. Bildirim kayarak girerken arkadaki liste de yeniden diziliyorsa göz nereye bakacağını seçemez. Aynı anda tek bir hareket, gerisi sabit.
Yavaş başlangıç ve bitiş, yani easing, listedeki en doğrudan aktarım. Lineer geçiş mekanik görünür, çünkü fiziksel dünyada hiçbir şey sabit hızla başlayıp sabit hızla durmaz. Menü açılırken hızlı başlayıp sonuna doğru yavaşlayan bir eğri neredeyse her zaman doğru seçim, kaybolan ögelerde tersi.
Ardışıklık (follow through ve overlapping action) pratikte liste ögelerini birkaç on milisaniye arayla göstermek demek. Ama hesabı yapmak gerekiyor: alt alta yirmi satırı 30 ms arayla dizersen son satır altı yüz milisaniye sonra gelir, yani kullanıcı hazır veriyi bekler. Gecikmeyi ilk beş ögeden sonra kesmek bu sorunu bitiriyor.
Taşındığı anda süse dönüşenler
Ezilme ve gerilme (squash and stretch) hep buton örneğiyle anlatılır. Lastik topun yere çarpınca yassılması mantıklı; butonun tıklanınca yamulması, arayüzün fizik kurallarına sahip olduğunu iddia eder, sonra o iddiayı ikinci ekranda tutamazsın. Basıldığını göstermenin yolu ölçek oyunu değil, gecikmesiz gelen bir durum değişikliği.
Abartı (exaggeration) ve cazibe (appeal) karakter tasarımının kavramları. Bir çizgi film kahramanını sevimli yapan şeyle, kullanıcının günde kırk kez açtığı filtre panelini kullanışlı yapan şey aynı değil. Günde kırk kez izlenen animasyon ilk günden sonra sadece gecikmedir.
Form gönderildikten sonra patlayan konfeti de aynı gruba giriyor. İlk seferde hoş, üçüncü seferde kullanıcının kapatma düğmesini aradığı şey.
Süre bir maliyet kalemi
Animasyon tartışmalarında atlanan taraf bu. Her geçiş, kullanıcıyla işini bitirmesi arasına eklenen beklemedir. Altı adımlık bir kayıt akışında her adım arasına 300 ms'lik geçiş koyarsan, tek satır hesap yapılmadan 1,8 saniye eklemiş olursun. Sunucu tarafında bu kadar gecikmeyi günlerce kovalarsın; arayüzde aynı süre tasarım kararı diye durur.
Küçük geçişleri 150-250 ms bandında tut, sayfa seviyesindeki büyük geçişlerde 300 ms'nin üstüne çıkma. Bunların hepsi CSS transition ile yazılır, bir animasyon kütüphanesi kurup pakete onlarca kilobayt eklemeye gerek yok. Web Animations API'ye ancak animasyonu çalışırken durdurup koşula göre değiştirmen gerektiğinde geç.
Hareketi kapatabilmek
Vestibüler duyarlılığı olan kullanıcılarda geniş ölçekli hareket baş dönmesi ve bulantı yapabiliyor; işletim sistemleri bu yüzden hareket azaltma tercihini uzun süredir taşıyor. Tarayıcı tarafındaki karşılığı prefers-reduced-motion medya sorgusu.
Animasyonu tamamen sıfırlamak şart değil. Ölçek ve konum değişimlerini kaldırıp yerine kısa bir opaklık geçişi bırakmak çoğu arayüzde yetiyor, üstelik durum değişikliği de görünür kalıyor.
Prensip listesi bir kontrol listesi değil, referans. Arayüzde bir animasyonun kalmasının tek gerekçesi, kullanıcının o an ne olduğunu anlamasına yardım etmesi. Yardım etmiyorsa güzel olması durumu kurtarmıyor.