#ux

İyi Bir Header Tasarımı İçin Tavsiyeler

Herkes biliyor ki ilk intibayı değiştirmek inanılmaz zordur. (belki ikinci bir şans yoktur bile denilebilir.) Bu durum dijital dünyada ise çeşitlilik ve rekabetten dolayı imkansıza yakındır. O yüzden kullanıcıya (özellikle yeni kullanıcıya) yaratacağınız ilk intiba çok önemlidir ve haliyle bu intiba yaratma işinde web sitenizin belli bölümlerinin daha çok etkisi vardır, belki de header tasarımı da bunun en önemli kısmıdır.

Bu yazımda bunlardan biri olan, daha önce de Web Tasarım Sözlüğü‘nde kısaca değindiğim, header’dan bahsedeceğim ve header tasarımı yaparken kullanabileceğiniz bazı ipuçları vereceğim.

Header nedir?

Header, basitçe, bir web sayfasının en üstteki kısmıdır. Sayfaya ilk girişte, daha ilk saniyede, kaydırma yapmadan gördüğünüz şeydir. Bu haliyle epeyce stratejik bir durumu vardır.

Header, genelde “menü” olarak anılsa da aslında çok daha fazla şey barındırır bünyesinde. Bir örnek ile inceleyelim.


Nasıl gözüktüğünü bir kenara bırakıp yalnızca barındırdıklarına bakıyoruz. En üstte logo, menü ve giriş butonu bulunuyor. Hemen altında da büyükçe bir görselle (belki slider da olabilir) açıklamalar ve hemen altında da kullanıcıyı etkileşime çağıran bir buton bulunuyor. En altta ise sayfayı kaydırabildiğimizi belirten bir de küçük aşağı yönlü ok bulunuyor. 

Bir header’da neler bulunur?

Header bir çok şeyi barındırabilir;

  • marka kimliği. Marka kimliği çok geniş bir içeriği kapsıyor aslında. Haliyke header e bütün bir marka kimliğini koymak hem manasız hem de imkansızdır. O yüzden marka kimliğinin logo, marka adı, slogan, maskot, kurumsal renkler gibi temel unsurları koymak gerekir.

  • Ürün ya da hizmetin temasını ve amacını belirten küçük bir alan.

  • sayfalara ve içeriğe bağlantılar

  • sosyal medya bağlantıları

  • telefon numarası, elektronik posta gibi temel iletişim bilgileri

  • eğer arayüz çok dilli ise dil değiştirme bileşeni

  • arama alanı

  • abonelik alanı

  • sepet ve istek listesi

  • bir yazılımsa indirme, uygulama mağazası, deneme sürümü gibi bağlantılar


Yukarıdaki tüm bileşenleri bir header tasarımı yaparken mutlak kullanmaya gerek yok haliyle. Ama isterseniz tabi koyabilirsiniz tamamen sizin tercihiniz; ama böyle bir durumda bilgi yüklemesi olacak. Çok daha fazla bileşenin olması ilk bakışta daha fazla şey aktarıyormuş hissiyle iyi görünebilir ancak kullanıcının dikkatini asıl yoğunlaşması gereken bileşenlerden uzaklaştırır. O yüzden header tasarımı yaparken en başta iyi bir strateji yapmalısınız.



Header neden önemlidir?

Header kısmının birden fazla önemi vardır. 

Göz önünde bulundurulması gereken ilk şey, kullanıcıların bir web sayfasıyla ilk saniyede nasıl etkileşimde bulunduğunu gösteren göz tarama modelleri. İnsanlar bir siteye giriş yaptıklarında ilk yaptıkları şey tüm içeriği taramaktır. Detaylı inceleme yapmadan önce istemli ya da istem dışı olarak içeriği genel olarak tararlar. Kendilerini bu web sitesinde zaman geçirmeye ikna edebilecek bir şey ararlar. İşte bu noktada kullanıcıyı ikna etmek konusunda en büyük rol header’a düşüyor. 

Okunabilirlik ve Hiyerarşi

Okunabilirlik gördüğünüz gibi yine karşımıza çıktı. Bir web sitesinin ilk amacı, kullanıcıya amacını anlatmaktır. Bir ürün mü tanıtıyor? Bir hizmetten mi haberdar ediyor? Bir sosyal sorumluluk projesine destek mi arıyor? Bunların tamamını, web sitelerinin çoğu metin içeriklerle kullanıcıya ulaştırır. O yüzden okunabilir olmak bir web sitesinin, tüm bileşenleri için, olmazsa olmazdır. 

Okunabilirliği artırmak için özellikle renk ve tipografi konusunda çok dikkatli olmalısınız.


Kullanıcılar, genel olarak üç şekilde web sitelerinde tarama yaparlar. Bunlar “F-modeli”, “Z Modeli” ve “Gutenberg Modeli” olarak adlandırıyoruz. Bu modellemeler ile kullanıcıyı tanıyarak arayüzünüzün başarısına katkıda bulunabilirsiniz.


header tasarımı

Bu model, daha çok bilgi ve metin, daha az görsellik barındıran durumlarda genellikle kullanılıyor olan tarama modelidir. Klasik şekilde, dört köşeye yerleşmiş olan noktalar arasında, soldan sağa, oradan da yine sol alta ve tekrar sağa doğru devam eden bir tarama biçimidir. Bu bir web sitesi de olabilir, bir afiş de olabilir, bir kitap da olabilir. İnsanlar çoğunlukla bu modeli kullanırlar.


header tasarımı

Z-Modeli’yle ise Gutenberg modeline oranla daha fazla görsellik barındıran durumlarda karşılaşıyoruz. Tarama yönü Gutenberg modeli gibi soldan sağa ve aşağı yönlü olsa da, görsel oranı daha fazla ve içerik daha çok bölündüğü için yönlenme sayısı da fazla olacaktır.



header tasarımı

Diğer bir model olan F modelinde ise kullanıcı içeriği soldan sağa düz bir şekilde tarar. Sonrasında sayfayı aşağı yönde hareket ettirir ve bu sırada yukarıdan aşağı içeriğin sol kısmını dik bir şekilde tarar. Sonrasında yine soldan sağa bir hareket yapıp, yine aynı şekilde yukarıdan aşağı dik bir tarama yapar. Özellikle arama motoru sonuçlarında rastlanılan bir tarama modelidir. (Bu tarama modelleri ile ilgili yakında daha detaylı bilgi vereceğim.)

Özetle; header’in önemi bir web arayüzü için tartışılmaz şekildedir. Saniyeler içinde karar veren kullanıcıyı “burada kalmalısın” diye ikna edici bir görevi vardır. Bununla beraber bir web arayüzü için header bölümü bir zorunluluk değildir tabi. Header’in işlevini başka yaratıcı yollarla karşılayan örnekler de mevcut. Ama header’in olup olmaması da, olursa nasıl olması gerektiği de diğer her şey gibi bir araştırma ve analiz sonucunda karar verilmesi gereken şeylerdir.