Animasyon, kullanıcı deneyiminin önemli bir parçası. Kullanıcıya o an gerçekleşen bir aksiyon hakkında görsel bir ipucu verebilir, bazen de beklenmedik bir lezzet katabilir. Fakat animasyonları amacını aşan şekilde kullanmak, dolayısıyla kullanıcının aklını karıştırmak ya da bunaltmak da bir o kadar kolaydır.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
İşte bir örnek: Metin, illüstrasyon ve butondan oluşan harika bir manşet (hero) alanını anime etmek istiyoruz. Yapabileceğimiz en kötü şey, aynı anda çok sayıda öğeyi hareketlendirmek, dolayısıyla kullanıcının dikkatini tamamen dağıtmak olur. Aynı anda çok fazla şey olup bittiğinde, insanlar bir sonraki aksiyonlarının ne olacağına karar veremeyecekler ve muhtemelen başka bir siteye gideceklerdir.
Her animasyonu bir öykü olarak düşün — kolayca tüketilebilmeli ve kullanıcının, öğeleri senin istediğin sırada görmesini mümkün kılmalı. Önerimiz, her seferinde yalnız bir öğeyi anime etmek ve her bir animasyonun arasında yarım ya da bir saniye boşluklar bırakmak.
InVision takımından Anton Aheichanka‘nın Craft için tasarladığı bu şahane örnekte, her elementin “animasyonun tadını kaçırmadan” nasıl hareketlendirilebildiğini görebiliyoruz.
Hiç bir amacı olmayan rastgele bir animasyon mu? Kesinlikle HAYIR.
Öne çıkarmak ya da tanıtmak istediğiniz ürün ya da hizmetin farkında ol. Ne yazık ki, tasarımcılar olarak ortaya çıkarmaya meyilli olduğumuz o “harika illüstrasyonlar” genellikle müşterinin öne çıkarmak istediği şeyler olmayabiliyor —sadece güzel gözüküyorlar, hepsi o. Dolayısıyla, bir animasyon tasarlarken kendine müşterinin iş hedefini aklınızda tutup tutmadığını sor. Kendine sorabileceğin diğer önemli şey ise şu: Bu animasyonu tasarlarken kullanıcıya sunabileceğin en iyi faydaya odaklanıyor musun?
Sergey Valiukh tarafından tasarlanan bu eğlenceli animasyonun bir amacı var: Gündüz ve gece arasındaki geçişi ifade etmek. Statik grafikler de aynı işi görebilirdi elbette ama bu kadar dinamik olmazdı.
Animasyonların kısa ve amacına uygun olmasına özen göster. Bir kullanıcının en az isteyeceği şey, bir butonun tıklanabilir hale gelmesi için animasyonun bitmesini beklemesidir.
Aşağıdaki örnek, hem hızlı hem de amacına uygun bir buton animasyonunu gösteriyor.
A noktasından B noktasına ivmesiz hareketler mekanik ve lezzetsizdir. Animasyonlara ivmeler eklemeyi dene. Tasarladığın animasyonlarda, yer çekimi gibi gerçek dünyadan örnekleri kullanmayı değerlendirebilirsin.
Remix Jobs, animasyonları ilgi çekici hale getirmeyi aşırıya kaçmadan yapmayı başarıyor: Material Design metodolojisi kullanılarak yapılmış güzel ve yumuşak geçişler buna güzel bir örnek.
Eskizler ya da “wireframe”ler tasarlarken, öğelerin animasyonlarının nasıl olacağına kafa yormakta fayda var. Anlamlı animasyonlar yapabilmek için, daha projenin başlangıcında animasyonların kullanıcı deneyimine nasıl fayda sağlayabileceğini düşünmeye mutlaka zaman ayır.
Tasarım gibi, animasyon da öznel ve kişisel olabilir. Önemli olan, tasarladığımız animasyonlarla etkileşime geçecek kullanıcıları dikkate almak, her bir öğeyi dikkatlice ele almak ve böylece kullanıcı deneyiminin tümüne katkı sağlayabilmesini mümkün kılmak.
