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

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:

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.

Hemen planlayalım