Web Sitesinde Logo Yerleşimi: Sol Üst Köşeden Sonrası

Logonun yeri tartışmalı bir konu gibi görünür, oysa sorunun büyük kısmı çoktan çözülmüş: sol üst köşe. Asıl iş logoyu oraya koyduktan sonra başlıyor. Bağlantı nereye gidiyor, ekran okuyucu ne okuyor, karanlık temada logo kayboluyor mu? Bu üç soruyu atlayan bir başlık, doğru konumda dursa bile işini yapmıyor.

Sol üst köşe neden yerleşti

Soldan sağa okunan dillerde göz sayfaya sol üstten giriyor. Kullanıcı ilk saniyede bilinçli bir arama yapmadan "hangi sitedeyim" sorusunu cevaplıyor, sonra gezinmeye geçiyor. Logonun oraya konması bu sıralamayı bozmadan çalışıyor.

İkinci ve aslında daha güçlü sebep alışkanlık. Kullanıcı zamanının neredeyse tamamını sizin siteniz dışında geçiriyor, dolayısıyla beklentilerini başka sitelerde oluşturuyor. Jakob Nielsen bunu yirmi yıl önce yazdı ve o gün bugündür değişen bir şey olmadı: kullanıcılar çoğunluğun yaptığını doğru kabul eder. Sol üst köşe doğru olduğu için değil, herkes orada yaptığı için doğru.

Bu konuda dolaşan yüzdelere dikkat edin. "Sol üstte marka hatırlanma oranı %89" gibi cümleler tek bir küçük laboratuvar çalışmasından çıkıp kaynağını kaybederek yayılıyor, üstelik ölçülen şey genelde birkaç dakika sonra yapılan bir hatırlama testi oluyor. Yönü güvenilir, rakamı değil. Kararınızı rakama dayandırmanız da gerekmiyor zaten.

Logo bir görsel değil, bağlantıdır

Logo ana sayfaya giden bir bağlantıdır ve bu beklenti o kadar yerleşiktir ki karşılanmadığında kullanıcı sitede kaybolur. Ana sayfanın kendisinde de bağlantıyı kaldırmayın; tıklayan kişi sayfayı yeniler, kaybı yok, kuralın tutarlılığı kazanılır.

Asıl karıştırılan nokta alt metni. Yaygın tavsiye "alt metni mutlaka doldurun" şeklinde ama bu kural burada ters tepiyor. İki durum var:

• Bağlantının içinde sadece logo görseli varsa, alt metni marka adı olur.
• Logonun yanında site adı ayrıca yazıyla duruyorsa, görselin alt metni boş kalır (alt=""). Doldurursanız ekran okuyucu bağlantıyı "Kullanıcı Deneyimi Kullanıcı Deneyimi" diye okur.

Bir de temaların sevdiği bir hata var: logoyu CSS ile background-image olarak basmak. Görsel ekrandadır, erişilebilirlik ağacında hiçbir şey yoktur, ekran okuyucu kullanıcısı sitenin adını hiç duymaz. Logo gerçek bir <img> etiketi olsun.

Dosya biçimi, karanlık tema ve kayan başlık

Logo vektörel bir çizim olduğu için SVG ilk tercih. Rasterleştirilmiş bir logonuz varsa şeffaf PNG kullanın ve gösterilen boyutun iki katı çözünürlükte hazırlayın, yoksa yüksek yoğunluklu ekranlarda kenarlar dağılır.

Karanlık tema gelince çoğu site takılıyor: koyu renkli logo siyah zeminde yok oluyor. Bunun için tema eklentisine ya da JavaScript'e gerek yok, iki dosya ve üç satır yetiyor:

<picture> <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)"> <img src="/logo.svg" width="160" height="40" alt="Site adı"> </picture>

Oradaki width ve height tesadüfen yazılmadı. Boyut vermezseniz tarayıcı logo inene kadar başlığa yer ayırmaz, görsel gelince başlığın altındaki her şey aşağı kayar. Kullanıcının siteyi ilk gördüğü an tam da o an. İlk izlenimi logonun tasarımı değil, sayfanın zıplaması belirler.

Sağdan sola diller ve kuralın istisnaları

Arapça veya İbranice bir sürüm çıkaracaksanız logo sağ üste geçer, çünkü orada sayfanın girişi sağ üsttür. Ayrı bir şablon tutmanıza gerek yok: kök öğeye dir="rtl" verip yerleşimde margin-left yerine margin-inline-start gibi mantıksal özellikleri kullanırsanız başlık kendiliğinden dönüyor.

Peki sağ üst ya da ortalanmış logo hiç mi olmaz? Olur, ama dar bir yerde: gezinme yükü zaten sıfıra yakın olan portföy siteleri, tek sayfalık kampanya sayfaları, sunum niteliğindeki mikro siteler. İçerik sitesinde, e-ticarette veya birden çok bölümü olan kurumsal sitede aynı şeyi yapmak kullanıcıya hiçbir şey kazandırmıyor, oryantasyonu ise gerçekten zorlaştırıyor. Özgün görünme isteği sol üst köşeyi boşaltmaya değmez; özgünlüğü logonun kendisine saklayın.