Kısa cevap: Mobil uygulama tasarımı, bir uygulamanın ekranlarını, akışlarını ve etkileşimlerini telefonun küçük ekranına, dokunmatik kullanımına, iOS ve Android platform kurallarına ve kesintili kullanım koşullarına göre planlayan UI ve UX çalışmasıdır.
Ben Selçuk Aker; 19 yılı aşkın süredir grafik ve dijital arayüz tasarımı yapıyorum ve portfolyomda yayımlanan çok sayıda mobil uygulama arayüzü bulunuyor. "Mobil uygulama tasarımı" denince çoğu kişinin aklına güzel ekran görselleri geliyor. Oysa işin büyük kısmı görünmeyen kararlardan oluşur: hangi görev ilk ekranda olmalı, kullanıcı internet bağlantısı koptuğunda ne görecek, bildirim izni ne zaman istenecek? Bu rehberde mobil uygulama tasarımının neyi kapsadığını, neden önemli olduğunu ve platformlar arasındaki farkları anlatıyorum. Uygulamanın kendisi ve işletme açısından gerekip gerekmediği ise ayrı bir konu; onu mobil uygulama nedir yazısında ele aldım.
Mobil uygulama tasarımı neyi kapsar?
Mobil uygulama tasarımı dört katmandan oluşur ve bunlar birbirinden bağımsız düşünülemez:
| Katman | Kapsam | Örnek kararlar |
|---|---|---|
| UX | Kullanıcı, görev, akış, bilgi mimarisi | Kayıt zorunlu mu, ilk ekranda ne var? |
| UI | Görsel dil, bileşen, tipografi, renk, ikon | Buton stili, koyu tema, boş durum illüstrasyonu |
| Platform | iOS ve Android kuralları, sistem davranışları | Geri hareketi, sekme çubuğu, izin diyalogları |
| Mağaza ve çevre | Uygulama ikonu, mağaza görselleri, bildirim metinleri | İkonun küçük boyutta okunması, ekran görüntüsü sırası |
Ekran sayısı uygulamanın kapsamına göre değişir; ama her ekranın yanında boş, yükleme, hata ve izin durumları da tasarlanmalıdır. Bu durumların listesini mobil uygulama ekran listesine eklenmesi gereken durumlar yazısında ayrıntılı verdim.
Mobil uygulama tasarımı neden önemlidir?
Mobil kullanım, masaüstünden farklı koşullarda gerçekleşir ve tasarım bu koşullara uymazsa kullanıcı kolayca vazgeçer. Abartmadan söylemek gerekirse tasarımın önemi şu noktalardan gelir:
- İlk kullanım kısa sürer: Kullanıcı uygulamayı ilk açtığında ne işe yaradığını hızla anlamak ister. Anlamazsa kaldırmak tek dokunuşluk iştir.
- Dikkat kesintilidir: Uygulama otobüste, sırada beklerken ya da yürürken kullanılır. Görev yarıda kalabilir; kaldığı yerden devam edebilmek önemlidir.
- Ekran küçük, parmak büyüktür: Masaüstünde sığan bilgi mobilde sığmaz. Öncelik vermek zorunludur.
- Tek elle kullanım yaygındır: Önemli eylemlerin başparmakla rahat ulaşılan alanda olması kullanımı kolaylaştırır.
- Hata maliyeti yüksektir: Ödeme, randevu ya da sipariş gibi akışlarda yanlış dokunma gerçek bir soruna dönüşebilir.
- Geliştirme maliyeti tasarım kararına bağlıdır: Netleşmemiş bir akış, kodlama sırasında değiştiğinde zaman ve bütçe kaybı yaratır.
İyi tasarım bu riskleri azaltmaya yardım eder; ancak uygulamanın başarısı ürünün değerine, pazarlamaya, teknik kaliteye ve rekabete de bağlıdır.
Mobilde UI ve UX farkı nasıl görünür?
Aynı ekran üzerinden düşünelim: bir yemek siparişi uygulamasında sepet ekranı.
- UX kararları: Sepete eklemeden önce adres seçilmeli mi? Minimum tutar uyarısı ne zaman gösterilmeli? Kullanıcı ödeme adımında geri dönerse sepet korunuyor mu? Kupon alanı herkes için görünür mü, yoksa bir bağlantının arkasında mı?
- UI kararları: Toplam tutar hangi büyüklükte ve nerede duruyor? "Siparişi onayla" butonu ekranın altına sabitlenmiş mi? Ürün adedi değiştirme kontrolü yeterince büyük mü? İndirim satırı hangi renkle ve nasıl ayrıştırılıyor?
İki karar grubu birlikte çalışmazsa güzel ama kafa karıştıran ya da mantıklı ama kullanması yorucu bir ekran ortaya çıkar. UI ve UX ayrımının genel çerçevesi için UI/UX tasarım ana sayfasına bakabilirsiniz.
Temel mobil tasarım ilkeleri
Genel arayüz ilkeleri mobilde de geçerlidir; ama bazıları özellikle belirginleşir. Ayrıntılı anlatım için UI/UX tasarım ilkeleri rehberine bakabilirsiniz.
- Her ekranın birincil görevi belli olsun. Bir ekranda birden çok eşit önemli eylem varsa kullanıcı duraksar.
- Gezinme yapısını görev sayısına göre seçin. Az sayıda ana bölüm için alt sekme çubuğu yaygın ve anlaşılır bir yapıdır; çok derin içerik için farklı çözümler gerekir.
- Veri girişini azaltın. Klavye açmak mobilde pahalıdır. Uygun klavye türü, otomatik doldurma, seçim listeleri ve konumdan alınan bilgiler yazmayı azaltır.
- Durumları tasarlayın. Boş liste, yükleme, bağlantı yok, sunucu hatası ve başarılı işlem ekranları ana ekranlar kadar önemlidir.
- Geri almayı mümkün kılın. Silme ya da iptal gibi işlemlerde onay ya da geri alma sunun.
- Dokunma alanlarını yeterli tutun. Apple en az 44 × 44 pt, Android ve Material Design en az 48 × 48 dp öneriyor.
Mobil uygulamada gezinme kalıpları
Gezinme yapısı, uygulamanın iskeletidir ve sonradan değiştirmesi en zor kararlardan biridir. Yaygın kalıplar ve uygun oldukları durumlar şöyle özetlenebilir:
| Kalıp | Uygun olduğu durum | Dikkat edilecek nokta |
|---|---|---|
| Alt sekme çubuğu | Az sayıda, eşit önemde ana bölüm | Sekme sayısı arttıkça etiketler sıkışır |
| Yığın (ileri ve geri) | Listeden ayrıntıya inen akışlar | Kullanıcı nerede olduğunu kaybetmemeli |
| Yan menü (çekmece) | Seyrek kullanılan çok sayıda bölüm | Gizli olduğu için önemli bölümler için uygun değildir |
| Tek ekran ve araç çubuğu | Tek bir ana görevi olan uygulamalar | Ek özellikler eklendikçe yapı yetersiz kalabilir |
| Adım adım akış (sihirbaz) | Kayıt, başvuru, ödeme gibi sıralı görevler | Kullanıcı kaç adım kaldığını görmeli ve geri dönebilmeli |
Çoğu uygulama bu kalıpları birlikte kullanır: ana bölümler için alt sekme çubuğu, her bölümün içinde yığın gezinmesi ve belirli görevler için adım adım akış. Seçim, wireframe aşamasında görev listesine bakılarak yapılmalıdır.
iOS ve Android: aynı görünmek zorunda mı?
Aynı görünmek zorunda değildir, ama aynı şekilde çalışmalıdır. Her iki platformun da resmî tasarım kılavuzu vardır: Apple'ın Human Interface Guidelines ve Google'ın Material Design 3 dokümanları. Kullanıcılar kendi platformlarının alışkanlıklarıyla gelir.
Dikkat edilmesi gereken başlıca farklar:
- Geri dönme: iOS'ta ekranın sol kenarından kaydırma ve sol üstteki geri butonu alışılmıştır; Android'de sistem geri hareketi ya da tuşu vardır. Uygulama her iki davranışı da tutarlı karşılamalıdır.
- Gezinme bileşenleri: Sekme çubuğu, üst çubuk ve menü gibi bileşenlerin görünüşü ve konumu platformlara göre farklılık gösterebilir.
- Sistem diyalogları ve izinler: İzin istekleri ve uyarı pencereleri işletim sisteminin kendi görünümünde açılır; tasarımcı bunların öncesinde ve sonrasında ne olacağını planlar.
- Tipografi: Her platformun varsayılan sistem yazı karakteri ve dinamik yazı boyutu davranışı vardır.
- Ölçü birimleri: iOS tasarımında nokta (pt), Android'de yoğunluktan bağımsız piksel (dp) kullanılır.
Pratikte birçok ekip, marka kimliğini taşıyan ortak bir tasarım dili kurup gezinme, geri hareketi ve sistem bileşenlerinde platform alışkanlıklarına uyum sağlar. Bu, iki tamamen ayrı tasarımdan daha az maliyetli ve kullanıcı için daha tanıdık bir yoldur.
Native, hibrit ve çapraz platform: tasarıma etkisi
Uygulamanın nasıl geliştirileceği tasarım kararlarını da etkiler. Native geliştirmede (iOS için Swift, Android için Kotlin gibi) her platformun kendi bileşenleri doğrudan kullanılır; platform alışkanlıklarına uymak kolaylaşır. Flutter ya da React Native gibi çapraz platform yaklaşımlarında tek kod tabanıyla iki platform hedeflenir; ortak bileşenler daha fazla kullanılır ve platforma özel davranışların hangilerinin korunacağı baştan kararlaştırılmalıdır.
Tasarımcı açısından önemli olan, teknoloji seçiminin tasarım başlamadan önce ya da en geç wireframe aşamasında bilinmesidir. Hangi bileşenin hazır geldiği, hangisinin özel olarak kodlanacağı, animasyonların ne kadar karmaşık olabileceği bu seçime bağlıdır. Konuyu native, Flutter ve React Native seçimi yazısında, tarayıcıda çalışan alternatifleri de PWA mı mobil uygulama mı yazısında ele aldım. Tarayıcıda çalışan mobil deneyimler için mobil web tasarımı sayfasına bakabilirsiniz.
Onboarding: ilk açılış deneyimi
Onboarding, kullanıcının uygulamayı ilk kez açtığında karşılaştığı tanıtım, kayıt ve ilk kurulum adımlarıdır. Sık yapılan hata, kullanıcıya uygulamayı kullanmadan önce uzun bir tanıtım slaytı izletmektir.
Daha işe yarayan yaklaşımlar:
- Uygulamanın değerini birkaç saniyede anlatan tek bir ekran ya da doğrudan ana ekrana geçiş.
- Kaydı, kayıt gerçekten gerekli olduğu ana ertelemek; önce göz atmaya izin vermek.
- Bilgiyi kullanıldığı yerde vermek: bir özelliğin ilk kullanımında kısa bir ipucu.
- Kişiselleştirme sorularını en aza indirmek ve atlanabilir kılmak.
- İzinleri, gerekçesi anlaşıldığı anda istemek.
İzinler, bildirimler ve çevrimdışı durumlar
Mobil uygulamalar konum, kamera, kişiler ve bildirim gibi izinlere ihtiyaç duyabilir. Kullanıcı izin vermezse ne olacağı da tasarlanmalıdır: özellik nasıl kısıtlı çalışacak, kullanıcı daha sonra izni nasıl açabilecek?
Bildirimler değerli ama hassas bir kanaldır. Çok sık ya da alakasız bildirim, kullanıcının bildirimleri tümüyle kapatmasına yol açabilir. Hangi olayın bildirim gerektirdiği ve kullanıcının bunu nasıl yöneteceği tasarım kapsamındadır.
Bağlantı kesildiğinde uygulamanın ne gösterdiği de önemlidir: önbellekteki veriyi göstermek mi, işlemi sıraya almak mı, açık bir uyarı vermek mi? Bu kararlar geliştirici ve arka uç ekibiyle birlikte verilir; ayrıntısı mobil uygulama backend, API ve çevrimdışı tasarım yazısında.
Erişilebilirlik ve farklı ekran boyutları
Mobil erişilebilirlik birkaç temel kontrolle başlar:
- Dinamik yazı boyutu: Kullanıcı sistem ayarından yazıyı büyüttüğünde metinler kesilmemeli, düzen bozulmamalı.
- Kontrast: WCAG 2.2 AA düzeyinde normal metin için en az 4.5:1, büyük metin için en az 3:1 kontrast oranı.
- Ekran okuyucu: iOS'ta VoiceOver, Android'de TalkBack ile her butonun anlamlı bir adla okunması.
- Dokunma alanları: Platform önerilerine uygun boyut ve yeterli aralık.
- Hareket: Hareket azaltma ayarı açıkken animasyonların sadeleştirilmesi.
Farklı ekran boyutları da tasarımın parçasıdır: küçük telefonlar, büyük ekranlı modeller, çentik ve dinamik alanlar, yatay mod ve tablet. Her boyut için ayrı ekran çizmek gerekmez; ama esnek yerleşim kurallarının tanımlanması ve en küçük ile en büyük ekranda kontrol edilmesi gerekir. Resmî kılavuz için Android erişilebilirlik sayfasına ve Apple erişilebilirlik kılavuzuna bakabilirsiniz.
Mağaza görselleri ve uygulama ikonu
Kullanıcının uygulamayla ilk karşılaşması çoğu zaman mağaza sayfasında olur. Uygulama ikonu, ekran görüntüleri ve tanıtım metni bu yüzden deneyimin parçasıdır. İkon küçük boyutta da tanınmalı, ekran görüntüleri uygulamanın ne işe yaradığını ilk birkaç karede anlatmalıdır.
Mağaza görselleri genellikle ayrı bir teslim olarak planlanır; ölçüleri ve kuralları Apple ve Google tarafından belirlenir ve zaman içinde değişebilir. Güncel ölçüleri App Store Connect ve Google Play Console yardım sayfalarından kontrol etmek gerekir. Bu konuda eski ama hâlâ yol gösteren bir not için uygulama mağazasında öne çıkan mobil tasarım yazısına bakabilirsiniz.
Portfolyodan mobil arayüz örnekleri
Portfolyomda yayımlanan mobil uygulama arayüzleri farklı kullanım türlerini kapsıyor: araç kiralama uygulaması Ayes Rent A Car, kurye uygulaması Courier App, evcil hayvan bakımı uygulaması Pawla Pet App, uzaktan eğitim uygulaması Education App, akıllı ev kontrolü için Intelligent House App ve karanlık temalı sesli kitap uygulaması Voice Book Mobile App bunlardan bazıları. Tamamını mobil uygulama çalışmaları sayfasında görebilirsiniz. Bu sayfalar yayımlanan arayüzleri gösterir; her projede doğrulanmış rol beyanım bulunmuyor. Rolü teyit edilmiş projelerde, Danone ve ERP Software'de arayüz tasarımını üstlendim; Yatcim'de web sitesinin tamamını hazırladım.
Maliyeti ve süreyi neler belirler?
Mobil uygulama tasarımının bütçesi ve süresi ekran sayısından çok akışların karmaşıklığına bağlıdır. Belirleyici etkenler şunlardır: kullanıcı rolü sayısı (müşteri, kurye, yönetici gibi), platform sayısı, durumların kapsamı, tasarım sistemi ihtiyacı, araştırma ve test kapsamı, mağaza görselleri ve revizyon sayısı. Bu etkenleri mobil uygulama arayüzü tasarımı fiyatları yazısında açtım. Adım adım süreç için mobil uygulama nasıl tasarlanır rehberine, yapay zekâ ile hızlı uygulama üretmenin sınırları için yapay zekâ ile uygulama yapılır mı rehberine bakabilirsiniz. Hizmet kapsamı için mobil uygulama tasarımı hizmeti, mobil uygulama tasarımcısı ve freelance mobil uygulama tasarımcısı sayfaları var.
Özet ve kontrol listesi
- Mobil uygulama tasarımı UX, UI, platform kuralları ve mağaza görünümünü birlikte kapsar.
- Her ekranın tek birincil görevi olmalı; durumlar ana ekranlar kadar özenle tasarlanmalı.
- iOS ve Android aynı görünmek zorunda değil; gezinme ve sistem davranışlarında platforma uyulmalı.
- Geliştirme teknolojisi en geç wireframe aşamasında bilinmeli.
- Onboarding kısa, kayıt mümkünse ertelenmiş, izinler gerekçesiyle istenmeli.
- Dinamik yazı, kontrast, ekran okuyucu ve dokunma alanı kontrolleri yapılmalı.
- Mağaza görselleri ve ikon ayrı bir teslim olarak planlanmalı.
Mobil uygulama tasarımı hakkında sık sorulan sorular
Mobil uygulama tasarımı neden önemlidir?
Mobil kullanım kısa, kesintili ve çoğu zaman tek elle gerçekleşir; kullanıcı uygulamanın ne işe yaradığını hızla anlamazsa vazgeçebilir. Tasarım, görevleri bu koşullara göre sadeleştirir, hata riskini azaltır ve geliştirme sırasında akışların değişmesinden doğan maliyeti düşürmeye yardım eder.
Mobil uygulama tasarımı ile mobil web tasarımı aynı mı?
Değildir. Mobil web tasarımı tarayıcıda açılan bir sitenin küçük ekrana uyumudur; mağaza, izin, bildirim ve platform bileşenleri gibi konular ya hiç yoktur ya da sınırlıdır. Mobil uygulama tasarımı ise cihaza kurulan bir yazılımın iOS ve Android kurallarına göre tasarlanmasıdır.
iOS ve Android için iki ayrı tasarım gerekir mi?
Çoğu projede iki tamamen ayrı tasarım gerekmez. Ortak bir tasarım dili kurulup gezinme, geri hareketi, sistem bileşenleri ve tipografide platform farkları ayrıca ele alınır. Uygulamanın platforma özgü özellikleri yoğun kullandığı durumlarda daha fazla ayrıştırma gerekebilir.
Native ya da hibrit geliştirme tasarımı nasıl etkiler?
Native geliştirmede platformun kendi bileşenlerini kullanmak kolaydır. Flutter ve React Native gibi çapraz platform yaklaşımlarında ortak bileşenler daha çok kullanılır ve platforma özgü davranışların hangilerinin korunacağı baştan kararlaştırılmalıdır. Teknoloji seçimi tasarım başlamadan önce bilinirse ekranlar kodlanabilir biçimde hazırlanır.
Onboarding ekranları her uygulamada gerekli mi?
Gerekli değildir. Uygulama ne işe yaradığını ilk ekranda anlatabiliyorsa uzun bir tanıtım akışı gereksizdir. Önemli olan kaydın ve izinlerin doğru zamanda istenmesi, bilginin de ilgili özelliğin kullanıldığı yerde verilmesidir.
Uygulama mağazası görselleri tasarımın parçası mı?
Evet, kullanıcı deneyimi mağaza sayfasında başlar. Ancak ikon, ekran görüntüleri ve tanıtım görselleri genellikle arayüz tasarımından ayrı bir teslim olarak planlanır. Ölçü ve kurallar mağazalar tarafından belirlendiği ve değişebildiği için güncel yardım sayfaları kontrol edilmelidir.
Mobil uygulamada erişilebilirlik nasıl kontrol edilir?
Tasarım aşamasında kontrast oranları, dokunma alanı boyutları ve büyütülmüş yazıyla düzenin davranışı kontrol edilir. Geliştirme sonrasında VoiceOver ve TalkBack ile her öğenin anlamlı okunduğu, hareket azaltma ayarına uyulduğu test edilir. Android tarafında Google'ın erişilebilirlik tarama araçları da yardımcı olabilir.
İyi tasarım bir uygulamanın başarılı olması için yeterli mi?
Yeterli değildir. Tasarım, kullanıcının uygulamayı anlamasını ve kullanmasını kolaylaştırır; ancak ürünün gerçek bir ihtiyaca cevap vermesi, teknik kalitesi, pazarlaması ve bakımı da en az tasarım kadar belirleyicidir. Tasarımın etkisi, yayın sonrasında önceden belirlenen göstergelerle ölçülmelidir.