Sekme Tasarımı: Zihinsel Modele Uyan Arayüz Kurmak

Sekme, ekranda yer açmanın en ucuz yolu: içeriği silmeden görünmez yapıyorsun. Bedeli de tam olarak bu, çünkü görünmeyen içerik ne karşılaştırılabiliyor ne de sayfa içi aramaya takılıyor. Sekmeye geçmeden önce sorulacak tek soru var: kullanıcı bu iki bölümü aynı anda görmek zorunda mı?

Sekmeler neden bu kadar kolay anlaşılıyor

Kartonlu klasör mantığı. Etiketler üstte durur, biri öne çıkar, gerisi arkada bekler. Benzetme öğrenmeyi kolaylaştırıyor, ama sınırı da aynı benzetme veriyor: fiziksel klasörde de aynı anda tek dosyaya bakarsın. Sekme, içeriği yan yana koymanın değil, sıraya dizmenin aracı.

Karar kuralı

Bölümler arasında karşılaştırma yapılacaksa sekme kullanma. Fiyat planları, teknik özellik listeleri, iki ürünün farkı: bunlar tablo işi. Kullanıcı A sekmesindeki rakamı akılda tutup B sekmesine geçmek zorunda kalıyorsa, arayüz ona ezber ödevi vermiş oluyor.

Sekmenin yeri şurası: birbirinden bağımsız, aynı ağırlıkta, genelde tek seferde biri okunan bölümler. Ürün sayfasındaki "Açıklama / Yorumlar / Kargo" üçlüsü buna uyuyor, kimse açıklamayla kargo koşulunu yan yana tutmuyor. Buna karşılık ödeme, kayıt, sipariş gibi tek yönlü akışları sekmeye bölmem; kullanıcının yarıda bıraktığı ikinci sekmeden haberi olmuyor ve formu gönderdiğini sanıp çıkıyor.

Navigasyon sekmesi mi, modül sekmesi mi

İkisi farklı bileşen. Navigasyon sekmesine tıklanınca sayfa değişir, adres değişir, geri tuşu çalışır. Modül sekmesi aynı sayfada panel değiştirir, adres yerinde durur. Görsel olarak birbirinin aynısı oldukları için kullanıcı ikisini de aynı sanıyor, sonra geri tuşuna basıp sayfadan tamamen çıkıyor.

Çözümü basit: modül sekmesinde seçili paneli adrese yaz (#yorumlar gibi) ve history.replaceState ile güncelle. Hem bağlantı paylaşılabilir olur hem de kullanıcı doğrudan o panele düşer.

Kaç sekme sığar, gerçekten

"En fazla on sekme" tavsiyesi masaüstü ölçüsüdür ve mobilde hemen çöker. 360 piksellik bir ekranda kenar boşlukları düştükten sonra elinde 320 piksel civarında şerit kalır. Tek kelimelik bir etiket, iki yanındaki boşlukla birlikte 80 ile 90 piksel yer kaplar. Yani ekrana rahatça sığan sekme sayısı üç, bilemedin dört. İki kelimelik etiketlerde ikiye iner.

Kaynaklarda sık sık "üç ila on sekme idealdir" ile "mobil uyumlu olmalıdır" yan yana yazılır, oysa bu ikisi aynı anda doğru olamıyor. On sekmeye ihtiyacın varsa elindeki şey sekme değil, menü ya da filtre. Kaydırılabilir şerit ara çözüm olarak işe yarar, tek şartla: sağdaki sekmenin bir kısmı görünsün ki kaydırılabildiği anlaşılsın.

Aktif sekmeyi sadece renkle gösterme

Renk körü bir okur için iki sekme aynı görünür. Alt çizgi, kalınlık farkı ya da dolu bir arka blok ekle. Ayırt edici olarak bıraktığın görsel öğede 3:1 kontrast oranını tuttur, WCAG'ın metin dışı kontrast ölçütü bunu istiyor. Pasif sekmeleri soluklaştırmak da yaygın bir hata: gri üstüne açık gri bir etiket okunmaz hale geliyor.

Klavye ve ekran okuyucu

ARIA tarafı net: kapsayıcıya role="tablist", başlıklara role="tab" ve aria-selected, içeriklere role="tabpanel". Asıl atlanan yer klavye. Tab tuşu sekmeler arasında gezmez, şeride girip şeritten çıkar; sekmeler arasında ok tuşlarıyla gezilir. Bunun için seçili sekme tabindex="0", diğerleri tabindex="-1" olur ve odak değiştikçe bu değerler yer değiştirir.

Hazır bir bileşen kullanıyorsan kontrolü üç saniyede yaparsın: şeride gel, sağ ok tuşuna bas. Odak yandaki sekmeye geçmiyorsa bileşen yarım kalmış demektir.

Gizlenen içeriğin bedeli

Pasif panel display:none ile duruyorsa tarayıcının sayfa içi araması onu bulamaz. Kullanıcı Ctrl+F yapar, sonuç çıkmaz, aradığı bilginin sayfada olmadığına karar verir. Yazdırma çıktısında da aynı şey olur, kağıda yalnızca açık sekme düşer. Chromium tarafında hidden="until-found" ile gizlenen panel arama sonucunda kendiliğinden açılıyor, ama desteği henüz tarayıcı geneline yayılmadı.

Panelleri tıklandığı anda sunucudan çekiyorsan tablo daha da kötüleşir: içerik hem aramada hem kaynak kodda yoktur. Metin zaten HTML içinde duruyorsa sorun görünürlükle sınırlı kalır.

Sekme yerine ne konur

• Karşılaştırma varsa tablo. Sütunları yan yana koy, kullanıcıyı hafızasıyla baş başa bırakma.
• Mobilde uzun bölümler varsa akordeon. Dikey büyür, etiket genişliği sorunu ortadan kalkar.
• İçerik sırayla okunuyorsa tek uzun sayfa ve yapışkan bir içindekiler bloğu. Kaydırma, tıklamadan ucuzdur.

Sekmenin tek işi ekranı kısaltmak. Kullanıcının o ekranda yapacağı iş kısalmıyorsa sekme koymanın bir faydası yok.