UX tasarımında, uygulama animasyonları, sonsuz yaratıcı alanının yanı sıra tartışmalar için ana nesnelerden birini sunar. Bu yazımızda, olumlu kullanıcı deneyimi ve sorunsuz etkileşimler sağlamak için mobil uygulama tasarımında animasyonun nasıl kullanılacağını ele alacağız.
Her şey bir ara yüze entegre olduğundan, uygulama animasyonları dekordan ziyade işlevsel bir unsur olmalıdır. Hareket öğeleri, bir kullanıcı yolculuğunu planlamanın en başından itibaren düşünülmelidir. Animasyonları tasarlarken, uygulamanın kullanılabilirliği ve istenebilirliği üzerindeki etkilerini analiz etmeniz gerekir. Sonuçta gerçek bir olumlu etki göremiyorsanız, yaklaşımı yeniden gözden geçirmelisiniz. Etkileşim sürecindeki hareketin avantajları ve faydası açık olmalı ve olası negativitelerden daha ağır basmalıdır. Mobil kullanıcı ara yüzünü geliştirmek için iyi kontrol edilen en popüler türleri gözden geçirelim.
Sekme çubuğu etkileşimleri için Kalp Atışı Animasyon Konsepti
Geri Bildirim Animasyonu
Geri bildirim animasyonu, kullanıcıya belirli bir eylemin gerçekleştirildiğini veya başarısız olduğunu bildirir. Bu tür bir animasyon, temel işlemlerde bile kullanıcı ile uygulama arasındaki iletişim hattını korur. Özel bir şekilde, fiziksel dünyadaki gerçek nesnelerle etkileşimi taklit eder. Örneğin, gerçek bir düğmeye bastığınızda, bu eyleme harcanan gücü ve düğmenin direncini hissedersiniz. Bir mobil uygulamada bu mümkün değildir: ekrana dokunmanız yeterlidir ve bu tür fiziksel geri bildiriminiz yoktur. Bu nedenle, sensör ekranlarıyla etkileşime girerek, uygulamadan yanıt almak için titreşimleri ve görsel işaretleri ele alıyoruz. Ve bu, UI animasyonunun uygulamanızı kurtardığı zamandır. Animasyonlu düğmeler, anahtarlar, onay işaretleri veya çapraz işaretler, eylemin yapılması durumunda kullanıcıyı hızlı bir şekilde bilgilendirir.
Örneğin, Cinema Uygulamasının bilet satın alma etkileşimlerinin akışı. Gösterim ekranından koltuk seçimine geçiş, film afişinin animasyonu ile yapılır: ekran sinema salonunun resmine dönüşür. İstenilen koltuklara basıldığında, kullanıcı düğmelerin rengini nasıl değiştirdiğini görebilir ve sistemin verileri kabul ettiğini anlayabilir. Onay işaretinin animasyonu işlemin tamamlandığını gösterir:
Watering Tracking uygulamasının etkileşimlerinde başka bir örnek görülebilir: bitkiyi suladıktan sonra, bir kullanıcı düğmeye basar ve görüntüyü damlalardan gerekli eylemin yapıldığını işaretlemek için değiştirir:
Temel navigasyonda bile, mobil UI animasyonları yalnızca geri bildirim değil aynı zamanda eğlence de ekleyebilir. Genişletilebilir bir düğme kavramına bakalım: bir tutam hareketle, jöle gibi bir maddeyle fiziksel etkileşimi taklit ediyor:
Event App uygulaması konseptindeki geri bildirim animasyonuna örnekler. Kullanıcı katılımcıların fotoğraflarına dokunduğunda, merkezi daire genel sayıyı değiştirir:
İlerleme Animasyonu
Etkileşim süreci biraz daha uzunsa ve kullanıcılar beklemek zorundaysa, neler olup bittiğini ve ilerlemenin ne durumda olduğunu anlamayı tercih ederler. Bu animasyonlu etkileşimin en büyük avantajı, kullanıcılara güvence sağlamak, ürünü kullanma sürecinde onları bilinçli ve kendinden emin kılmaktır. Kendine güvenen bir kullanıcı, olumlu bir kullanıcı deneyimi anlamına gelir ve yüksek düzeyde kullanıcı tutma için iyi bir zemin sağlar. İlerleme çubuklarının, zaman çizelgelerinin ve diğer dinamik öğelerin animasyonu, bir taşla birkaç kuşu vurmak anlamına gelebilir.
Kullanıcıyı ilerleme düzeyi hakkında bilgilendirin.
Olası olumsuz bekleme deneyimini azaltan eğlenceli bir unsur sağlayın
Bu, özgün ve zarif bir şekilde tasarlanan, kullanıcıların başkalarıyla paylaşmak ve daha fazla kullanıcıyı eyleme geçirmek isteyecekleri viral bir özellik haline gelebilir.
Aşağıda bir zaman çizelgesi uygulaması görebilirsiniz: bekleme işlemi, gündüzden geceye geçişi içeren animasyonlu grafiklerle desteklenirken, düğme sayılardaki ilerlemeyi gösterir:
İşte başka bir örnek: Task Tracker uygulamasındaki görevlerin tamamlanmasını yansıtan bir pasta grafiğin akılda kalıcı ve göze hoş gelen animasyonu. Başka bir ekranda, kullanıcı deneyimini ilk saniyelerden itibaren olumlu hale getirmek için karşılama ekranı için özel animasyonlu bir çizim de bulunur:
00:07
Ve işte Challenge Uygulamasındaki istatistikler ekranındaki kullanıcı ilerleme grafikleriyle animasyonlu etkileşimler kümesi:
"Yükleniyor" Animasyonları
Bu, en çok kullanılan mobil animasyon türlerinden biri olabilir. Kullanıcıya yükleme işleminin etkin olduğunu bildirdiği için ilerleme animasyonunun bir alt türü olarak tanımlanabilir. Yükleyiciler, ön yükleyiciler, yenilemek için çekme animasyonları gibi farklı varyasyonları vardır.
İşte pull-to-refresh'in Slumber uygulamasındaki bir örneği: yeni bölümlerin sekmesini aşağı çekerek, bir kullanıcı bekliyor ve bir yükleme tekerleğinin hafif animasyonunu görüyor; bu, animasyonlu illüstrasyon beklenti zamanını daha az sıkıcı hale getirirken, kütüphane yenilemesinin devam ettiğini gösteriyor:
Ve işte finansal uygulama konsepti için özel tema grafikleriyle yenilemeye hazır bir animasyon:
İşte Fitness uygulamasında arama işlemi için animasyon yüklemenin başka bir örneği, bekleme işlemini net ve iyi görünümlü hale getiriyor:
Dikkat Çeken Animasyon
Bu tür bir animasyon, kullanıcılar uygulamanızla etkileşime girdiğinde UX kalitesini geliştiri.. Kullanıcının dikkatini çeken ve gerekli ayrıntılara yönlendiren hareketle genel görsel hiyerarşiyi destekler. Bu şekilde, tüm ekran düzenini tararken zaman kazandırır ve gezinmeyi daha net ve sezgisel hale getirir.
Tasty Burger uygulaması için bu etkileşim seti, fiyat değişikliği için bir animasyona sahiptir. Sürece hayat katar ve doğal kılar. Dahası, hareketle, kullanıcının gözünü anında bu şekilde temel bilgilere çeker ve neye bakacağına dair bir ipucu verir:
Geçiş Animasyonu
Geçişlerin animsyonu, etkileşim sürecinde ve bir ekrandan diğerine gelirken stil ve zarafet katar.
İşte Perfect Recipes uygulamasında bir dizi geçiş: burada kullanıcılar tarif tabanlarını hedeflerine ve diyet kısıtlamalarına göre özelleştiriyorlar. Hareketle desteklenen hedef kartları arasındaki geçiş, olumlu kullanıcı deneyimini destekliyor:
İşte güzel ve sorunsuz animasyonlu geçişlere sahip şık bir Carfinder uygulaması tasarımı:
Yine de, tüm bu işlemler sadece güzellikle ilgili değil. Mobil uygulamalar için kavramsal UI animasyonuna adanmış makalemizde, geçişlerin animasyonunun öğeler arasında daha fazla alan yanılsamasını nasıl ekleyebileceğine ve bu şekilde düzeni aşağıdaki örnekte olduğu gibi havadar ve hafif hale getirebileceğine dair örnekler gösterdik:
Kullanıcı pasta grafikten liste görünümü kaydına ve renk işaretleyicilerine geldiğinde finansal uygulama konseptindeki geçiş süreci için yaratıcı animasyona bir örnek daha aşağıda verilmiştir: animasyon, ekranlar ile veri görselleştirmesi arasındaki bağlantıyı birbiriyle yakından bağlantılı hale getirir ve kullanıcıların bu bağlantıyı görmesini sağlar:
Tanıtım Animasyonu
Markalaşmanın UI tasarımına akıllıca entegrasyonu, marka bilinirliğinin arttırılmasında büyük rol oynayabilir. Çoğu durumda, genellikle sıçrama (karşılama) ekranlarına etkili bir şekilde uygulanan logoların, maskotların ve benzerlerinin animasyonudur. Uygulamalardaki pazarlama animasyonu genellikle markanın görsel işaretlerine dikkat çekmeye odaklanır. İşte genç yetenekli insanların kendi kendini tanıtması için bir uygulama olan Whizzly için yaratılan animasyonlu logo. Animasyon akılda kalıcılık ve tasarımcıların canlı duygusal çekicilik katmasını sağlıyor:
İşte bir fırının web üzerinden tanıtımına eğlence ve dinamik katması için animasyonlu bir logonun başka bir örneği:
Animasyonlu Bildirimler
Bildirimler, kullanıcıların uygulamadaki güncellemelere dikkatini çeken işaretlerdir. Göze batmayan animasyonlarla desteklenen bildirimler daha da belirginleşir ve kullanıcıların önemli bilgileri kaçırmama şansı artar. Aşağıda, Home Budget uygulamasında böyle bir UI öğesinin örneğini görebilirsiniz: bildirim yalnızca parlak renkle değil, aynı zamanda titreşimi taklit eden hareketle de öne çıkar:
Kaydırma Animasyonu
Kaydırma, hem web hem de mobil arayüzlerde alıştığımız tipik etkileşimlerden biridir. Animasyon, sürece güzellik ve zarafet katar, şık, özgün ve uyumlu hale getirir. Kaydırmanın sadece dikey değil, aynı zamanda aşağıda gösterilen Fotoğraf Uygulamasında olduğu gibi yatay olarak da farklı yönlerde uygulanabileceğini unutmayın:
Güzel kaydırmanın başka bir örneği Gallery uygulamasında uygulanır:
Ve işte kaydırma, Quotes Uygulamasında animasyonlu bir arka planla nasıl ilgi çekici görünüyor:
Hikaye Anlatımı ve Oyunlaştırma
Mobil uygulamalar animasyon kullanmak için bir neden daha: animasyonlar bir hikaye ya da bir oyunun bir parçası gibi duruyor. Animasyonlu çıkartmalar, rozetler, ödüller, maskotlar - bunlar bir uygulama arayüzünü ilginç ve canlı hale getirmenin yalnızca birkaç yoludur. Örneğin, burada çeşitli duyguları yansıtan Mood Messenger için animasyonlu çıkartmalar görebilirsiniz: bunları kullanmak, kullanıcı deneyimine güçlü bir duygusal çekicilik katar:
UI Animasyonunun Yararları ve Tuzakları
Animasyonu bir mobil uygulamada uygulayan tasarımcılar, uygulama etkileşimleri üzerindeki hem olumlu hem de olumsuz etkilerini analiz etmelidir. Karar verme sürecinde size yardımcı olacak kısa bir kontrol listesi hazırladık.
Mobil uygulamalar için motion'ın avantajları arasında şunlardan bahsedebiliriz:
Kaydedilen ekran alanı
Artan kullanılabilirlik
Özgünlük
Rahat ve kolay etkileşim
Aynı anda birden fazla işlevi yerine getirme yeteneği
Etkileşim süreçlerini hızlandırmak
Kullanıcıya net geri bildirim sağlamak
Gerekli beklentilerin oluşturulması.
Öte yandan, tasarımcıların göz önünde bulundurması gereken dezavantajlar arasında:
Yükleme süresi
Dikkat dağıtma faktörü
Zaman ve çaba harcayan teknik gerçekleştirme.
留言