Mobil Uygulamalarda Navigasyon Tasarımı: Modeller ve Derinlik Takası

Mobil navigasyon, ekranların birbirine nasıl bağlandığından ibaret değil. Kullanıcıya nereye gidebileceğini, şu an nerede olduğunu ve geri nasıl döneceğini aynı anda söylemek zorunda. Küçük ekranda bunun zor kısmı doğru modeli seçmek değil, bir takası kabul etmek: menüyü sığ tuttukça genişler, dar tuttukça derinleşir. İkisini birden küçültmenin yolu yok.

Navigasyonun üç ayrı işi

Bir navigasyon sistemi üç ayrı problemi çözer ve çoğu uygulamada bunlardan biri eksik kalır.

Üst düzey yapı, kullanıcının hangi yollardan geçebileceğini belirler: sekme çubuğu, çekmece, merkez ekran. Yerel ipuçları o an nerede olunduğunu gösterir: seçili sekme, ekran başlığı, geri butonunun üzerindeki etiket. Rehber öğeler bir sonraki adımı işaret eder: ikonlar, etiketler, bölümleri ayıran çizgiler.

Eksik kalan genelde ikincisidir. Sekme çubuğunu düzgün kuran ekipler, üçüncü seviyeye inildiğinde kullanıcının hangi daldan geldiğini göstermeyi unutuyor. Kullanıcı kaybolduğunda menüye değil, geri tuşuna basar; navigasyonun kalitesini de en iyi bu ölçer.

Modeller ve hangi durumda işe yaradıkları

Hiyerarşik ağaç

Web sitelerinden tanıdık yapı: ana kategoriler, altında alt kategoriler. İçerik miktarı belliyse ve kategoriler birbirinden gerçekten ayrıysa iyi çalışır. İki seviyeden sonra iz yolu ya da en azından dolu bir ekran başlığı koymak gerekiyor, yoksa kullanıcı kendi konumunu tahminle buluyor.

Matruşka

Her dokunuş bir öncekinin içine, daha özel bir içeriğe götürür. Tek yönlü okuma akışı olan yerlerde (haber, kurs, ayarlar) doğal durur. Zayıf tarafı yatay geçiş: aynı seviyedeki komşu bir öğeye gitmek için geri çıkıp tekrar girmek gerekir. Kullanıcı sık sık kardeş içerikler arasında dolaşıyorsa bu model yanlış seçimdir.

Merkez ve çevre

Bütün bölümler merkezî bir ekrandan dağılır, bölümler arası doğrudan geçiş yoktur. Maliyeti ölçmek kolay: bir daldan diğerine gitmek her seferinde iki adım, önce merkeze dönüş sonra yeni dala giriş. Kullanıcı oturum başına iki üç kez geçiş yapıyorsa sorun yok; onlarca kez yapıyorsa bu tasarım ona sürekli vergi ödetiyor demektir. Görev odaklı, tek işi olan uygulamalarda odaklanmayı artırdığı için tercih edilir.

Bento kutusu

Birden fazla içerik tek ekranda kutular halinde durur, her kutu detayına açılır. Veri gösteren panellerde iyi: kullanıcı özeti görüp sadece ilgilendiğine giriyor. Kutu sayısı ekranı aşmaya başladığında model bozulur, çünkü kaydırma altında kalan kutu pratikte yok sayılır.

Filtrelenebilir görünüm

Tek bir veri kümesini farklı kesitlerle göstermek. Alışveriş, ilan, portföy uygulamalarının doğal yapısı. Burada asıl tasarım işi filtre bileşenlerinde değil, seçili filtrenin ekranda görünür kalmasında. Kullanıcı hangi filtrenin açık olduğunu görmüyorsa boş sonuç ekranını uygulamanın hatası sanıyor.

Sığ ve dar aynı anda olmaz

"Menüyü sade tutun, derinliği azaltın" tavsiyesi kulağa doğru gelir ama tek başına uygulanamaz. Her seviyede en fazla b seçenek gösteriyorsan, d seviyede ulaşabileceğin ekran sayısı b^d kadardır. Elinde 60 ekran varsa ve sekme çubuğuna 5 öğe koyduysan, 5 × 5 = 25 yetmez; üç seviyeye inmek zorundasın. Genişliği 8'e çıkarsan iki seviye yeter, ama 8 öğe sekme çubuğuna sığmaz.

Yani sadelik kararı aslında şu: neyi elemek istiyorsun. Ekran sayısını düşürmüyorsan, derinlik ya da genişlik ikisinden biri kaçınılmaz olarak büyür.

Hamburger menüyü bu denklemin çözümü olarak kullanmam. Genişliği bedavaya alıyormuş gibi görünür, çünkü kaç öğe koyarsan koy ekranda tek bir ikon kaplar; karşılığında bütün bölümlerin görünürlüğünü sıfırlar. İçindekiler menüsü açılmadığı sürece kullanıcı için var olmayan şeylerdir. Sık kullanılan üç dört bölümü ekranda tutup gerisini bir "Daha fazla" ekranına almak, aynı öğe sayısını çok daha dürüst dağıtır.

Kullanıcıya nerede olduğunu göstermek

Yol haritası vermek yarısı. Diğer yarısı, kullanıcının o anki konumunu tereddütsüz okuyabilmesi.

Sabit işaretler bunun en ucuz yolu: her ekranda aynı yerde duran logo, bölüm başlığı, seçili sekmenin belirgin rengi. Sınırlar da aynı işi yapar; buton çerçeveleri, kart kenarları ve bölüm ayırıcıları kullanıcıya neresinin dokunulabilir olduğunu söyler. Düz metnin yanına konmuş çerçevesiz bir bağlantı, mobilde çoğu zaman fark edilmiyor.

İkon mu, etiket mi

İkon tek başına yalnızca gerçekten yerleşmiş sembollerde çalışır: ev, arama, sepet, profil. Bunların dışındaki her ikon tahmine açıktır ve kullanıcı yanlış tahmin ettiğinde bunu geri dönerek öğrenir. Kalan her yerde ikonun altına kısa bir etiket koy. Etiketler için de tek kural var: bölümün adı ne ise onu yaz, yaratıcı isim arama.

Uygulama sırasında verilecek kararlar

• Öncelik sırasını veriyle kur. Hangi bölüme kaç kez girildiğini ölçmeden yapılan sıralama, ekibin kendi kullanım alışkanlığını yansıtır.
• Dokunma hedeflerini küçültme. Apple'ın kendi arayüz kılavuzu 44 pt, Google 48 dp önerir; sekme ikonlarını bunun altına indirdiğinde hata oranı ölçülebilir şekilde artar.
• Geri yolunu her ekranda bırak. Modal içinde kapatma butonu olmayan bir akış, kullanıcıyı uygulamayı kapatmaya iter.
• İkonlar için SVG kullan. Farklı ekran yoğunluklarında ayrı raster dosya üretmek hem paketi şişirir hem de bakımı zorlaştırır.

Menü yapısı bir kere kurulup bırakılan bir şey değil. Ekran sayısı arttıkça yukarıdaki b^d hesabı yeniden bozulur ve o noktada yeni bölümü mevcut menüye sıkıştırmak yerine yapıyı bölmek gerekir.