UI Tasarımında Fonksiyonel Animasyon Kullanmanın 4 Yolu
Sadece on yıl önce, genellikle pop-up'lar ve yanıp sönen reklamlar ile ilişkilendirilen, animasyonları kullanan kullanıcı arayüzleri önlendi, ancak bu durum değişti. Günümüzde etkileşim tasarımı ve animasyon detayları modern web sitelerinde ve modern uygulamalarda temel bir fark yaratıyor. Bu zihniyet değişimi, Zurb'nin açıklamasında açıkça ifade edilmektedir:
Artık sadece statik ekranlar tasarlamıyoruz. İçeriği görüntülemek için kullanıcının bu ekranlardan nasıl elde edildiğini tasarlıyoruz.
Daha iyi dijital ürünler tasarlıyorsak, uygulamanın ve web sitelerinin etkileşimli doğasını en baştan benimsemeliyiz.
Animasyon Neden Çalışıyor?
Hareket, doğası gereği, bir kullanıcı arayüzünde en yüksek seviyeye sahiptir. Ne metin kopyası ne de statik görüntüler hareketle rekabet edemez. Gözlerimiz hareketli nesnelerin dikkatini çekmek için bir araya getirilmiştir - neredeyse bir refleks. Bu fonksiyonel animasyon ile bundan faydalanabiliriz.
Fonksiyonel Animasyon Nedir?
İşlevsel animasyon, bu tasarımın işlevselliğinin bir parçası olarak kullanıcı arayüzüne yerleştirilmiş ince bir animasyondur. Çok net ve mantıklı bir amacı vardır:
- Bilişsel yükü azaltın
- Değişim körlüğünü önle
- Mekansal ilişkilerde daha iyi hatırlama kurmak
Kullanıcının ana odaklandığı insan merkezli tasarım yaklaşımında, kullanıcı arayüzünün sezgisel, duyarlı ve insani olması gerekir. Fonksiyonel animasyon, bu hedeflere ulaşmanıza yardımcı olur.
Fonksiyonel Animasyon UX Nasıl Geliştirir?
Bir uygulama veya site hakkındaki deneyimimiz ve izlenimimiz, etkileşimin temel bir rol oynamasıyla birlikte, bir dizi faktörle şekillenir. Doğru koşulları bulduğumuzda, tasarımımıza hareket eklemek anlamlı ve işlevsel olabilir. İyi düşünülmüş ve test edilmiş fonksiyonel animasyon, aşağıdakileri içeren birden fazla işlevi yerine getirme potansiyeline sahiptir:
1. Görsel Geri Bildirim
İyi etkileşim tasarımı geri bildirim sağlar. Geri bildirim, sistemin bir kullanıcının eylemini aldığını ve başarılı olup olmadığını etkileşimin sonucunu gösterdiğini kabul eder. Bu gruptaki animasyonların çok ince olması ve duyarlı bir şekilde tasarlanması gerekiyor.
Düğme Geri Bildirimi
Gerçek hayatta, düğmeler etkileşimimize yanıt verir ve işlerin nasıl yapılmasını bekleriz. Kullanıcı için öngörülebilir olması için dijital arayüz aynı şekilde davranmalıdır.
Kaynak: Jaron Pulver
Bir Eylemin Sonuçlarını Görselleştirin
İlke şovunu izleyerek, bir şeylerin yanlış gittiğini vurgulamak için animasyonlu geri bildirimleri kullanabilirsiniz. Örneğin, yanlış giriş kodu üzerinde görsel sallama animasyonu. “Hayır, tekrar dene” demek gibi kafanın çalkalanması gibi. Kullanıcı, animasyonu fark eder ve mevcut durumu anında anlar.
Bir kullanıcının gerçekleştirdiği eylemleri de güçlendirebilirsiniz. Aşağıdaki örnekte, kullanıcı “Gönder” i tıkladığında, uygulama başarı durumunu göstermeden önce kısaca bir spiker görünür. Onay işareti animasyonu, işlemin başarıyla tamamlandığı gibi kullanıcıyı hissettirir.
Resim kredisi: Colin Garven
2. Yumuşatma Durum Değişiklikleri
Tasarımda animasyon eklemek için diğer iyi yerler değişimin anlarıdır. Kullanıcı arabirimindeki, özellikle de ağdaki durum değişiklikleri genellikle onları takip etmeyi zorlaştırabilecek sert kesimleri içerir. Hiçbir şey ani bir değişiklikten daha doğal değil. Bir arayüzdeki ani değişiklikler kullanıcıların işlemesi için zordur. UI'ye bazı animasyonlar ekleyerek bu değişim anları yumuşatılmalıdır.
Bağlantı Kurmak
Animasyonlu geçişler, kullanıcı arayüzünün farklı durumları arasında aracı olarak hareket etmeli ve kullanıcıların ekran durumu değiştiğinde neler olup bittiğini anlamasına yardımcı olmalıdır. Kullanıcı sadece hareketi takip eder ve iki UI durumunun nasıl olduğunu anlar.
Resim kredileri: Anish Chandran
Küçük resim ve ayrıntı görünümlerini ilişkilendirmek için de iyi çalışır:
Kart, orijinal konumundan modaldaki bir konuma dönüşür ve bu, aynı öğenin, sadece daha fazla ayrıntıyla açık olmasını sağlar.
Resim kredileri: Charles Patterson
Değişikliklere Dikkat Çağrısı
Animasyon, yeni bir nesnenin nereden geldiğini veya gizli bir nesnenin nereye gittiğini ve tekrar bulunabileceğini görmesine yardımcı olabilir. İçeriğin yan tarafındaki çekmeceleri açmak gibi bilgileri gizleyen veya açığa çıkaran değişikliklere dikkat çekmek için kullanabiliriz. Aşağıdaki örnekte, hamburger simgesine tıkladığınızda ana gezinme yolun dışına kayıyor. Bu hareket, ana menünün kaybolmadığını bilmenizi sağlar.
Resim kredileri: Tamas Kojo
3. Sistem Durumunun Görünürlüğü
Jakob Nielsen'in 10 sezgisel kullanım özelliklerinden biri olarak, sistem durumunun görünürlüğü kullanıcı arayüz tasarımında en önemli ilkeler arasında yer almaktadır. Kullanıcılar için, mevcut bağlamlarını herhangi bir zamanda sistemde bilmek ve anlamak çok önemlidir.
İlerleme Göstergeleri
Veri yükleme ve indirme süreçleri, işlevsel bir animasyon için harika fırsatlar. Animasyonlu yükleme çubukları, eylemin ne kadar hızlı işleneceğine dair bir beklenti belirler. Animasyon, hata durumunda yardımcı olabilir. Veri indirme başarısızlığı gibi hoş olmayan bir bildirim bile hoş bir şekilde iletilmelidir.
Resim kredileri: xjw
Tazelemek için çek
Bir kullanıcının bekleme süresi, bir eylem başlattıkları anda başlar ve en kötü durum, sistemin aldığı herhangi bir belirtinin olmamasıdır. Yenileme eylemi için çekme anında tepki göstermelidir . İşlemin başlatıldığını belirtmek için kullanıcıdan gelen talebi aldıktan hemen sonra görsel geri bildirim vermek önemlidir. Animasyon bu konuda size yardımcı olacaktır.
Resim kredileri: Tony Babel
4. Açıklayıcı Animasyon
Bazen kullanıcılar, kullanıcı akışını anlamak veya belirli arayüz öğeleriyle nasıl etkileşimde bulunacaklarını anlamak için biraz daha fazla yardıma ihtiyaç duyar. Bu özellikle, kullanıcı için yeni veya alışılmadık özellikler veya etkileşimler içeren kullanıcı arayüzleri için geçerlidir.
Onboarding
Kullanıcı katılımı kusursuz bir UX gerektirir ve bir başlangıç akışındaki animasyonlar, kullanıcıların bir uygulama ile ilk kez nasıl etkileşime girecekleri üzerinde muazzam bir etkiye sahiptir. Animasyon, konuyu ne kadar karmaşık veya ne kadar kuru olursa olsun, eğlenceli bir şekilde, her şeyi iletmek için sınırsız özgürlük sağlar.
Resim kredileri: Anastasiia Andriichuk
Görsel İpuçları
Animasyon bazı yararlı görsel ipuçları sunabilir. Açıklayıcı canlandırma genellikle bir sayfa ilk kez açıldığında görülür ve animasyon, sayfanın belirli öğelerinin nasıl kullanılacağını gösterir. Bu tür bir animasyon, genellikle oyunun ilerleyişini bir oyuna doğru ilerlerken ortaya çıkaran, ilerici açıklamalarla çok iyi başa çıkabilen oyunlarda bulunabilir. Bu ipuçları sadece kullanıcı deneyimlerinde uygun noktaya ulaştığında tetiklenir.
Sonuç
Gelişmiş bir şekilde kullanıldığında animasyon güçlü bir araçtır.
En başından itibaren hareketi benimsemeli ve tasarımımızın doğal bir parçası olarak düşünmeliyiz, çünkü tasarım görsel sunumdan daha fazlasıdır. Steve Jobs'ın tasarım hakkında söylediği gibi: Bu sadece neye benzediği ve nasıl hissettiği değil. Tasarım nasıl çalışır.