Mobil Uygulama Tasarımı: Arayüzde Temel İlkeler

Kullanıcınız uygulamanızı otobüste ayakta, bir elinde poşet, diğer elinin başparmağıyla kullanıyor. Ekranda aradığı butonu iki saniyede bulamazsa uygulamayı kapatıp başka bir şeye geçiyor. Mobil uygulama tasarımı tam olarak bu koşullar için düşünülmüş bir disiplindir: güzel görünmek önemlidir ama asıl hedef, kullanıcının aklındaki işi en az çabayla bitirmesidir. Bu yazıda bir uygulamanın arayüzünü planlarken dikkat ettiğim temel ilkeleri, teknik olmayan bir dille paylaşıyorum.

Mobil arayüz neden web’den farklı düşünülmeli?

Web tasarımındaki kullanıcı deneyimi ilkelerinin çoğu mobilde de geçerlidir; bu ilkeleri web tasarımda kullanıcı deneyimi yazısında anlattım. Ancak mobil uygulamanın kendine özgü koşulları vardır:

• Küçük ekran: Aynı anda gösterebileceğiniz bilgi sınırlıdır; her ekranın tek bir ana amacı olmalıdır.
• Parmakla kullanım: Fare imleci kadar hassas değildir, üzerine gelince açılan menüler yoktur.
• Kesintili dikkat: Kullanıcı bir bildirimle, bir aramayla ya da durakta inmekle bölünebilir.
• Değişken ortam: Güneş altında, karanlıkta, zayıf internette kullanım.
• Platform alışkanlıkları: iPhone ve Android kullanıcılarının geri dönme, menü açma gibi hareketlerde farklı beklentileri vardır.

Mobil uygulama tasarımında temel ilkeler

1. Her ekranın tek bir ana görevi olsun

Ürün listesi ekranı ürün seçtirmeli, sepet ekranı ödemeye götürmeli. Bir ekrana kampanya, öneri, duyuru ve form birlikte yerleştirildiğinde kullanıcı ne yapacağını bilemez. Ana eylem butonu ekranda belirgin, diğer seçenekler daha geri planda olmalıdır.

2. Başparmağın ulaştığı yeri düşünün

Telefonun alt kısmı tek elle kolayca erişilen bölgedir; üst köşeler ise zorlanarak ulaşılan yerlerdir. Bu yüzden sık kullanılan gezinme öğeleri genellikle alttaki sekme çubuğuna, ana eylem butonları ekranın alt yarısına yerleştirilir. Silme gibi geri dönüşü zor işlemler ise kazara dokunulmayacak bir konumda ve onay adımıyla sunulur.

3. Dokunma alanları yeterince büyük olsun

Apple’ın arayüz yönergeleri dokunulabilir öğeler için en az 44×44 punto, Google’ın Material Design yönergeleri ise 48×48 dp önerir. Görünen ikon küçük olabilir ama dokunma alanı bu ölçülerin altına düşmemelidir. Birbirine çok yakın iki küçük buton, en sık yaşanan “yanlış yere bastım” şikâyetinin sebebidir.

4. Okunabilirlik ve kontrast

Metin boyutu küçük ekranda bile rahat okunmalı; kullanıcının telefonunda büyüttüğü yazı boyutu uygulamada da dikkate alınmalıdır. Açık gri zemin üzerine açık gri yazı şık görünebilir ama güneş altında okunmaz. Erişilebilirlik standardı WCAG, normal metin için en az 4,5:1 kontrast oranı önerir; bu ölçüt hem görme güçlüğü olan kullanıcılar hem de herkes için faydalıdır.

5. Gezinme sade ve tahmin edilebilir olsun

Kullanıcı her an nerede olduğunu ve nasıl geri döneceğini bilmelidir. Dört–beş ana bölüm için alt sekme çubuğu, daha derin içerik için sayfa içi geçişler yaygın ve anlaşılır bir yapıdır. Gizli menülerin içine önemli işlevleri saklamak, o işlevlerin kullanılmamasıyla sonuçlanır.

6. Geri bildirim verin

Butona basıldığında bir şeyin olduğu belli olmalıdır: kısa bir animasyon, yükleniyor göstergesi, “Kaydedildi” mesajı. İnternet yavaşsa kullanıcıya bunu söylemek, ekranın donduğunu düşünmesinden iyidir. Hata mesajları ise teknik kod yerine ne yapılması gerektiğini anlatmalıdır.

Boş, yükleniyor ve hata ekranlarını unutmayın

Tasarım sürecinde genellikle verinin dolu olduğu “ideal” ekranlar çizilir. Gerçek kullanımda ise kullanıcı sıklıkla şu durumlarla karşılaşır:

