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

    korhan.blog

    Bilinmesi Gereken Kullanıcı Deneyimi Artırıcı 3 Temel Tasarım Deseni

    Bilinmesi Gereken Kullanıcı Deneyimi Artırıcı 3 Temel Tasarım Deseni

    Bu makalede, yapılan araştırmalar sonucunda akış kontrolüyle kullanıcı deneyimini (UX: user Experience) artırmaya yönelik geliştirilmiş ve her web tasarımcının bilmesi gereken 3 temel tasarım deseni modelinden: F-Deseni, Z-Deseni ve Gutenberg Diagramı’ndan bahsedeceğim.

    Başlamadan önce kısaca Kullanıcı Deneyimi ve Akış Kontrolü kavramlarından bahsetmekte fayda var.

    Kullanıcı deneyimi bir kişinin bir ürün, sistem ya da servisi kullanırken hissettiği duygular ile davranışların bütününü ifade eder. Kullanıcıya bu süreçte nasıl bir fayda vadedildiği, kullanıcının bu faydaya erişip erişemediği, bu sürecin ne kadar zorlu olduğu ve kullanıcının bu süreç yaşanırken ve sonrasında nasıl hissettiği kullanıcı deneyimini oluşturan bileşenlerdir.

    Bir kişinin bir hizmeti kullanırken hissettiği duygu ile davranışların bütününe kullanıcı deneyimi denir.

    Her kullanıcının sayfamızda bulunan her içeriği dikkatlice incelediğini hayal etmek doğru olmayacaktır çünkü kullanıcı bunu yapmaz. Sayfaları okumak yerine sadece tarar ve ilgisini çekecek birşeyler arar. Durması ve bir şeye dikkat etmesi için de gözlerinin bir şeye takılması gerekir.

    Kullanıcının odağını, hazırladığımız tasarımda oluşturduğumuz görsel hiyerarşiyi kullanarak bir noktadan başka bir noktaya taşıma işlemine akış kontrolü diyoruz.

    Akışı taşımak istediğimiz son nokta genellikler bir eylem çağrısı (Call-To-Action) olacaktır. Bu çağrı bir alışveriş sitesi için ödeme sayfası, başka bir site için iletişim bilgilerini bırakabileceği bir form veya bir e-bülten üyeliği olabilir. Şu an bulunduğunuz sitede ise bu bölüm “Proje Teklif Formu” dur.

    Ziyaretçinin gözlerinin izleyeceği doğru yolu oluşturmak için kişilerin bir tasarımı nasıl taradığı ve okuduklarından nasıl yararlanmaya çalıştıkları ile ilgili bize yardımcı olacak en yaygın şekilde kullanılan üç temel tasarım deseni modeli vardır ve bu modeller “F-Deseni”, “Z-Deseni” ve “Gutenberg Diyagramı” olarak bilinir.

    Araştırmacılar kullanıcının göz hareketlerini ve sayfa üzerinde gözleriyle izlediği yolu bir dizi odak testi ile inceleyip kullanıcı deneyimini anlamaya çalışmışlardır. Araştırma sonucunda odak noktalarının oluşturduğu sıcaklık haritalarına bakılarak yorumlar yapılmış ve bu desenlere uygun hazırlanan tasarımlar test edilerek modellerin başarıları kanıtlanmıştır.


    Facebook haber akışı ve Google arama sonuçları sayfaları üzerindeki kullanıcı göz tarama testleri sıcaklık haritaları

    Bu desenler, okuma alışkanlığı soldan sağa doğru olan batılı toplumlarda yapılan belirli araştırmalar sonucunda oluşturulmuştur fakat aynı tasarım mantığı ile farklı okuma alışkanlığına sahip toplumlar için de etkili tasarımlar yapmak mümkündür.

    F-Deseni Tasarım Modeli (F-Pattern)

    F-Deseni tasarım modeli, yoğun içerik blokları söz konusu olduğunda insan gözünün bu blokları tararken hareket ettiği yolu açıklamaya çalışır.

    Kulanıcı yoğun metin bloklarıyla karşılaştığında genelde yazıların tümünü okumaz. Arasından sadece ilgisini çeken bölümleri veya asıl ulaşmak istediği bilgiyi tarar.

    Kullanıcı odağının tarama esnasında F-Deseni tasarım modeline göre hareket ettiği görülmüştür ve bu hareket ekranda hayali bir “F” şekli oluşturur:

    • Kullanıcı öncelikle sol üst köşeden başlayıp sağa doğru hareket ederek gözleriyle hayali bir yatay çizgi oluşturur,
    • Daha sonra, göz içerik bloklarının alt başlıklarında zihindeki anahtar kelimeyi veya ilgi çekici noktaları tarar. Bunu yaparken yukarıdan aşağıya doğru dikey bir çizgi oluşturur,
    • Dikkatini  çeken birşey bulduğunda durur ve tekrar soldan sağa doğru ilerleyip ikinci bir yatay çizgi oluşturur, bu çizgi kısalıp uzayabilir ve süreç bu şekilde devam eder.

    F-Deseni tasarım modelinin tam anlamıyla bir F şekline uyması gerekmediğini ve desen boyunca yatay çizgilerin sayısının aşağı doğru artacağını unutmamak gerekir.

    Nerede Kullanılır?

    F-Deseni tasarım modeli, yoğun içeriği olan ve metin odaklı sayfalarda kullanılır. Uzun bir makalede, fazlaca metin bloğu içeren haber sayfalarında, detaylı içerik sunan alt sayfalarda ve birden fazla harekete geçirici mesajın yer aldığı tasarımlarda -blog yazılarında- F-Deseni tasarım modeli uygulamak doğru bir yaklaşım olacaktır.

    Yoğun içeriği olan ve metin odaklı sayfalarda F-Deseni tasarım modeli tercih edilmelidir.

    F-Deseni sadece kullanıcıları web sitenizde kalmaya teşvik etmekle kalmaz, aynı zamanda sitenizin sunabileceği diğer içerikleri de görmelerine sebep olur. Bu düzeni tasarımınıza dahil ettiğinizde web sitenizin kullanılabilirliği büyük ölçüde artacaktır.

    Sunulan içerikte bir çok önemli nokta/başlık yer alabilir ve farklı konular, farklı kişilerin ilgisini çekebilir. Kullanıcıya iyi bir deneyim sunmak, aradığı şeye bir an önce ulaşmasını sağlamak ve diğer sitelere yönelmesini engellemek istiyorsak F-Deseni tasarım modelini seçmek doğru olacaktır. Kullanıcılar bazen ne aradıklarını bilmeseler bile bu deseni kullanarak onlara istediklerini verebilirsiz.

    Nasıl Kullanılır?

    Kullanıcıya iletilmek istenen içerik ve önemli başlıklar, F desenini kullanarak tarama yolu boyunca uygun sırayla belirli bir frekansta yerleştirilir. F-Deseni tasarım modelini uygularken kullanılabilecek akış ve yöntem şu şekilde olmalıdır.

    1. Nokta: Kullanıcının odağının başlangıç ​​noktasıdır. Fark edilmesini istediğiniz en önemli içeriğin duracağı nokta burasıdır.

    2. Nokta: Kullanıcının ilk olarak üzerinden geçmesini istediğiniz öğeleri F’nin üst çizgisini oluşturacak şekilde sağa doğru yerleştirebiliriz. Gözün çizgi boyunca sona kadar ilerlemesini sağlamak için bu çizginin sonuna gözün takılacağı bir öğe yerleştirebilirsiniz.

    3.Nokta: Üst sırayı tarayan kullanıcı işini bitirince bu noktayı bulmak için aşağı doğru taramasına devam edecektir. Bir sonraki önemli başlık, başka bir sayfa bağlantısı, reklam bandı, eyleme çağrı vb. öğeleri kullanarak kullanıcının metin bloğunu geçip duraklamasını sağlayabilirsiniz.

    4.Nokta: Duraklayan kullanıcı sağa doğru -hizanın sonuna konmuş ilgi çekici öğeye kadar- taramaya devam edecektir. Belki de kullanıcının ilgisini çekmeyecek ve buraya hiç ulaşmadan taramasını kısa kesip bir sonraki başlangıç noktasını taramak için aşağıda doğru taramasına devam edecektir.

    Uzmanlar, ilk iki veya üç sıradan sonra rutini bozan “garip/farklı” herhangi birşeyle içeriği ayırmayı önerirler. Bu kullanıcıyı görsel olarak uyarmak için önceki satırlarda kullanılan birşeyin, herhangi bir varyasyonu/tekrarı da olabilir. Standart uygulama, içeriğin her 1.000 piksel mesafede bir bu şekilde bölünmesidir.


    Annelere yönelik içerik sunan kidolindo.com için hazırladığım F-Deseni tasarım modeli örneği (bkz. http://kidolindo.com/2018/01/15/bebek-onderliginde-ek-gidaya-gecis-nasil-uygulanir/)

    Z-Deseni Tasarım Modeli (Z-Pattern)

    Z-Deseni tasarım modeli, insan gözünün daha az yoğun bir içerikte hareket ettiği yolu açıklamaya çalışır. Kullanıcının gözleri bu modele göre hareket ettiğinde, ekranda hayali bir “Z” şekli oluşturur:

    • Kullanıcı öncelikle sol üst köşeden başlayıp sağa doğru hareket ederek gözleriyle hayali bir yatay çizgi oluşturur,
    • Sonra, aşağı ve görünür sayfanın sol tarafına, hayali bir diyagonal çizgi oluşturur,
    • Ve daha sonra tekrar soldan sağa doğru ilerleyip alta ikinci bir yatay çizgi oluşturur ve süreç bu şekilde devam eder.

    Z-Deseni tasarım modelinin tam anlamıyla bir Z şekline uyması gerekmediğini ve desen boyunca hayali Z çizgilerinin sayısının değişebileceğini unutmamak gerekir.

    Nerede kullanılır?

    Z-Deseni tasarım modeli, sadece metin odaklı olmayan, kısmen uzayabilen blok yapısında sayfalarda kullanılır. Daha basit ve görülmesi gereken az sayıda içeriğin olduğu birden fazla içerik bloğunun bulunduğu tasarımlarda uygulamak  doğru bir yaklaşım olacaktır.

    Sadece metin odaklı olmayan ve bloklar halinde devam eden sayfalarda Z-Deseni tasarım modeli tercih edilmelidir.

    Nasıl kullanılır?

    Z-Deseni tasarım modeline uygun akışı oluşturmadan önce içeriği belirlememizi sağlayacak aşağıdaki soruları yanıtlayalım:

    • Kullanıcı sayfanı ziyaret ettiğinde, hangi bilgileri fark etmelerini istersin?
    • Kullanıcının bilgileri hangi sırayla görmesini istiyorsun?
    • Kullanıcının neleri yapmasını istiyorsun?

    Bu sorular yanıtlandıktan ve tasarıma yerleştirilmesi gereken içerik oluşturulduktan sonra Z desenini kullanarak tarama yolu boyunca bu içerikteki unsurlar uygun sırayla yerleştirilmeli, ziyaretçilere doğru yerde ve zamanda sunulmalıdır.

    Z-Deseni tasarım modelini uygularken kullanılabilecek akış ve yöntem şu şekildir:

    1. Nokta: Kullanıcının odağının başlangıç ​​noktasıdır.

    2. Nokta: Kullanıcının ilk olarak üzerinden geçmesini istediğiniz öğeleri Z’nin üst çizgisini oluşturacak şekilde sağa doğru yerleştirebiliriz. Z deseni boyunca odağı sağlamak için bu çizginin sonuna bir öğe yerleştirmelisin. Burası ikincil eylem çağrısı için ideal bir yerdir.

    Sayfanın Ortası/Diyagonal Bölüm: Bu alanı kullanıcının ilgisini çekecek içerikle doldurarak odağını bir sonraki çizgiye 3. noktaya doğru çekmeye devam ediyoruz. Örneğin, üst ve alt bölümleri ayırmak ve gözleri Z yolu boyunca yönlendirmek için sayfanın ortasına bir görsel yerleştirebilirsin.

    3. Nokta: Bu noktanın amacı kullanıcıları 4. noktadaki birincil eylem çağrısına yönlendirmektir. Örneğin, sayfanız satmak istediğiniz bir ürünü tanıtıyorsa, potansiyel müşterilerin “Hemen Al” düğmesini görmeden önce satın almaya ikna olmalarını sağlamak için ürünle ilgili bilgiyi bu bölümde verebilirsiniz yani bu alanı 4.noktanın açıklaması olarak düşünebiliriz.

    4. Nokta: Birinci bloğun bitiş noktasıdır. Bu blokta kullanıcıya yaptırmak istediğimiz birincil eylem çağrısını buraya koymalıyız.

    Aşağıda, bazı markalar için hazırladığım Z-Deseni tasarım modeli örneklerini inceleyebilirsin.


    Eğlenceli Bilim (bkz. http://eglencelibilim.com/) ve Usa Smog Check (bkz. http://eglencelibilim.com/) açılış sayfaları (Landing Page) için hazırladığım Z-Deseni tasarım modeli örnekleri 

    Z-Deseni hakkında bilinmesi gereken ilginç ve yararlı diğer şey, bu deseni biraz büyük bir Z hareketi olarak görmek yerine  bir dizi küçük Z hareketi olarak görerek biraz daha genişletebilmemizdir.

    Gutenberg Diagramı Tasarım Modeli (Gutenberg Diagram)

    Gutenberg Diagramı tasarım modeli, insan gözünün az yoğunluktaki ve tek sayfadan oluşan bir içerikte hareket ettiği yolu açıklamaya çalışır.  Gutenberg kullanıcının gözleri ile izlediği bu yolu baz alarak tasarım alanını dörde ayırmış ve bu alanlara isimler vermiştir.

    • Üstte, solda bulunan Birincil Optik Alan,
    • Üstte, sağda bulunan Güçlü Nadas Alanı,
    • Altta, solda bulunan Zayıf Nadas Alanı,
    • Altta, sağda bulunan Son Durak Alanı.

    Kullanıcının odağı, Okuma Yerçekimi (Reading Gravity) diye tanımlanan yönde sol üstten sağ alta doğru çapraz bir çizgide kayar.

    Bu diagramı Z-Deseni tasarım modelinden ayıran en temel fark tasarımın 4.noktada sonlanmasıdır. Z-Deseninde odağı alt satıra 5.noktaya çekecek bir öğeye, diyagonal yeni bir hayali çizgiye ihtiyaç duyurulur.

    Nerede kullanılır?

    Gutenberg tasarım modeli kullanıcıların kafalarında oluşturduğu aşağıdaki sorulara hızlı yanıt bulmalarını gerektiren tasarımlar için kullanılır:

    • Sen kimsin?
    • Neden önemlisin?
    • Seninle nasıl etkileşime geçebilirim?

    Gutenberg diagramı, odağı dağıtmadan hızlı ve basit bir şekilde hikayeni kullanıcıya sunmana olanak tanır.

    Gutenberg modeli Z-Deseni tasarım modelinde olduğu gibi, sadece metin odaklı olmayan sayfalarda kullanılır. Daha basit ve görülmesi gereken birkaç temel öğe içeren ve eylem çağrısının en önemli ilke olduğu tasarımlarda  uygulamak  doğru bir yaklaşım olacaktır.

    Birkaç basit temel öğe içeren ve eylem çağrısının (CTA: Call-To-Action) en önemli ilke olduğu tasarımlarda Gutenberg Diagram’ı tasarım modeli kullanılmalıdır.

    Nasıl kullanılır?

    Yukarıdaki sorulara vereceğimiz ve kullanıcılara ulaşmasını istediğimiz yanıtlar Gutenberg Diagramı kullanarak tasarımdaki uygun alanlara yerleştirilir.

    Gutenberg Diagramında akış ve alanlar şu şekildedir:

    Birincil Optik Alan: Sayfanın sol üst kısmı kullanıcının birincil odak noktasıdır.

    Güçlü Nadas Alanı: Okuma alışkanlığının ikinci aşaması, sayfanın sağ üst kısmına doğru hareket eder. Bu alan birincil optik alandan daha az önemli değildir ve okuyucunun başlangıç ​​noktasından yarattığı okuma deneyimini tamamlayan bitiş noktasıdır. Eğer bir ikincil eylem çağrısı (Call-To-Action) mesajın varsa, kullanıcı bu noktada duracağı için harekete geçmeye uygun halde olacaktır.

    Zayıf Nadas Alanı: Sol alt kısım Gutenberg Diyagramının kör noktasıdır, kullanıcı bu alandaki içeriğe çok önem vermese de  daha fazla bilgi arayan kullanıcılar için bakılma ihtimalinde olan bir alandır.

    Son Durak Alanı: Kullanıcı sayfanın sağ alt bölümüne ulaştığında, okuma veya “sayfa tarama” işleminde üst çizgidekinden  daha büyük bir kesinti olur ve kullanıcı yapacağı işlemi burada belirler. Bu alan; düğmeler, bağlantılar, formlar vb. birincil eylem çağrıları (Call-To-Action) için en ideal yerdir.


    Sadee Tasarım (bkz. http://sadee.com.tr/) açılış sayfası (Landing Page) için hazırladığım Gutenberg Diagramı tasarım modeli örneği 

    Özet

    Kullanıcı deneyimi ve akış kontrolü kavramlarına kısaca değindikten sonra her tasarımcının bilmesi gereken, kullanıcıların göz tarama alışkanlıklarını araştırarak oluşturulmuş, F-Deseni, Z-Deseni ve Gutenberg Diagramı olarak adlandırılan 3 temel tasarım deseni modelinden bahsettim.

    Bu makaledeki bilgilerin grafik, web ve arayüz tasarımcılarına, kullanıcı deneyimi geliştiren kişilere, yeni web sitesi projelerine başlayacak girişimcilere ve içerik yöneticilerine iyi bir kaynak olması dileğiyle.

    Bu yazıyı hazırlarken daha önceden hazırlanmış ve derlenmiş bazı dış kaynakları inceledim ve kendi deneyimlerinden faydalandım.

    Kaynaklar

    https://vanseodesign.com/web-design/3-design-layouts
    https://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work
    http://www.clicksandclients.com/blog/internet-marketing/gutenberg-diagram-homepage-sense
    https://daoinsights.com/chinese-user-experience-how-we-read-on-the-web
    https://3.7designs.co/blog/2009/01/the-gutenburg-diagram-in-design
    https://uxmag.com/articles/the-f-pattern-understanding-how-users-scan-content
    https://99designs.com/blog/tips/visual-hierarchy-landing-page-designs
    http://babich.biz/f-shaped-pattern-for-reading-content
    https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c
    https://www.creativebloq.com/ux/how-human-eye-reads-website-111413463
    https://instapage.com/blog/z-pattern-layout
    http://uxturkiye.co/kullanici-deneyimi-nedir

    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 Ü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.