Hareketler ve Animasyonlar, Mobil Uygulama Tasarımları Açısından Oyunları Nasıl Değiştiriyor?
Bu makalede, UXPin – The UX Design App’den Chris Bank, interaktifliğin
mobil uygulamalardaki önemini ve bunun mobil tasarımlar üzerindeki
etkisini ele alacak. Bu konunun 50 yeni mobil uygulamanın tek tek
incelenerek ele alınmış halini Mobile UI Design Patterns 2014 adlı
ücretsiz e-kitap’ta bulabilirsiniz.
Birçok yeni kullanıcı ara yüzü tasarımının arkasında, hareketlerde ve animasyonlarda gerçekleşen değişimler yatmaktadır.
Mobil oyunların yeni çağının ve yeni pazarlama kampanyaları başlatan ünlü internet sitelerinin arkasına şöyle bir göz attığımızda, mobil uygulama
tasarımcılarının ve geliştiricilerinin interaktifliğin önemini oldukça
iyi kavradığını görebiliyoruz. Bugün, her bir sektördeki uygulama,
kullanıcıların eylemlerine, yönlendirmelerine ve sosyalleşmelerine izin
veren bir interaktiflik seviyesi ile birlikte piyasaya çıkıyor. Ayrıca
bu uygulamaların hepsi yeni aygıtlarla tam uyum içinde çalışmak ve daha
önce bu zamana kadar hiç piyasaya sürülmemiş mobil içeriği sunmak
odaklı yazılıyor.
Mobile Design Patterns: A Practical Look kitabında, mobil tasarım
katmanları üzerinde nasıl kafa yorulacağını gösterdim ve uzun süreden
beri kullanılan desenlerin yerine yep yeni tasarım elementlerini
yerleştirme konusunu derinlemesine ele aldım. Kendi düşüncemi
desteklemek için, Uber, Pinterest, Tinder, OKCupid, Spotify, Instagram,
Dropbox, Secret, Flipboard, Snapchat, Mailbox ve bir çok popular
uygulamanın tasarım elementlerini ortadan kaldırdım. Bazı kullanıcı
arayüz bileşenlerine Web Design Trends, Mobile Design Trends ve The Guide to Wireframing adlı kitaplarımda yer verdim.
Mobil Uygulama Hareketleri

Tıklayarak, aşağı yukarı kaydırarak ve klavye kısa yollarını kullanarak
internetle haşır neşir olduğumuz günleri hatırlayın. Günümüzde bu
hareketler çok da popüler olmasa da, bu hareketler internetteki
kullanıcı tecrübesini net bir şekilde ortaya koymaktadır.
Diğer bir yandan Mobil uygulama tasarımı yeni tasarım
elementleri ve bunların yeni yerleştirme teknikleri ile adeta patlama
yaşadı. Yazılımda ve donanımda yapılan yeniliklerle bu hareketleri
geliştirme mümkün kılınarak, mobil dünya, insan-bilgisayar
etkileşiminde inanılmaz bir seviye yakaladı. Bu çözümler, yeni
hareketlerle oldukça güçlü bir noktaya geldi. Ayrıca, tasarımdaki
duyarlı geliştirmelerle internet ve mobil tasarım, tüm boyutlarda
ve şekillerde cihazlara uyum sağlayacak şekilde gelişti. Tüm bu
geliştirmeler, internet tecrübesini dramatik ve canlandırıcı şekilde
etkileyecektir.
Andorid sisteminin mevcut hareketlerine göz attığımız zaman, herhangi
bir insanın takvim, mesajlar ya da resim galerisi gibi basit
elementlerle nasıl etkileşime geçtiği konusunda az çok bilgi sahibi
olabilirsiniz.

Android Hareketleri

Android Tıklama Hareketleri
Eğer Apple’ın kullanıdığı hareketlere şöyle bir göz atarsak,
tasarlayacağınız uygulama harekelerine şimşek hızıyla çözümler
üretebileceksiniz. Aşağıdaki hareket örnekleri 2010 yılına ait olmasına
rağmen, bu hareketlerin bir çoğu henüz kullanılmadı ve Apple’in hareket
elementleri hala bu örneklerden uzak. Bu örnekleri, hareketlerin
geleceğine bir bakış olarak düşünebilirsiniz.

Apple Hareketleri
Android, iOS ve diğer mobil platformlar, uygulama içinde
yönlendirme gibi özel bir amaca hizmet etmek için yerleştirilebilecek
hareketlerin çeşitliliğini artırmaya devam edecektir. Bu durum ekranı
ekstra butonlardan kurtarmaya yardım etmekle kalmıyor aynı zamanda
kullanıcılar için eğlenceli bir eylem haline geliyor. Bir çok
animasyonlardan bir kombin oluşturarak, mobil uygulamalarınız için
yepyeni bir kullanıcı ara yüzü tasarımı oluşturabilirsiniz.
Animasyonlar

