Girişimcilere yönelik markalaşma, web tasarım ve dijital pazarlama rehberi...

    korhan.blog

    Bir Web Sitesinde Üstbilgi/Header Nedir ve Nasıl Olmalıdır?

    Bir Web Sitesinde Üstbilgi/Header Nedir ve Nasıl Olmalıdır?

    Üstbilgi/Header Nedir?

    Geçmişte, web tasarımında “üstbilgi/header” dendiğinde genellikle logoyu, gezinme çubuğunu ve belki de bazı iletişim bilgilerini ve arama çubuğunu içeren web sitelerinin en üstünde bulunan sabit şerit akla gelirdi.

    Günümüzde, “üstbilgi/header” terimi bahsi geçenler dışında, ana sayfanızda ziyaretçiyi karşılayan, görünür tüm alan için kullanılmaktadır.

    Bir kullanıcı; sitenize sosyal medyada paylaşılan bir blog gönderisinden veya arama motoru sonuçlarından ulaşmadığı sürece, adres satırına sizin alan adınızı yazarak ana sayfanızdan sitenize giriş yapacaktır. Ayrıca diğer yollarla sitenize ulaşan kullanıcıların da web sitenizin neyle ilgili olduğunu anlamak ve daha fazla bilgi sağlamak adına bakacakları ilk yer yine ana sayfanız olacaktır. Ana sayfanıza göreceği ilk ekran “üstbilgi/header” bölümü olacaktır ve bu bölüm web sitenizin en önemli bölümüdür.


    Eğlenceli Bilim web sitesi için tasarladığım üstbilgi/header örneği

    Üstbilgi/Header Neden Önemlidir?

    Kullanıcı web sitesini özellikle de ilk kez ziyaret ettiği zaman, sayfadaki her şeyi dikkatlice ve ayrıntılı olarak incelemez. Sadece dikkatini çekecek ve web sitesinde biraz zaman geçirmeye ikna olabileceği bir şeyler bulmak için tarama yapar.

    Üstbilgi/Header bölümü kullanıcıyla karşılaştığımız ilk bölümdür ve ilk izlenim her zaman çok önemlidir.

    Kullanıcının göz taraması hakkında veri toplayan farklı deneyler yapılmıştır ve genellikle web sitesini taradığı çeşitli tipik modellerin olduğu sonucuna varılmıştır. Bu 3 tasarım düzeniyle ilgili makalede, yazar Steven Bradley, şu ortak modellerden bahseder: Gutenberg Diyagramı, Z-Modeli ve F-Modeli.

    Her Web Tasarımcının Bilmesi Gereken 3 Temel Tasarım Deseni

    Unutma kullanıcının sitenin “üstbilgi/header” bölümüyle karşılaştıktan sonra ekranı kaydırmasını veya daha ileri gidip bir bağlantıya tıklamasını sağlamak için yaklaşık 10 saniye gibi bir süren vardır ve hikayeni bu süre içinde hızlı ve doğru şekilde anlatman gerekir.

    Üstbilgi/Header Nasıl Tasarlanmalıdır?

    Çoğu kullanıcının, bir web sitesinin neyle ilgili olduğuna dair kuş bakışı bilgi sağlamak amacıyla ilk olarak kullandığı yerin ana sayfa olduğunu öğrendik ve bunu bilerek bu fırsatı değerlendirmemek ve bu fırsattan yararlanmamak pek de doğru olmaz.

    “Üstbilgi/Header”; bir web sitesinin beklentilerini karşılamak, kullanıcı deneyimini biraz daha öngörülebilir hale getirmek ve etkileşim oranını etkili bir şekilde arttırabilmek amacıyla tasarlanmalıdır.

    Kullanıcı, bir web sitesinin içeriği hakkında daha fazla bilgi edinmek isterse bunu sayfayı aşağı kaydırarak veya bir tıklama yoluyla yapması gerektiğini bilir. Bu deneyimler ve yetenekler kullanıcılarda zaman içinde oluşur ve bunları değiştirmek çok da kolay değildir. (Ör: Facebook bazen yeni bir kullanıcı deneyimi geliştirdiğinde önce tepki çeker, sonra insanları bu yeni deneyime alıştırır ve sonunda kabullenip bu yeni deneyimi kullanmaya başlarız. Kaydırma deneyimi tıklamaya göre artık mobil cihazlar yüzünden daha çok kullanılan bir deneyim haline gelmiştir ve bu deneyimler tasarımları da bu yönde etkilemiştir.) Biz, kullanıcıların yeteneklerinin ve deneyimlerinin ne yönde gelişmiş olduğunu biliyoruz ve tasarım yaparken bu yetenekleri her zaman göz önünde bulundurmak durumundayız.


    Phoenix Tasarım Kampı için hazırladığım üstbilgi/header örneği

    Üstbilgi/Header İçeriğinde Neler Olmalıdır?

    Elbette, ana sayfa üstbilgi/header tasarımınız markanıza özgü olabilir, ancak içeriğinde bulunan öğeler gerçekten orda olmalı mı konusu mutlaka sorgulanmalıdır. Buraya koyacağınız gereksiz her içerik kullanıcının asıl ulaşmasını istediğiniz yere varmasını engelleyen bariyerlere dönüşebilir.

    Üstbilgi/header içeriğinde bulunan öğeler gerçekten orda olmalı mı konusu mutlaka sorgulanmalıdır.

    Üstbilgi/Header bölümünde sıklıkla kullanılan içerik çeşitleri şu şekildedir:

    • Marka kimliğinin temel unsurları: Logo, marka adı, slogan, renkler vb.,
    • Gezinim menüsü ve başlıklar: ana menü, alt menüler, cta menu, top menu vb.,
    • Sunulan ürün veya hizmetin ana hatlarını veren metin bloğu,
    • Fotoğraf, video, slayt gösterimi, arkaplan görselleri,
    • Web sitesinin temel kategorilerine bağlantılar,
    • Sosyal ağlara bağlantılar,
    • Temel iletişim bilgileri: Adres, telefon, e-posta vb.,
    • Çok dilli arayüz durumunda dil seçicisi,
    • E-ticaret siteleri için alışveriş sepeti butonu ve para birimi çevirici,
    • Arama alanı,
    • Abonelik alanı,
    • Kullanıcıyı bir eyleme yönlendiren (form doldurma, ürün indirme, satın alma vb.) Call-To-Action (Eyleme Çağrı) butonu,
    • İletişim Formu

    Bu listeye göre, hangi tür içeriklerin senin web sitene uygun olacağını daha net bir şekilde düşünüp karar verebilirsin.

    Özet

    Üstbilgi/Header bölümünü, “Nedir?”,  “Neden önemlidir?”,  “Nasıl Tasarlanmalıdır?” ve “İçeriğinde Neler Olmalıdır?” başlıkları altında kısaca inceledim. Bu incelemenin, yeni web sitesi projelerine başlayacak girişimcilere, projeye başlarken ve içerik oluştururken fikir vermesi dileğiyle.

    İncelemeyi yaparken daha önceden hazırlanmış ve derlenmiş bazı dış kaynakları inceledim ve kendi deneyimlerinden faydalandım.

    Kaynaklar

    https://extendthemes.com/website-headers/
    https://tubikstudio.com/best-practices-for-website-header-design/
    https://www.designyourway.net/drb/30-interesting-examples-of-headers-in-web-design/
    https://premium.wpmudev.org/blog/website-headers-inspiration/
    http://vanseodesign.com/web-design/3-design-layouts/

     

    Yazının içeriğini aynı şekilde veya dilediğin gibi düzenleyip istediğin yerde -bu sayfaya bağlantı vermek koşuluyla- paylaşabilirsin. 

    Bu yazıya eklenmesini düşündüğün başka bir başlık varsa, içeriğin hatalı veya eksik olduğunu düşünüyorsan, yazıya eklememi istediğin detaylar varsa, anlaşılmayan bişey olduysa veya herhangi bir konuda sorun veya yorumun varsa aşağıdaki alanı kullanarak iletebilirsin.

    Bir Web Sitesinde Olması Gereken 6 Temel Unsur

    Bir Web Sitesinde Olması Gereken 6 Temel Unsur

    Yeni bir web sitesi hazırlama söz konusu olduğunda elbette ki her web tasarımcı farklı bir plana ve bakış açısına sahip olabilir; ancak hepsinin kullandığı temel ve ortak bir kontrol listesi vardır. Yeni bir web sitesi tasarım işinin başında, web tasarımcısına bu listedeki bilgileri teslim etmek gerekir ve temelde web sitesi hazırlama işinin en uzun süreçlerinden biri bu bilgileri hazırlamaktır. Baştan doğru içeriği oluşturmak ve tüm tasarımı bu içeriğe göre şekillendirmek projenin doğru yönetilmesi konusunda etkilidir, iletişimi kuvvetlendirir ve daha sonra oluşabilecek zaman kayıplarını önceden engelleyebilir.

    Doğru içeriği oluşturmak iletişimi kuvvetlendirir ve daha sonra oluşabilecek zaman kayıplarını önceden engelleyebilir.

    Sen de ister bir tasarımcı, ister web sitesi ihtiyacı duyan bir girişimci ol; web sitesi çalışmasına başlamadan önce bu 6 temel unsuru hazırlaman gerektiğini bilmelisin! Şimdi kaçınılmaz olarak her web sitesinin içermesi gereken bu unsurları birlikte inceleyelim.

    Üstbilgi/Header

    Bir web sitesinde üstbilgi, her sayfanın üst kısmında yer alır ve bazı önemli amaçlara hizmet ederken logonuz için bir yer sağlamaktan çok daha fazlasını yapar. Tüm web sitelerinde benzer ve belirli özelliklere sahip olsa da iyi bir üstbilgi tasarımı, siteyi farklılaştırabilir. Ancak tutarlı bir kullanıcı deneyiminin parçası olarak belirlenen temel özelliklerin çok da fazla dışına çıkılması önerilmez.

    Bir Web Sitesinde Üstbilgi/Header Nedir ve Nasıl Olmalıdır?

    Üstbilgi içeriğinde en temel olarak logo ve ana menü kullanımının yanında slogan, arama butonu, acil iletişim telefonu, alışveriş sepeti bağlantısı, sosyal medya bağlantıları, kayıt/giriş profil bağlantıları, kullanıcı uyarıları vs. gibi ögeler ve menüyle bütünleşik bir karşılama görseli de yer alabilir.

    Albania Yatçılık Hizmetleri web sitesi için hazırladığım üstbilgi/header örneği

    Bu bölümün bir kısmı genellikle web sitesinde yer alan tüm sayfalarda sabittir, ancak bazı tasarımlar sitenin alt sayfalarında biraz farklılık gösterebilir.

    İyi bir üstbilgi/header alanı, web sitesinde daha kolay gezinme deneyimi sağlamanın yanında etkili bir ilk izlenim bırakmalıdır.

    Üstbilgi bölümünün en temel bileşeni olan ana menü web sitende dolaşımı sağlamak amacıyla kullanılan en temel araçtır. Bu bağlantı aracı için çeşitli stiller mevcut olmasına karşın, hepsi temelde ağaç yapısında katmanlı bir listedir. Web sitende dolaşmayı ve içerik başlıklarının listelenmesini sağlayan bu ağaç yapısındaki liste için doğru başlıkları seçmek önemlidir.

    Menüyü hazırlarken ilk olarak web sitesinde sunulmak istenen tüm başlıklarla ilgili kapsamlı bir liste hazırlanır. Liste çok uzunsa mutlaka gruplama yapılmalıdır. Listeyi alt gruplara ayırmak, önemine göre ikiye bölmek gibi seçenekler değerlendirilebilir.

    Menüler sitenin üst bölümünde (header), alt bölümünde (footer) veya yanda (sidebar) yer alabilir.

    Menü başlıkları belirlendikten sonra bu başlıkların arasında da mutlaka yer alması gereken “İçerik” bölümünden bahsedelim.

    İçerik

    Bu temel unsurun bir web sitesinin başarısı için en önemli etken olduğunu söylemek yanlış olmayacaktır. İyi bir web sitesinin anahtarı, ziyaretçilerin istediği ve alakalı içeriği sunmaktır ve yüksek kaliteli içeriğin daha iyi bir alternatifi yoktur. İster ziyaretçilere faydalı bilgi sunmak için yazılar yazın, ister hizmetlerinizi anlatın, ister işlerinizi, ister ürünlerinizi sunun, yalnızca kaliteli içerik ziyaretçilerle etkileşim kurabilir.

    Yüksek kaliteli içerikler, ziyaretçilerinizin işiniz hakkında daha fazla bilgi sahibi olmalarını ve hizmetlerinizden zevk almalarını, ürünlerinizi kullanma ve satın alma vb. olasılıklarını arttıracaktır.

    Bir web sitesinin içeriği, ziyaretçinin “Benim için neyiniz var?” sorusuna cevap vermelidir.

    Eyleme Çağrı (Call-To-Action)

    Bir web sitesinde ziyaretçiyle etkileşimi gerçekleştiren ve bunu bir eyleme dönüştüren açık, vurucu ve güçlü yönlendirmelerdir. Eyleme çağrı bir ziyaretçinin sitenize girdikten sonra onu yönlendirmek istediğiniz ve gerçekleştirmesini beklediğiniz eylemdir. Çoğu zaman web sitesinin tüm hazırlanma amacı bu eylemi gerçekleştirmek olabilir ve çoğu durumda bir web sitesi için eyleme çağrı yönlendirmesi; satış yapmak veya bilgi toplamak amacıyla kullanılmaktadır.

    Eyleme çağrı yönlendirmelerine ilişkin “Şimdi Satın Al”,  “Hemen Teklif Al”, “Hemen Katılın”, “Ücretsiz İndirin”, “Bedava Üye Olun” gibi cümleler örnek gösterilebilir.

    Lindo Studio web sitesi için kullandığım Call-To-Action örneği. Ekranın sağ alt kısımda sabit olarak bulunan “Teklif Al” butonu.

    Eyleme çağrı bağlantısının; web sitesinde her an görünebileceği ve ziyaretçinin istediği her an, en kısa yoldan bu yönlendirmeye ulaşabileceği bir yerde olması tercih edilir.

    İletişim

    İletişim bölümü bir web sitesinin olmazsa olmaz önemli bir unsurudur. Kullanıcıların yetkili kişiye/kişilere kolaylıkla ulaşabileceği bilgileri içermelidir. Adres ve telefon bilgisi paylaşmak her ne kadar çok tercih edilmese de kurumsallık ve güvenilirlik açısından önemli olabilir. Bunun yanı sıra e-posta adresleri, iletişim formu, harita veya sosyal ağ bağlantıları “İletişim” bölümünde tercih edilebilecek diğer sık kullanılan araçlardır.

    İletişim bilgilerinin sitede kolaylıkla görünebilecek veya ulaşılabilecek bir yerde olması gerekir. Kullanıcıların sizi bulmak istemeleri durumunda iletişim bilgilerine kolayca ulaşamamaları onlara sinir bozucu gelebilir.

    Miraj Otomotiv web sitesi için hazırladığım iletişim bölümü örneği

    İletişim bilgileri sitenin üst bölümünde (header), alt bölümünde (footer) veya bir menüden tıklanarak açılacak özel bir sayfada paylaşılabilir. “İletişim” bölümü için bazen ayrı bir sayfa kullanmak yerine “Hakkında” sayfasında paylaşıldığı da görülmüştür.

    Şimdi de “Hakkında” bölümüne hızlı bir göz atalım.

    Hakkında

    Her ne kadar büyük ve zaten bilinen markalar için çok önemli olmasa da bilinmedik bir isim veya marka için oldukça önemli bir unsurdur. Bu bölümde felsefe, bakış açısı (vizyon), biyografi ve hedefler (misyon) genellikle tercih edilen konulardır.

    Şahıslar için sıkıcı olmayan kısa ve özlü bir biyografi, şirketler için kısa bir tarihçe uygun olacaktır.

    Markaya daha organik ve gerçekçi bir kimlik kazandırmak adına “Hakkında” bölümünde ekip fotoğrafları ve bilgileri, dijital  medyada veya basılı medyada çıkmış yazılar ve haberler paylaşılabilecek diğer konulara örnek gösterilebilir.

    “Hakkında” bilgileri genellikle ayrı bir sayfada yer alır. Sayfanın bağlantısı sitenin ana  menüsünde (main menu) veya tercihe göre alt menüsünde (footer menu) yer alabilir.

    Altbilgi (Footer)

    Altbilgi, bir web sitesinin tüm sayfalarında görüntülenen marka logosu ve ana menü gibi, fakat birincil önceliğe sahip olmayan, sabit ve her an ulaşılabilir bir diğer bölümüdür. Sitenizin en alt kısmında bulunan bu sabit alanda küçük bir site haritası, şirket veya iletişim bilgileri, ikincil bir menü, dış bağlantılar, sosyal medya hesapları sıkça kullanılan ve karşılaştığımız bağlantılardır.

    Altbilgi, başka yerlerde bulunan ögelerin tekrarlanması ve daha kolay ulaşılır olması için de kullanılabilir.

    Lindo Studio web sitesi için tasarladığım footer örneği

    En iyi altbilgilerden bazıları, yukarıdaki öğelerin birçoğunu birleştirir. Altbilgi, başka yerlerde bulunan ögelerin tekrarlanması ve daha kolay ulaşılır olması için de kullanılabilir. Ayrıca, tasarım şemasında başka mantıksal bir yer yoksa üst bilgideki başlıklardan bazıları alt bilgiye alınabilir. Geniş bir ana menüye sahip sitelerde hakkında ve iletişim bilgilerinin ikincil olarak alt menüye alındığı sık görülen bir yaklaşımdır.

    Özet

    Bir web sitesinde olması gereken 6 temel unsuru inceledik. Bu unsurları Üstbilgi, İçerik, Eyleme Çağrı, Hakkında, İletişim, Altbilgi olarak listeledik ve her unsura kısaca göz attık.

    Bu listedeki ipuçlarının yeni web sitesi projelerine başlayacak kişilere fikir vermesini ve iyi bir kaynak olmasını umuyorum.

    Yazının içeriğini aynı şekilde veya dilediğin gibi düzenleyip istediğin yerde -bu sayfaya bağlantı vermek koşuluyla- paylaşabilirsin. 

    Bu yazıya eklenmesini düşündüğün başka bir başlık varsa, içeriğin hatalı veya eksik olduğunu düşünüyorsan, yazıya eklememi istediğin detaylar varsa, anlaşılmayan bişey olduysa veya herhangi bir konuda sorun veya yorumun varsa aşağıdaki alanı kullanarak iletebilirsin.