top of page

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon Nasıl Kullanılır?

Güncelleme tarihi: 24 Oca 2022

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:



Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon


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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon


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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon



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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon



İş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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon


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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon

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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon



İş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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon


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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon

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:


Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon



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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon

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:

Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon



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:


Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon

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.


Mobil Kullanıcı Deneyimini Geliştirmek İçin Animasyon

Konuyla Alakalı Çalışmalarımıza Örnek Video



23 görüntüleme0 yorum

Son Yazılar

Hepsini Gör

Σχόλια


bottom of page