Hareketleri mobil platformda kullanmanın en iyi yönü, gerçek nesneler
gibi duyarlı bir his vermeleridir. Animasyonlar, kullanıcıları ara
yüzde tutma konusunda çok önemli rol oynarlar.
Animasyonların elle tutulurluklarının yanı sıra, kullanıcıları doğallık
konusunda mutlu etme gibi özellikleri de bulunmaktadır. Zamanlama,
sürat, canlılık, resim ve renk geçişleri, kaydırma ve diğer bir çok
seçenek, tasarımcıların kullanıcıya sınırsız eğence sunmasına ve
sürpriz yapmasına olanak sağlıyor.
Hareketlerle birlikte kullanılan animasyonlar sadece kullanıcı
tecrübesine eğlence katmakla kalmıyor, aynı zamanda kullanıcının görsel
geri bildirim ve efor sarf etmesini ortadan kaldırıyor. Bu konuya,
makalemizde yüzeysel olarak değiniyoruz fakat bu konuyu blogumuzda ve
tasarım kütüphanemizde derinlemesine ele alacağız.

Snapchat Uygulama Animasyonları
Eğer bu geçişleri süssüz sade bir şekilde görmek istiyorsanız, Dan Silver’in ilham kaynaklarına göz atabilirsiniz.

Dan Silver Animasyonları
İnteraktifliğin En Büyük Örneği

Zamanımızın en büyük interaktif e-ticaret şirketlerinden birisi
olan Pinterest, “Keşfedilebilir Kontroller” özelliğinin entegrasyonu
ile tekrar zirveye oynuyor. Aşağıda bu tasarım elementinin çözüme
kavuşturduğu sonucu ve bu çözümün animasyonları ve hareketleri nasıl
güzelce kullandığını açıkladım.

Pinterest Uygulama Özellikleri
Kullanıcının Problemi

Kullanıcı, kendi tecrübesini bölmeden içerikle etkileşime geçmek istemektedir.
Pinterest’in Çözümü

Pinterest, tipik e-ticaret sitelerindeki ekstra bilgi ve butonları
ortadan kaldırmaktadır. Bu sayede kullanıcı, içeriği görüntülemeye
bağlı gruplama, sürükleme, kaydırma, dokunma gibi site için ne önemli
ise onu gerçekliştirmektedir.
Beklendiği gibi kullanıcılar resim üzerine dokunduğunda, resim hakkında
daha fazla bilgiye ulaşabilmektedirler. Bu aşamada kullanıcılara resmi
pinleme, gönderme ya da düzenleme gibi internet sitesinde
yapabileceğiniz eylemler sunulmaktadır. Bu eylemler harici bir eylemi
gerçekleştirebileceğinizi işaret eden bir şey bulunmamaktadır. Fakat
resim üzerinde basılı tutulduğunda, aynı eylemler üç ayrı baloncuk
şeklinde görülebilmektedir. Kullanıcı parmak ucuyla bu baloncuklara
dokunarak istediği eylemi gerçekleştirebilmektedir. Kullanıcının bu
baloncukları seçmesi için, parmak ucunu ekrandan ayırmaması
gerekmektedir. Aksi takdirde seçim iptal olacaktır. Bu noktada
kullanıcının parmağını istediği baloncuğa kadar sürüklemesi
gerekmektedir. Kullanıcı bu eylemi gerçekleştirdiğinde seçmiş olduğu
baloncuk kırmızı rengine dönecek ve bu baloncuğun seçildiği belli
olacaktır. Seçimden sonra kullanıcı parmağını ekrandan ayırdığında eylem
gerçekleşecektir.
Yukarıda anlattığımız tüm süreç, animasyonların ve hareketlerin
katkısıyla kullanıcıları memnun etmekte ve onlar için eğlenceli bir
eylem haline gelmektedir. Sadece Pinterest`e özgü olarak bu
“keşfedilebilir kontroller” siteye ayrı bir özgünlük katmakta ve
içeriği daha eğlenceli kılmaktadır.
İnteraktif Dalgada Sörf Yapın

İçinde bulunduğumuz bu zaman, mobil tasarım için oldukça heyecan verici hale gelmekte ve mobil hareketler ve mobil animasyonlar zirveyi yaşamaktalar. Eğer büyük şirketlerin bu tasarım elementlerini nasıl kullandığını derinlemesine incelemek istiyorsanız, Mobile UI Design Patterns
konularına ilgi duymaya başlamalısınız. Kullanacağınız ve ihtiyacınız
olan bilgiyi alın fakat bu bilgilerin kendi problemleriniz için çözüm
olduğundan emin olun. Daha da önemlisi, kullanıcılarınızın
problemlerinin çözümü olabileceğinden emin olun.
Kaynak: https://www.creamive.com/interaktif-mobil-tasarim