Durum	Kötü örnek	İyi örnek
Boş liste	Bomboş beyaz ekran	“Henüz siparişiniz yok” mesajı ve ürünlere giden buton
Yükleniyor	Hareketsiz ekran	İçeriğin iskeletini gösteren yer tutucular
İnternet yok	Anlamsız hata kodu	Bağlantı uyarısı ve “Tekrar dene” butonu
Form hatası	Formun en üstünde genel bir uyarı	Hatalı alanın hemen altında açıklama

Bu ekranlar küçük ayrıntı gibi görünür ama kullanıcının uygulamaya güvenini doğrudan etkiler.

iOS ve Android için aynı tasarım kullanılabilir mi?

Flutter gibi çapraz platform araçlarla tek kod tabanından iki platforma da uygulama çıkarmak mümkün; mobil uygulama tasarımı da büyük ölçüde ortak olabilir. Yine de bazı noktalarda platform alışkanlığına saygı göstermek gerekir: Android’de sistemin geri hareketi, iOS’ta kenardan kaydırarak geri dönme, tarih seçici ve uyarı pencerelerinin görünümü gibi. Marka kimliğiniz her iki platformda tutarlı kalırken kullanıcı kendi telefonunun diline yabancılık çekmemelidir.

Tasarım sürecinde izlenecek adımlar

1. Kullanıcı ve görev listesi: Uygulamayı kim, hangi amaçla kullanacak? En sık yapılacak üç görev hangisi?
2. Akış şeması: Kullanıcının bir görevi baştan sona hangi ekranlardan geçerek tamamlayacağı.
3. Taslak ekranlar: Renk ve görsel olmadan, yalnızca yerleşimi gösteren kaba çizimler.
4. Görsel tasarım: Renk, yazı tipi, ikonlar ve marka öğeleri.
5. Tıklanabilir prototip ve test: Birkaç gerçek kullanıcıyla deneme; nerede takıldıklarını gözlemleme.

Mobil uygulama tasarımı sürecinde bu adımları atlamak genellikle geliştirme aşamasında pahalı değişikliklere yol açar. Fikriniz henüz olgunlaşma aşamasındaysa mobil uygulama fikrinizi hayata geçirmeden önce sormanız gerekenler yazısı da işinize yarayabilir.

Bu işi nasıl birlikte yaparız?

Ben tasarımı ve geliştirmeyi aynı süreç içinde ele alıyorum; böylece çizilen her ekranın gerçekten uygulanabilir olduğundan emin oluyoruz:

1. Görevleri belirleme: Kullanıcılarınızın kim olduğunu ve uygulamada en çok ne yapacaklarını birlikte netleştiririz.
2. Akış ve taslak: Ana akışları ve kaba ekranları hazırlar, kapsamı buna göre belirleyip teklif sunarım.
3. Tasarım ve prototip: Marka kimliğinize uygun görsel tasarımı yapar, telefonda deneyebileceğiniz bir prototip paylaşırım.
4. Geliştirme ve iyileştirme: Flutter ile uygulamayı geliştirir, ilk kullanıcı geri bildirimlerine göre arayüzde düzenlemeler yaparız.

Uygulamanızın arayüzünü birlikte planlamak isterseniz iletişim sayfasından bana yazabilirsiniz.

Sık sorulan sorular

Tasarım mı önce gelir, yazılım mı?

Akış ve taslak ekranlar geliştirmeden önce hazırlanmalıdır. Görsel ayrıntılar geliştirmeyle paralel ilerleyebilir, ama ana yerleşim netleşmeden kod yazmak sonradan maliyetli değişikliklere yol açar.

Web sitemin tasarımını uygulamada aynen kullanabilir miyim?

Renkler, yazı tipleri ve marka öğeleri aynen taşınabilir. Ancak yerleşim ve gezinme mobil uygulamanın koşullarına göre yeniden düşünülmelidir; masaüstü site düzeni uygulamada genellikle kalabalık durur.

Karanlık mod gerekli mi?

Zorunlu değildir ama birçok kullanıcı telefonunu karanlık modda kullanır. Baştan renk sistemini buna uygun kurmak, sonradan eklemekten çok daha kolaydır.

Tasarımı kullanıcılarla test etmek için çok kişiye mi ihtiyaç var?

Hayır. Hedef kitleden birkaç kişiyle yapılan kısa bir prototip testi bile en belirgin sorunları ortaya çıkarır. Önemli olan, yönlendirmeden izlemek ve takıldıkları yerleri not etmektir.

Sonuç

İyi bir mobil uygulama tasarımı, kullanıcının fark etmediği tasarımdır: aradığını bulur, işini bitirir ve tekrar gelir. Küçük ekranın sınırlarını kabul edip her ekranı tek bir göreve odakladığınızda uygulamanız hem daha sade hem daha kullanışlı olur. Projenizin arayüzünü konuşmak isterseniz bana ulaşabilirsiniz.