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.
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.
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.
Android, iOS ve diğer mobil platformlar, uygulama içi nde 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.
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.
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.
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.
Kullanıcı, kendi tecrübesini bölmeden içerikle etkileşime geçmek istemektedir.
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.
İç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.