Mobil Uygulama Arayüz ve UX Tasarımı

Kullanıcı uygulamayı neden açıyor?

Bir mobil uygulama çoğu zaman tek bir soruya hızlı cevap almak için açılır. Tasarıma bu soruyu bulmakla başlıyoruz. Patron App'te soru belliydi: araç kiralama işletmesinin sahibi günün sonunda ne kadar tahsil edildiğini, kaç aracın kirada olduğunu ve neyin süresinin dolduğunu bilmek istiyor. Uygulama işletmenin durumunu altı ekranda gösteriyor; ilk ekran bugün, bu hafta ve bu ay için özeti veriyor.

Aynı mantık her uygulama için geçerli. Ana ekranda kullanıcının en sık yaptığı iş durur; seyrek kullanılan ayarlar ve raporlar bir adım geride kalır. Bir uygulamanın web sitesindeki her şeyi içermesi gerekmez.

iOS ve Android'in kuralları

iPhone ve Android kullanıcıları farklı alışkanlıklarla gelir. Geri dönme hareketi, alt ve üst menülerin kullanımı, tarih seçici ve uyarı pencereleri iki platformda farklı davranır. Apple'ın Human Interface Guidelines ve Google'ın Material Design rehberleri bu farkları tanımlar; dokunma alanı için Apple en az 44×44 pt, Google 48×48 dp önerir.

React Native ya da Flutter ile tek kod tabanından iki platforma uygulama geliştirildiğinde bu farklar ortadan kalkmaz. Ortak bir tasarım dili kuruyor, platforma özgü davranışları ayrıca belirliyoruz; böylece uygulama iki telefonda da yabancı durmaz. Sistem ayarlarından yazı boyutunu büyüten kullanıcı için ekranların bozulmadığını da kontrol ediyoruz.

Ekranın her hali: boş, hata, belirsiz

Mobilde kullanıcı zor durumlarla sık karşılaşır: internet kesilir, kamera izni verilmemiştir, aranan kayıt yoktur. Bu durumların her biri için ayrı ekran tasarlıyoruz. Hata mesajı ne olduğunu ve kullanıcının şimdi ne yapabileceğini söyler.

SafeFood'da bu konu ürünün merkezinde. Barkodu okutulan ürün kişinin seçtiği alerjilere göre değerlendiriliyor ve sonuç üç kelimeden biriyle geliyor: Uygun, Dikkat ya da Uzak Dur. Kararın dayandığı kelime etiketin üzerinde vurgulanıyor. Ürün hakkında veri yoksa uygulama tahmin yürütmüyor, sonucu Bilinmiyor olarak söylüyor. Çocuk, eş ya da anne için ayrı profiller var ve aralarında tek dokunuşla geçiliyor.

Çok dilli ve hareket halindeki kullanıcı

Yurt dışından kullanıcı bekleyen bir uygulamada dil desteği metin çevirisinden fazlasıdır. Almanca kelimeler düğmeye sığmayabilir, Arapça sağdan sola okunur, tarih ve para biçimleri ülkeye göre değişir. SafeFood'un arayüzü 10 dilde; böyle bir uygulamada ekranlar en uzun çeviriye göre kontrol edilir.

Vonaride'ın yolcu uygulamasında yolcu rezervasyon sırasında şoförünün konuşacağı dili seçiyor, yolculuk günü şoförü haritada izliyor ve tahmini varışı telefonda görüyor. Havalimanında elinde bavulla bekleyen birinin kullanacağı ekranlarda büyük dokunma alanları ve az metin gerekir.

İzinler, gizlilik ve mağaza

Konum, kamera ve bildirim izinleri, kullanıcının neden gerektiğini anladığı anda istenmelidir; uygulama açılır açılmaz art arda gelen izin pencereleri çoğunlukla reddedilir. Kişisel verinin telefondan çıkmaması da bir tasarım kararıdır: SafeFood'da karar motoru telefonda çalışıyor ve misafir kullanıcının alerji profili sunucuya gönderilmiyor. Bildirimler de ekranlarla birlikte planlanır: hangi olayda gönderileceği, metnin ne diyeceği ve dokununca hangi ekranın açılacağı.

Uygulamanın kullanıcıyla ilk karşılaştığı yer mağaza sayfasıdır. Ekran görüntüleri ve açıklamalar tasarımla birlikte planlanırsa uygulamanın ne işe yaradığı ilk bakışta anlaşılır; bu iş için App Store optimizasyonu sayfamıza bakabilirsiniz.

Mobil uygulama tasarımının takvimi ve maliyet kalemleri

Birkaç ekranın yenilenmesi genellikle 2–3 hafta, araştırmadan test edilmiş prototipe kadar uçtan uca bir mobil uygulama tasarımı 6–8 hafta sürer; kesin takvim ekran sayısına göre belirlenir. Maliyeti şu kalemler belirler:

• Farklı ekran şablonlarının sayısı ve ana akışlar
• iOS ve Android için ortak tasarım mı, platforma göre ayrı uyarlama mı
• Tablet ve yatay ekran desteği
• Dil sayısı ve sağdan sola yazılan diller
• Harita, kamera, barkod okuma gibi özel etkileşimler
• Koyu tema
• Gerçek cihazda kullanıcı testi

Uygulamanın yazılım tarafı için mobil uygulama geliştirme sayfamıza bakabilirsiniz.