Taramayı ve Anlamayı Kolaylaştıran Duyarlı Sayfa Hiyerarşisi Tasarlayın

Duyarlı bir sayfa hiyerarşisi, her anlamlı sunumda kullanıcının dört soruyu hızla yanıtlayabilmesini sağlamalıdır: Bu sayfanın amacı ne, iddiaları veya durumu hangi kanıt destekliyor, hangi seçenekler var ve sırada ne yapmalıyım? Bu açıklık masaüstü kompozisyonunu küçültmekle oluşmaz. İçerik önceliği, ilişkiler ve anlamlı okuma sırası önce kararlaştırılmalı; tipografi, boşluk, gruplama ve işlem vurgusu bu kararı görünür kılmalıdır. Geniş görünümde etkileyici duran fakat dar veya yakınlaştırılmış görünümde yönünü kaybeden bir sayfa, yalnızca estetik açıdan değil anlama, karşılaştırma ve görev ilerlemesi bakımından da başarısızdır.

Duyarlı sayfa hiyerarşisi kullanıcıya neyi anlatmalıdır?

Başarılı bir hiyerarşi, kullanıcının sayfanın amacını tanımasını, ilgili kanıtı bulmasını, seçenekleri anlamasını ve sonraki adımı ayırt etmesini sağlar. Bu dört soru, W3C veya başka bir kuruluşun adlandırılmış standardı değildir; sayfa amacı, betimleyici başlıklar, tarama davranışı ve işlem açıklığına ilişkin ayrı rehberliklerin editoryal bir sentezidir. Dolayısıyla kontrol listesi olarak yararlıdır, fakat erişilebilirlik uygunluğunun ya da kullanılabilirlik testinin yerine geçirilmemelidir. Her sorunun cevabı hem içerikte bulunmalı hem de değişen yerleşimde önemini korumalıdır.

Üç kurumsal destek paketi sunan örnek bir sayfayı düşünün. Giriş metni, yeterlilik kanıtları, paket özetleri, ayrıntılar ve düğmeler masaüstünde neredeyse aynı ağırlıktaysa ziyaretçi önce neye bakacağını kestiremez. Dar görünümde bu modüller uzun bir yığına dönüştüğünde sorun büyür: kanıt desteklediği iddiadan uzaklaşabilir, paket özellikleri karşılaştırılamaz hâle gelebilir ve değerlendirme talebi arada kaybolabilir. Hiyerarşinin görevi her öğeyi büyütmek değil, sayfanın işini ve kullanıcının karar yolunu görünür tutmaktır.

Sayfayı evrensel bir F veya Z şemasına zorlamak doğru bir başlangıç değildir. Tarama; göreve, dile, içeriğe, kullanıcının konuya aşinalığına ve yerleşime göre değişir. Nielsen Norman Group'un aktardığı katmanlı tarama gözlemi, belirgin alt başlıkların ilgili bölümü doğru özetlediğinde yararlı olabileceğini gösterir; bütün kullanıcıların aynı yolu izleyeceğini kanıtlamaz. Tasarım ekibi bu nedenle geometrik bir göz hareketini varsaymak yerine, ziyaretçinin gerçek görevinde hangi işaretleri aradığını ve hangi kararları vermesi gerektiğini incelemelidir.

Ekipler sayfayı biçimlendirmeden önce neyi kararlaştırmalı?

Ekipler önce açık bir hiyerarşi sözleşmesi yazmalıdır: sayfa kime hangi kararı verdirecek, hangi kanıt hangi iddiayı destekleyecek, seçenekler nasıl karşılaştırılacak ve birincil görev işlemi ne olacak? Örnek sayfanın sözleşmesi, satın almacının uygun destek paketini seçmesine yardım etmek; yeterlilik kanıtını desteklediği iddiayla birlikte tutmak; üç paketi benzer özellik sırasıyla sunmak ve değerlendirme talebini sayfa düzeyindeki ana ilerleme olarak belirlemektir. Bu sözleşme renk, sütun veya kart tarif etmez; tasarım kararlarının savunacağı anlamı tarif eder.

Ardından içerik önceliğini, programatik yapıyı ve görsel sinyalleri birbirinden ayırın. Kaynak sırası, sütunlar ortadan kalktığında da tutarlı olmalıdır: önce yönelim, sonra değerlendirme bağlamı, kanıtın konusu, karşılaştırılabilir paket özellikleri ve ilgili işlem. İçerik sırası anlamı etkiliyorsa en az bir doğru okuma sırası programatik olarak belirlenebilmelidir. Gerçekten bağımsız bölgeler farklı göreli sıralarda anlamını koruyabilir; bu esneklik, masaüstündeki soldan sağa dizilimi otomatik olarak dar görünümün doğru sırası saymak için kullanılamaz.

