Ziyaretçilerin büyük kısmı sitenize telefonundan giriyor; çoğu zaman yürürken, toplu taşımada ya da tek eliyle. Bu koşullarda tasarlanmamış bir arayüz — küçük butonlar, uzun kaydırmalar, gizli menüler — kullanıcıyı birkaç saniyede kaybettirir. Mobil arayüz tasarımını bu yüzden “masaüstünü sıkıştırma” işi değil, kendi kurallarıyla ilerleyen ayrı bir tasarım disiplini olarak ele alıyoruz.
Mobil öncelik ne demek
Mobil öncelik (mobile-first), tasarıma en dar ekrandan başlamak demektir. Önce hangi bilgi ve eylemin ekranda ilk saniyede görünmesi gerektiğine karar veriyoruz; geniş ekranda yer bulan ikincil bilgiler mobilde ya alt sıraya iniyor ya da katlanabilir bir bölüme taşınıyor. Bu sırayı sonradan değil tel kafes aşamasında belirlediğimiz için görsel tasarıma geçildiğinde mobil ekran “ayrıca düşünülen” değil, sürecin merkezinde olan bir versiyon oluyor. Bu yaklaşımı nasıl kurguladığımızı UI/UX tasarım sayfamızda daha ayrıntılı anlattık.
Dokunma hedefleri ve ergonomi
Fare imleci pikselin ortasını hedefler; parmak ucu ise daha geniş ve daha az hassas bir alanı kaplar. Bu yüzden mobil arayüzde tıklanabilir her öğe (buton, link, form alanı) en az 44×44 piksellik bir dokunma alanına sahip olmalı ve komşu öğelerle arasında yanlış dokunmayı önleyecek boşluk bulunmalıdır. Sık kullanılan eylemleri de ekranın alt yarısına, yani başparmağın rahat ulaştığı bölgeye yerleştiriyoruz; üst köşelere sıkıştırılmış küçük ikonlar yerine ekranın altında sabit duran net bir çağrı butonu tercih ediyoruz.
- Buton ve linklerde minimum 44×44 piksellik dokunma alanı.
- Sık kullanılan eylemler ekranın alt/orta bölgesinde, başparmak menzilinde.
- Form alanlarında doğru klavye tipi (telefon, e-posta) otomatik açılır.
- Yatay kaydırma zorunlu bırakılmaz, içerik dikey akışa göre kurgulanır.
Navigasyon kalıpları: hangi menü ne zaman çalışır
Az sayıda ana başlığı olan siteler için üstte sade bir hamburger menü yeterli olur; ama sık kullanılan üç-dört eylemi olan bir uygulama benzeri deneyimde ekranın altında sabit duran bir eylem çubuğu daha hızlı çalışır. Hangi kalıbın doğru olduğuna içerik miktarına ve kullanıcının sitede ne sıklıkla gezindiğine bakarak karar veriyoruz; her projeye aynı menüyü kopyalamıyoruz. Sabit bir teklif/WhatsApp çağrısını da her zaman erişilebilir tutuyoruz, böylece kullanıcı sayfanın neresinde olursa olsun iletişime geçmek için yukarı kaydırmak zorunda kalmıyor.
Performans: mobilde hız da bir tasarım kararıdır
Mobil bağlantılar masaüstü kadar hızlı ve kararlı olmayabilir. Bu yüzden görselleri boyutlarına göre optimize ediyor, ekranın altındaki içerikleri geç yüklüyor ve yalnızca konum/saydamlık gibi hafif özellikleri anime ediyoruz. Sayfa açılırken içeriğin yerinin oynamaması (düzen kaymasının olmaması) da mobilde masaüstünden daha kritik, çünkü küçük ekranda beklenmedik bir kayma yanlış dokunmaya doğrudan yol açıyor.
Gerçek cihazlarda test
Tasarımı yalnızca bilgisayar ekranında büyütülmüş bir önizlemeyle onaylamıyoruz; birden fazla telefon modelinde, farklı ekran boyutlarında ve gerçek parmakla test ediyoruz. Formun doldurulması, menünün açılması ve çağrı butonuna ulaşmak bu testte gözden geçirilen ilk üç akış oluyor. Erişilebilirlik kontrolü de aynı turda yapılıyor: yazı boyutu büyütüldüğünde düzenin bozulmaması, kontrastın güneş altında da okunur kalması.
Nereye bağlanıyor? Mobil arayüz kararları UI/UX tasarım sürecinin bir parçası olarak alınır ve web arayüz tasarımı kapsamında koda taşınır. Kapsamı konuşmak için teklif formunu doldurabilirsiniz.
Mobil arayüz tasarımı hakkında kısa sorular
Ayrı ekranlar çiziyoruz ama süreç aynı anda ilerliyor. Bilgi hiyerarşisi ve akış önce mobilde kararlaştırılıyor, sonra geniş ekrana genişletiliyor; böylece mobil, sonradan sıkıştırılan bir versiyon olmuyor.
Evet, yalnızca mobil davranışın gözden geçirilmesi mümkün. Dokunma hedeflerini, menü davranışını ve sayfa hızını inceleyip önceliklendirilmiş bir düzeltme listesiyle geliyoruz.
Mobil ziyaretçilerin büyük kısmı hareket hâlinde, zayıf bağlantıyla siteye girer. Görsel ağır ya da geç açılan bir sayfa, tasarımı ne kadar iyi olursa olsun ziyaretçiyi kaybettirir; bu yüzden hızı tasarım kararı olarak ele alıyoruz.