Kullanıcı deneyimi tasarımında animasyon kullanımı

Benzer komutları ayırt etmekte kullanılan geçiş animasyonları, fonksiyonel animasyona iyi bir örnek olabilir. Bazı özel durumlarda animasyon olmadan kullanıcının gerçekleştirdiği bir eylemi anlatmak oldukça zordur. Örneğin bilgisayarınızdaki herhangi bir pencereyi kapatma ve simge durumuna küçültme eylemlerini ele alalım. Simge durumuna küçültme işleminde pencere küçük bir geçiş animasyonu ile küçülüp kaybolmaktadır. Küçülüp yerleştiği simgeye tekrar basıldığında eski haline geri dönmektedir. Eğer herhangi bir animasyon olmasaydı kapatma ve simge durumuna küçültme işlemleri arasındaki farkı ayırt etmek zaman alırdı.

Başka bir örnek ise, bir arayüz içinde bazı komutların aynı anda olamama durumunun animasyon ile gösterilmesidir. “Oynat” ve “Durdur” komutları aynı an içerisinde basılabilir durumda olamaz. Bunu göstermek için estetik bir geçiş kurgulanabilir.

Arayüz animasyonunda dikkat edilmesi gereken bilgi ve özellikler:

• Arayüzde kullanılan başarılı bir animasyon, doğal ve görünmez olmalıdır. Film yapımcılığında kullandığı ‘’Ninja Principle’’ bu durumu çok iyi açıklamaktadır. Eğer birisi orada olduğunuzu anlıyorsa yanlış yapmışsınız demektir. Buradan hareketle arayüz içinde animasyon ve geçişler akıcı, doğal ve göze batmayan biçimlerde olmalıdır. Diğer yandan, eğer doğal bir geçişi tüm arayüz sayfalarına aynı kalitede uygulamadığınızda kullanıcı sizin yokluğunuzu ya da eksik yapılmış bir animasyonu büyük ihtimalle fark edecektir. Kısacası kullanılan animasyon amacına hizmet etmeli, doğal olmalı ve tutarlı bir şekilde uygulanmalıdır.
• Animasyonlar, kullanıcıların bilişsel yükü düşünülerek kurgulanmalıdır. Miller’ın araştırmasına göre insanın çalışma belleği anlık 7 ± 2 öğe tutabilir (Miller’s Law, 1956). Bunun nedeni ise insan beyninin daha pratik ve verimli çalışabilme adına, bilişsel yükünü düşük tutma eğiliminde olmasıdır. Arayüz geçişlerinde gereğinden fazla öğenin farklı zamanlarda yer değiştirmesi veya yeni öğelerin yeni sayfa içerisindeki ortaya çıkış sırasının düzgün olmaması, kullanıcının bilişsel sisteminde çok fazla yükleme yapabilir veya düzensiz olmasından dolayı işlemler çıkmaza girebilir. Bu da deneyimi kopuk ve kafa karıştırıcı hale sokmaktadır.
• Değişim körlüğü animasyon kullanımda da göz önünde bulundurulmalıdır. Görsel bir öğenin gözlemciye sunulmasından kısa bir süre sonrasında, değişiklik yapılan farklı hali ile tekrar tanıtıldığında, gözlemcinin farkı ayırt edememesi durumunda oluşan şaşırtıcı algısal bir fenomendir. Yapılan beyin dalgası testlerine göre, gözlemcinin bilinçli olarak değişimi fark edemese de görsellerdeki değişikliklerin beyinde algılanması bu şaşkınlık durumuna neden olmaktadır. Arayüz için olabilecek örnek durumlarından bir tanesi, odak noktası dışında herhangi bir öğenin ani olarak, herhangi bir geçiş olmadan ortaya çıkmasının yada ortadan kaybolmasının değişim körlüğüne neden olması ve bundan dolayı deneyimin kesintiye uğramasıdır.

Animasyon tasarımı sürecinde yardımcı olabilecek ipuçları:

• Animasyon fonksiyonel olmalıdır. Nerede ve nasıl kullanılacağı, kullanıcılara faydalı olabilecek şekilde kurgulanmalıdır. Bir animasyon öğesinin yalnızca güzel gözükmesi yeterli değildir.

• Uzun animasyonlar kullanıcılara ilk karşılaştıklarında ilgi çekici ve eğlenceli gelebilir. Fakat aynı işlemin birçok kez yapılabileceğini mutlaka göz önünde bulundurun. Gereksiz yere kullanıcıları animasyon uğruna bekletmeyin. Ayrıca genel olarak animasyon süresi yaklaşık 300ms altında olmalıdır (min. 250ms – max. 500ms). Fakat kullanıcının bir kere karşılaşacağı durumlarda biraz esnek daha kararlar alınabilir.

• Gereksiz animasyondan kaçının. Aşırı kullanım en başarılı animasyonun bile bütün etkisini kaybettirebilir. Tutarlı ve amaca yönelik tasarım yapmaya çalışın. Eğer bir detay ya da eleman gereksiz ise kaldırmaktan çekinmeyin. Kullancı her zaman minimal bir gösterimi daha rahat kullanır ve kullanırken daha rahat hisseder.

• Doğrusal, lineer animasyondan kaçının. Süreden bağımsız olarak sabit hızla oluşturulan bir animasyon genellikle yavaş, mekanik ve sıkıcı görünmektedir. “Ease-In” ve “Ease-Out” fonksiyonlarını kullanmak, görsel öğeler hareketlendirildiğinde doğal görünen geçişleri yakalamak için önemlidir. Bu konuda Robert Penner’ın hazırladığı demoyu inceleyebilirsiniz.

Kısaca özetlemek gerekirse, animasyonlar modern arayüz tasarımlarında hayati önem taşır, çünkü iyi bir animasyon çok küçük sürelerde bir çok detayı hatta bütün bir hikayeyi anlatabilir. Bu yüzden tasarım projelerinizde animasyon için animasyonu değil, deneyim için animasyonu kurgulamayı amaçlayın.