Görsel sinyaller hiyerarşiyi nasıl görünür kılmalı?

Görsel sinyaller, önceden kararlaştırılmış içerik rollerini birlikte ve tutarlı biçimde açıklamalıdır. “Detaylar” gibi genel başlıklar yerine “Destek düzeyinizi seçin” veya “Yeterlilik koşullarını kontrol edin” gibi bölümün sonucunu öngörülebilir kılan ifadeler kullanın. Başlık boyutu, ağırlık, boşluk, girinti, hizalama, kapsama ve arka plan gruplaması yapıyı algılatabilir; ancak önemli ilişki yalnızca bunlara bırakılamaz. Aynı yapı doğru başlık işaretlemesi, gruplar, etiketler ve metinsel bağlam aracılığıyla programatik olarak da anlaşılabilmelidir.

Tipografi ölçeğini az sayıda, belirgin role dayandırın ve bu rolleri gerçek yazı tipiyle, Türkçe içerikle ve ürünün desteklediği diğer dillerle sınayın. Dar görünümde başlık boyutları değişebilir; değişmemesi gereken, ana başlık, bölüm başlığı, paket adı ve gövde metni arasındaki görev farkıdır. GOV.UK Design System, küçük ekranlarda ölçüleri uyarlarken adlandırılmış rolleri ve dikey ritmi koruyan bir üretim örneği sunar. Bu sistemin değerleri kendi markası, yazı tipi ve test bağlamına aittir; başka bir ürün için hazır eşik değildir.

Aralıkları da “daha çok boşluk daha iyi” anlayışıyla değil, yakınlık ve sınırları açıklamak için kullanın. Bir paketin iddiasıyla kanıtı arasındaki küçük boşluk öngörülebilir kalırken paket grupları arasındaki büyük ayrım dar alana göre azaltılabilir. GOV.UK aralık sistemi bu yaklaşımın tek bir uygulama örneğidir, evrensel ölçek değildir. Ölçek, renk, yerleşim ve kontrast dikkati yönlendirebilir; fakat hangi içeriğin iş bakımından önemli olduğunu belirleyemez. O öncelik, sayfa sözleşmesinden ve kullanıcı görevinden gelmelidir.

Sayfa kanıtı, seçenekleri ve sonraki işlemi nasıl ayırmalı?

Sayfa, kanıtı desteklediği iddiaya yaklaştırmalı, seçenekleri ortak bir karşılaştırma yapısında sunmalı ve sonraki işlemi rolüne göre vurgulamalıdır. Düzeltilmiş geniş görünümde hizmet seçme amacı açılışta baskın olur; yeterlilik kanıtı ilgili iddianın yanında yer alır; üç paket tek, açıkça adlandırılmış karşılaştırma bölgesinde toplanır. Görsel yakınlık yeterli değildir: paket adı, nitelik, değer, kanıt ve işlem arasındaki ilişki programatik yapıdan veya metinden de anlaşılmalıdır. Böylece görsel yerleşim değiştiğinde kanıt yanlış seçeneğe bağlanmaz.

Paketlerin karşılaştırılabilir niteliklerini aynı sırayla verin: kapsam, uygunluk koşulu, destek biçimi ve ilerleme işlemi her pakette benzer konum ve adla bulunmalıdır. Görev kanıtı yoksa yalnızca ticari tercih uğruna bir paketi “önerilen” ilan etmeyin. Paket seçme işlemleri meşru olarak benzer öneme sahip olabilir; bunları paket ayrıntısı bağlantılarından ve sayfa düzeyindeki “Değerlendirme talep et” işleminden ayırın. İşlem etiketi tıklandıktan sonra ne olacağını söylemeli, eşit görsel vurgu ise yalnızca gerçekten eşit görev önemini yansıtmalıdır.

Destekleyici kanıtın ikincil öncelikte olması, küçük ekranda gözden çıkarılabileceği anlamına gelmez. Uzun ayrıntılar yoğunlaştırılabilir veya aşamalı olarak gösterilebilir; fakat tetikleyici açıkça adlandırılmalı, içerik doğru paket ya da iddiayla ilişkisini korumalı ve klavyeyle kullanılabilmelidir. Geniş, dar, yakınlaştırılmış ve doğrusal sunumları yan yana inceleyin. Her birinde kullanıcı kanıtın neyi desteklediğini, paketlerin hangi niteliklerle ayrıldığını ve değerlendirme talebine nasıl ilerleyeceğini ek açıklama olmadan belirleyebilmelidir.

Yerleşim değişirken hangi duyarlı işlemler anlamı korur?

