Mobil uygulama arayüz tasarımı nasıl yapılır? Yeni başlayan UI/UX tasarımcılar için araştırma, akış, wireframe, component, ekran boyutu ve handoff rehberi.
Mobil uygulama arayüz tasarımı yapmak, sadece ekrana buton ve kart yerleştirmek değildir.
Bunu baştan net söylemek lazım.
İyi bir mobil uygulama arayüzü; kullanıcının ne yapmak istediğini, hangi sırayla ilerleyeceğini, nerede zorlanacağını ve sistemin ona nasıl cevap vereceğini düşünür.
Yani iş sadece UI değil.
UX, product design, içerik, teknik sınırlar ve gerçek cihaz davranışı da işin içindedir.
Önce problemi anlamak gerekir
Mobil ekran tasarımına direkt Figma açarak başlamak çoğu zaman acele olur.
Önce ürünün ne çözdüğünü anlamak gerekir.
Kullanıcı kim?
Bu uygulamayı neden açıyor?
En önemli aksiyon ne?
Kullanıcı hangi noktada karar veriyor?
Başarılı kullanım ne demek?
Bu sorular net değilse tasarım güzel görünse bile ürün tarafında zayıf kalabilir.
Ben bu yüzden mobil uygulama arayüz tasarımına başlamadan önce kısa bir problem notu çıkarmayı severim.
Kullanıcı akışını çıkarmadan ekran çizme
Mobil uygulama arayüzü ekran ekran değil, akış akış düşünülmeli.
Mesela kayıt akışı, ödeme akışı, onboarding akışı, arama akışı veya profil düzenleme akışı.
Kullanıcı bir ekrandan diğerine neden geçiyor?
Geri dönerse ne oluyor?
Hata alırsa ne görüyor?
İşlem başarılı olursa nereye gidiyor?
Bu soruların cevabı yoksa ekranlar birbirinden kopuk olur.
İyi mobil tasarımda her ekran bir sonraki adımı hazırlar.
Wireframe ile başlamak daha sağlıklı
Wireframe, tasarımın iskeletidir.
Renk, gölge, ikon ve görsel detaylara girmeden önce ekranın mantığını kurarsın.
Bu aşamada amaç güzel görünmek değil, doğru yerleşimi bulmaktır.
Başlık nerede?
Ana aksiyon nerede?
Form alanları hangi sırada?
Liste nasıl akıyor?
Boş ekran ne söylüyor?
Wireframe bu soruları hızlı cevaplar.
Yeni başlayan tasarımcılar bazen direkt final UI’a geçiyor.
Bu da sonradan çok revizyon doğuruyor.
Component mantığını erken kur
Mobil uygulama arayüz tasarımında component sistemi çok önemlidir.
Button, input, card, tab bar, header, list item, modal, toast, empty state ve error state gibi parçalar erken düşünülmeli.
Çünkü ürün büyüdükçe her ekranı elle toparlamak zorlaşır.
Componentler tutarlı olursa tasarım daha hızlı büyür.
Geliştirici tarafı da daha rahat ilerler.
Bu noktada design system düşüncesi lüks değil, temel ihtiyaçtır.
Bu konuyu daha geniş okumak için Design Systems for Beginners yazısına bakabilirsin.
Mobil ekran boyutlarını kontrol et
Mobil uygulama arayüz tasarımı tek bir ekran boyutunda bitmez.
Figma’da tasarım güzel görünebilir ama küçük ekranda bozulabilir.
Keyboard açıldığında buton kaybolabilir.
Safe area dikkate alınmadığında alt aksiyon home indicator alanına fazla yaklaşabilir.
Bu yüzden en az şu üç kontrolü yapmak iyi olur:
- Küçük telefon ekranı
- Standart modern telefon ekranı
- Büyük telefon veya tablet ekranı
Güncel ölçüler için Mobil Arayüz Tasarımı Ekran Boyutları Nedir?, iPhone özelinde ise iPhone Ekran Boyutları yazılarına bakabilirsin.
State tasarımlarını atlama
Mobil uygulama arayüzünde sadece ideal ekranı tasarlamak yetmez.
Gerçek üründe her zaman ideal durum yaşanmaz.
Veri gelmeyebilir.
İnternet yavaş olabilir.
Kullanıcı yanlış bilgi girebilir.
İşlem başarıyla tamamlanabilir.
Bu yüzden şu state’ler düşünülmeli:
- Loading state
- Empty state
- Error state
- Success state
- Disabled state
- Validation state
Bunlar küçük detay gibi görünür ama ürün kalitesini ciddi etkiler.
Bu konu için UI/UX Tasarımda Empty State ve Error State Neden Önemli? yazısı iyi tamamlayıcı olur.
İçerik de arayüzün parçasıdır
Mobil uygulama arayüzünde metinler çok önemlidir.
Buton metni, hata mesajı, boş ekran açıklaması, onboarding cümlesi ve form label’ları tasarımın parçasıdır.
“Devam” mı yazmalı?
“Kaydet” mi?
“Hesap oluştur” mu?
Bu küçük kararlar kullanıcı davranışını etkiler.
Bu yüzden arayüz tasarımı yaparken metinleri sonradan doldurulacak alan gibi görmemek lazım.
Metin, kullanıcıyı yönlendiren en önemli UI parçalarından biridir.
Prototype ile akışı test et
Mobil uygulama arayüz tasarımında prototype sadece sunum için yapılmaz.
Akışın çalışıp çalışmadığını görmek için yapılır.
Kullanıcı ilk ekrandan hedefe rahat gidebiliyor mu?
Geri dönüş mantıklı mı?
Modal kapanınca kullanıcı nerede kalıyor?
Hata mesajı akışı kesiyor mu?
Prototype bu soruları erkenden yakalar.
Bu yüzden final UI’dan önce basit bir prototype bile çok iş görür.
Handoff sadece ekran teslim etmek değildir
Geliştiriciye sadece Figma linki vermek çoğu zaman yetmez.
İyi handoff, ekranın davranışını da anlatır.
Hangi alan scroll olur?
Buton sticky mi kalır?
Liste boşsa ne gösterilir?
Keyboard açılınca form nasıl davranır?
Hata mesajı nerede çıkar?
Bu notlar ürün geliştirme sürecini çok rahatlatır.
Mobil arayüz tasarımında iyi tasarımcı, sadece ekrana değil uygulanabilirliğe de bakar.
AI bu süreçte nasıl yardımcı olur?
AI mobil uygulama arayüz tasarımında iyi bir yardımcı olabilir.
Akış alternatifi çıkarabilir.
Boş state metni yazabilir.
Error state senaryosu üretebilir.
Component listesi toparlayabilir.
Handoff notlarını düzenleyebilir.
Ama yine aynı şeyi söyleyeceğim.
AI’a iyi sonuç aldırmak için hazırlığın iyi olmalı.
Problem, kullanıcı, hedef, ekran listesi ve component mantığı net değilse AI sadece hızlı ama dağınık fikir üretir.
AI destekli tasarım mantığını Yeni Başlayanlar İçin UI/UX Tasarımda AI Kullanma Mantığı yazısında ayrıca anlattım.
Kısa mobil uygulama arayüz tasarım checklist
- Problem net mi?
- Kullanıcı tipi belli mi?
- Ana akış çıkarıldı mı?
- Wireframe ile iskelet kuruldu mu?
- Component listesi hazır mı?
- Safe area kontrol edildi mi?
- Küçük ve büyük ekran testi yapıldı mı?
- Empty, error, loading ve success state tasarlandı mı?
- Metinler kullanıcıyı yönlendiriyor mu?
- Handoff notları geliştirici için yeterli mi?
Benim düşüncem
Mobil uygulama arayüz tasarımı, güzel ekran üretme işi değildir.
Güzel ekran bunun sadece görünen kısmı.
Asıl iş, kullanıcının işini daha kolay yapmasını sağlayan sistemi kurmak.
Akış doğru değilse UI parlatmak yetmez.
Component mantığı yoksa ürün büyüdükçe tasarım dağılır.
Ekran boyutları düşünülmediyse gerçek cihazda problem çıkar.
Bu yüzden mobil uygulama arayüz tasarımında iyi başlangıç şudur:
Önce problemi ve akışı anla, sonra ekranı güzelleştir.
Bence tasarımcıyı güçlü yapan şey de tam olarak bu sırayı doğru kurabilmesi.
Daha temel arayüz tanımı için Arayüz Tasarımı Nedir?, mobil UI tarafındaki ana konu için Mobil Arayüz Tasarımı Nedir? yazılarını okuyabilirsin.
