Önce birlikte okunacak bilgileri işaretleyin

Özgün örneğimizde bir ekipman sayfasında ölçüler, uyumluluk, kurulum ve belgeler bulunsun. Ziyaretçi ürünün mevcut alana sığıp sığmadığını anlamak için ölçü ve uyumluluğu aynı anda görmek isteyebilir. Bu ikisini ayrı sekmelere saklamak, bilgiyi akılda tutarak gidip gelmesini gerektirir. İçerik listesini hazırlarken her başlığın yanına hangi diğer bilgiyle birlikte kullanıldığını yazın. Uzunluk kadar ilişkiler de yerleşim kararına yön versin.

Gerçek bir örüntünün kullanım sınırını okuyun

GOV.UK sekme rehberi, sıralı okunacak veya karşılaştırılacak içerikte sekmelerin uygun olmayabileceğini açıklar. Örneğimizde kurulum adımları birbiri ardına takip ediliyorsa sekme görünümü bu sırayı gizleyebilir. Önce normal başlıklarla bir sürüm deneyin. Sayfa uzunsa kısa bir içerik listesi, ziyaretçiyi ilgili bölüme götürebilir. Sadece daha az kaydırma görmek için içerik ilişkilerini parçalamayın; hangi görevde fayda sağlandığını gösterin.

Alternatif görünümlerde sekme daha anlamlı olabilir

Aynı ürünün iki ayrı teknik çizim görünümünü seçmek, bütün kurulum adımlarını sırayla okumaktan farklıdır. Sekmeler burada tek çalışma alanındaki alternatif panelleri düzenleyebilir. Etiketleri içerikle uyuşan kısa kelimelerle yazın; “Diğer” gibi belirsiz başlıkları azaltın. Seçili durum yalnız renkle anlaşılmamalı. Bir sekmede temel karar bilgisini, diğerinde hiç ilişkili olmayan bir satış çağrısını saklamak yerine aynı gruba ait içerikleri birlikte değerlendirin.

Klavye davranışını görsel tasarımdan ayırmayın

W3C sekme örüntüsü, seçili sekme ve ilişkili panelin yanı sıra ok tuşlarıyla gezinme davranışını tanımlar. Paneller yavaş yükleniyorsa her odak değişiminde otomatik açılma rahatsız edebilir; etkinleştirme biçimini bilinçli seçin. Gerçek uygulamada sekme, panel ve etiket ilişkisinin yardımcı teknolojilerle okunmasını kontrol edin. Ekrana yalnız birkaç tıklanabilir kutu çizmek, bu davranışların gerçekleştiği anlamına gelmez.

Telefonda taşan sekmeleri ayrıca tasarlayın

Beş uzun başlık dar ekrana sığmadığında son seçeneklerin fark edilip edilmediğini sınayın. Yatay kaydırma varsa devam eden seçeneklere dair görünür bir ipucu verin. İçerik başka bir düzene geçiyorsa okuma sırası ve başlık ilişkileri korunmalı. Sekme değişince sayfanın beklenmedik biçimde sıçramasını da inceleyin. Örnekte belgeyi bulmak isteyen kişi, teknik bilgiler arasındaki gezinme nedeniyle başa dönmek zorunda kalmamalı.

İki yerleşimi aynı görevle karşılaştırın

Bir prototipte açık başlıklar, diğerinde sekmeler kullanın. Katılımcıdan ölçü ve uyumluluğu kontrol ederek doğru ürünü bulmasını isteyin; kaç kez geri döndüğünü ve hangi bilgiyi kaçırdığını not edin. Bu küçük çalışma satış artışı kanıtı değildir, yerleşim kararını açıklayan gözlemdir. Web tasarım çalışmasına sonucu ve kabul görevini ekleyin. Açık başlıklı sayfada gezinme için uzun sayfa rehberini de kullanabilirsiniz.

Sık sorulan sorular

Sekmeler ile sayfa menüsü aynı şey mi?

Hayır. Sekmeler aynı bağlamdaki paneller arasında seçim yapar. Başka sayfalara götüren ana gezinmeyi sekme davranışı gibi sunmayın.

Bütün ürün bilgilerini ilk ekranda göstermeli miyiz?

Şart değil. Ama birlikte karar verilen bilgilerin ilişkisini koruyun. Başlıklar ve bölüm bağlantıları, bilgiyi gizlemeden düzen sağlayabilir.

Kaynaklar ve ileri okuma

GOV.UK — Tabs W3C WAI — Tabs pattern
Web tasarım & geliştirmeBu hizmeti konuşalım