Anlamı koruyan duyarlı işlemler tutmak, istiflemek, taşımak, yoğunlaştırmak ve aşamalı göstermektir; her biri bilgi, işlev, ilişki ve görev önceliği korunuyorsa kullanılmalıdır. Örnek sayfaya dar, tek sütunlu bir temelden başlayın; daha geniş düzenleri yalnızca paket karşılaştırmasını veya kanıt ilişkisini iyileştirdiklerinde ekleyin. Bu, bütün içeriğin her koşulda tek sütun olması gerektiği anlamına gelmez. GOV.UK'nin küçük ekran öncelikli yaklaşımı sınanmış bir sistem örneğidir; onun ızgarası ve ölçüleri başka ürünler için hazır reçete değildir.

• Tutun: Bölgenin içeriği, ilişkisi ve görev rolü yeni sunumda kayıp veya gereksiz iki boyutlu kaydırma olmadan yaşayabiliyorsa yerini koruyun.
• İstifleyin: Bağımsız ya da doğru sıraya konmuş bölgeler tek eksenli okumada anlaşılır ve kullanılabilir kalıyorsa alt alta dizin.
• Taşıyın: Yeni programatik okuma sırası geçerliyse ve etiketler, kanıtlar, değerler ile işlemler bağlamını koruyorsa bölgenin yerini değiştirin.
• Yoğunlaştırın: Tekrarlanan veya daha düşük öncelikli sunumu kısaltın; temel bilgi ve işlevi kaldırmayın.
• Aşamalı gösterin: Ayrıntıyı gizlemek için değil, açık tetikleyici ve korunmuş ilişkiyle yönetilebilir kılmak için kullanın.

WCAG yeniden akış rehberliği, tanımlanan test koşullarında bilgi veya işlev kaybı olmadan ve olağan okuma için iki boyutlu kaydırma gerektirmeden sunumu hedefler. Bununla birlikte bazı veri tabloları gibi anlamı ya da işlevi iki boyuta bağlı içerikler için istisna vardır. Böyle bir yapıyı safça tek sütuna parçalamak yerine karşılaştırmayı koruyan işlevsel bir çözüm tasarlayın. Karmaşık bileşenler de yalnızca yeniden dizilmekten fazlasını gerektirebilir. Sıra anlamı etkiliyorsa duyarlı yer değiştirme, programatik olarak belirlenebilen en az bir doğru okuma sırasını korumalıdır.

Duyarlı hiyerarşi, masaüstü kutularının hangi sırayla çöktüğü değil, anlamın hangi sırayla hayatta kaldığıdır.

Ekipler hiyerarşiyi nasıl denetlemeli ve yönetmeli?

Ekipler hiyerarşiyi dört soruluk sözleşmeyi geniş, dar, yakınlaştırılmış ve doğrusal sunumlarda aynı görevle sınayarak denetlemelidir. Geniş görünümde tasarım açıklanmadan bir değerlendiriciden sayfanın amacını, ilgili yeterlilik kanıtını, üç paket seçeneğini ve değerlendirme talebi işlemini göstermesini isteyin. Aynı soruları dar ve yakınlaştırılmış görünümde tekrarlayın. İçerik kaybı, iki boyutlu kaydırma, iddiadan kopmuş kanıt, bozulan karşılaştırma, yarışan işlemler ve yığının derinine gömülen sonraki adım, görünür fakat farklı nedenlere sahip başarısızlık işaretleridir.

1. Sayfanın amacı, kanıtı, seçenekleri ve sonraki adımı açıklama yapılmadan bulunabiliyor mu kontrol edin.
2. Dar ve yakınlaştırılmış görünümde bilgi, işlev, ilişki ve işlem bağlamının korunup korunmadığını inceleyin.
3. Görsel kompozisyondan bağımsız doğrusal ve programatik okuma sırasını izleyin; başlıkların bölümlerini doğru açıklamasını doğrulayın.
4. Temsilî alıcılarla görev oturumları yürütün; yön bulma, kanıtı bulma, gerekli nitelikleri karşılaştırma ve ilerleme davranışını gözleyin.
5. Tekrarlanan sorunları içerik modellerine, şablonlara, bileşenlere, inceleme ölçütlerine ve yayın kontrollerine dönüştürün.

WCAG uygunluğu erişilebilirlik bakımından gereklidir; kullanıcının sayfayı anladığını veya hedef görevi tamamlayabildiğini tek başına kanıtlamaz. Bu nedenle tasarım tartışmasının kapanış sorusu “Hangisi daha iyi görünüyor?” değil, “Hangi çözüm sözleşmeyi temsilî görevde gözlenen sonuçla daha iyi koruyor?” olmalıdır. Ekipte yeterli kanıt yoksa ya da ilişkileri ve duyarlı davranışı güvenle değerlendiremiyorsa erişilebilirlik veya kullanıcı araştırması uzmanlarını sürece katın. Yönetim kuralı nettir: her sayfa düzeyi hiyerarşi kararı, sözleşme, temsilî kullanıcı görevi ve gözlenen sonuçla savunulabilmelidir.