Dil seçici tasarımı.
Dil seçici, kullanıcının sitenin hangi dil sürümünde olduğunu görmesini ve başka bir sürüme geçmesini sağlayan arayüz bileşenidir.
Küçük bir bileşen ama çok dilli bir sitede en sık kullanılanlardan biri ve yanlış tasarlandığında kullanıcıyı doğrudan kaybettiriyor. Bir kullanıcı aradığı dili bulamazsa siteden çıkıyor — başka bir yol denemiyor.
İyi bir dil seçicinin üç işi var: hangi dilde olduğunu göstermek, hangi dillerin mevcut olduğunu göstermek, ve seçim yapıldığında AYNI SAYFANIN o dildeki karşılığına götürmek.
Üçüncü iş en çok atlananı
Çoğu sitede dil değiştirmek kullanıcıyı ana sayfaya atıyor. Kullanıcı bir hizmet sayfasını okuyor, dili değiştiriyor, ve kendini ana sayfada buluyor — aradığı sayfayı yeniden bulmak zorunda kalıyor.
Doğru davranış, mevcut sayfanın hedef dildeki karşılığına gitmek. Karşılık yoksa — o sayfa o dilde henüz yoksa — kullanıcıya bunun söylenmesi ve bir alternatif sunulması gerekiyor; sessizce ana sayfaya atmak değil.
Bu sitede dil bağları her sayfada o sayfanın karşılıklarına işaret ediyor ve bağlar hreflang kümesiyle aynı kaynaktan üretiliyor. Yani arayüzdeki bağ ile makine katmanındaki bildirim ayrışamıyor.
Bayrak kullanmayın
Yaygın ve zararlı bir kalıp: dilleri bayraklarla göstermek. Bayrak bir ülkeyi temsil ediyor, bir dili değil — ve ikisi neredeyse hiç örtüşmüyor.
Almanca hangi bayrak? Almanya, Avusturya ve İsviçre'nin üçü de Almanca konuşuyor. İngilizce hangi bayrak? Onlarca ülke. Ve tersi: bir ülkede birden fazla resmî dil olabiliyor.
Doğru gösterim dilin kendi adı, kendi dilinde yazılmış hâli. Bir Alman kullanıcı «Almanca» yazısını okuyamıyor ama «Deutsch» yazısını tanıyor. Bu sitede üç dil kendi adlarıyla listeleniyor.
Bayrak bir ülkeyi temsil eder, bir dili değil — ve ikisi neredeyse hiç örtüşmez.
Erişilebilirlik
Dil seçici birkaç erişilebilirlik gereksinimi taşıyor ve hepsi ucuz.
- Her bağ hedef dilin etiketini taşımalı — ekran okuyucu o bağın nereye gittiğini söyleyebilmeli.
- Bağ metni hedef dilde olmalı ve o dil bildirilmeli — yoksa okuyucu yanlış telaffuz eder.
- Mevcut dil işaretlenmeli — hangisinde olunduğu görsel olduğu kadar programatik de belli olmalı.
- Dokunma hedefi yeterli olmalı — iki harflik kısaltmalar doğal olarak küçük hedefler üretir.
- Klavyeyle erişilebilir olmalı — açılır bir seçiciyse tuş sözleşmesine uymalı.
Dördüncü madde bu sitede ölçülerek ele alındı: iki harflik dil etiketleri dolgu ile 44 piksellik hedeflere çevrildi ve doğrulama süiti mobil kırılımda bunu ayrıca ölçüyor.
Yerleşim ve görünürlük
Dil seçicinin nerede duracağı da bir karar ve iki yaygın yerleşim var. Üst şeritte durması en yaygın: kullanıcı sayfaya girdiğinde hemen görüyor ve dil yanlışsa anında düzeltebiliyor.
Alt bilgide durması ise daha az müdahaleci ama daha az bulunabilir. Yanlış dilde bir sayfaya düşen bir kullanıcı, alt bilgiye kadar kaydırmak yerine genelde siteden çıkıyor.
Pratik denge: üst şeritte, ama ölçülü. Büyük bir bileşen olmasına gerek yok — üç dilli bir sitede üç kısa etiket yeterli. Çok dilli büyük sitelerde ise açılır bir seçici kaçınılmaz oluyor ve o zaman klavye sözleşmesine uyması gerekiyor.
- Üst şeritte, her sayfada görünür — en güvenli yerleşim.
- Mevcut dil işaretli — hem görsel hem programatik olarak.
- Dil adları kendi dillerinde — «Deutsch», «Türkçe», «English».
- Bayrak yok — bayrak ülkeyi temsil eder, dili değil.
- Aynı sayfaya götürür — ana sayfaya atmak en sık yapılan hata.
- Dokunma hedefi ≥44px — iki harflik etiketler doğal olarak küçük.
Beşinci madde kullanıcı deneyimi açısından en belirleyici olanı ve teknik olarak en çok emek isteyeni: her sayfanın her dildeki karşılığının bilinmesi gerekiyor. Bu bilgi zaten hreflang kümesinde var — arayüz bağlarının aynı kaynaktan üretilmesi, ikisinin ayrışmasını da engelliyor.
Bu sitede tam olarak öyle: dil bağları ve hreflang bildirimleri aynı rota haritasından çıkıyor. Bir sayfa bir dilde yoksa o dil ne bağda ne kümede görünüyor.
Karşılığı olmayan sayfa
En zor senaryo, kullanıcının bulunduğu sayfanın hedef dilde karşılığının olmaması. Dil seçici o durumda ne yapmalı? Üç davranış var ve ikisi kötü.
Kötü olan birincisi: bağı yine de göstermek ve kullanıcıyı 404'e götürmek. Kötü olan ikincisi: sessizce ana sayfaya atmak — kullanıcı ne olduğunu anlamıyor ve yerini kaybediyor.
Doğru davranış, o dili seçenekler arasında hiç göstermemek ya da gösterip ne olacağını söylemek. Bu sitede birinci yol uygulanıyor: bir sayfa bir dilde yoksa o dil o sayfanın seçicisinde görünmüyor — ve hreflang kümesinde de yok. İki davranış aynı kaynaktan geliyor.
Karar sade bir sonuç veriyor: seçicide görünen her bağ çalışıyor. Kullanıcı hiçbir zaman ölü bir dil bağına tıklamıyor ve hiçbir zaman beklenmedik bir sayfaya düşmüyor.
Alternatif — bağı gösterip «bu sayfa o dilde yok, ana sayfaya gitmek ister misiniz» demek — daha bilgilendirici ama bir arayüz katmanı gerektiriyor. Küçük sitelerde birinci yol yeterli ve daha sade.
Son bir ölçüm notu: dil seçicinin gerçekten kullanılıp kullanılmadığı ölçülebiliyor. Hiç tıklanmıyorsa ya kimse başka dil aramıyor ya da seçici bulunamıyor — ve ikisi çok farklı sonuçlar gerektiriyor. Ölçüm olmadan hangisi olduğu bilinemiyor.
Son bir kalıp uyarısı: dil seçiciyi bir açılır menüye gizlemek, üç dilli bir sitede gereksiz bir tıklama ekliyor. Üç kısa etiket yan yana durabiliyor ve tek tıklamayla geçiş sağlıyor.
Açılır menü ancak dil sayısı beşi geçtiğinde gerekli hâle geliyor — ve o zaman da klavye sözleşmesine uyması, odak yönetimini doğru yapması ve Escape ile kapanması gerekiyor.