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

    korhan.blog

    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.

    Ben Korhan. İzmir’de yaşıyorum, web tasarım ve geliştirme konusunda uzmanım.
    Ege Üniversitesi Bilgisayar Programcılığı ve Bilgisayar Mühendisliği bölümlerinden mezun oldum. 10 seneden uzun süredir bilişim sektöründe tasarım ve yazılım geliştirme konularında sayısız proje ürettim. Türkiye’nin bir çok şehrinde ve yurtdışında bulunan müşterilerime ve ajanslara uzman olarak düzenli web tasarım ve geliştirme hizmeti vermekteyim.

    Ayrıca; grafik tasarım, markalaşma, dijital pazarlama, sunucu, arama motoru (SEO) ve sosyal medya (SMO) optimizasyonu konularında da uzun süreli destek sağlamaktayım.

    Seninle türkçe, ingilizce ve almanca iletişim kurabilirim.

    Hemen Paylaş: