Rehber

UX/UI Tasarımında Görsel Hiyerarşi

Yazar
Userspots Ekibi

Websitesi veya uygulama tasarımlarında kullanıcısına iyi bir deneyim sağlamak için kullanılan Görsel Hiyerarşinin ne olduğunu, önemini ve gerekli maddelerini bu yazımızda kaleme aldık.

Bu İçerikte Yer Alan Ana Başlıklar:

Görsel Hiyerarşi Nedir?
Görsel Hiyerarşi Neden Önemlidir?
Görsel Hiyerarşide Dikkat Edilmesi Gerekenler

Çeşitli tasarım öğeleriyle dolu, yazı ve simgelerin net bir şekilde okunamadığı, nereye bakmaya başlayacağın konusunda hiçbir fikrinin olmadığı bir web sayfasıyla karşılaştın mı?

theworldsworstwebsiteever.com

Bir ekranda odağı bulmakta zorlanıyorsan o sayfanın düzeninde net bir görsel hiyerarşi eksikliği olabilir. Görsel hiyerarşi, sayfa tasarımına dahil edilen öğelerin belirli bir uyum ve görsel önem sırasına göre organize edilmesi ile sağlanır. Gelin, sayfa tasarımında görsel hiyerarşinin yerine ve sürükleyici bir kullanıcı deneyimi oluşturabilmek için nasıl kullanıldığına yakından göz atalım.

Görsel Hiyerarşi Nedir?

Görsel Hiyerarşi

Görsel hiyerarşi, site görünümünün ve kullanıcı deneyiminin nasıl sunulacağını kontrol eder; site içi öğelerin görsel önem sırasına uygun olarak tasarlanması ve sıralanması anlamına gelir. Net bir görsel hiyerarşiden gözü sayfadaki en önemli öğelere yönlendirmesi, öğeler arasındaki sıralamayı belirleyebilmesi ve kullanıcıların dikkatlerini nereye odaklayacaklarını göstermesi beklenir. Web teknolojilerinin gelişmesi ve dinamik sayfa yapıları, tasarımcıları aynı anda birçok farklı detay hakkında düşünmeye zorlayabilir. UI/UX tasarımın en önemli hususları arasında yer alan görsel ağırlık ise okuma sırası, odak noktaları, duraklama alanları ve sayfa içi sıralaması gibi konularda izleyicilere rehberlik eder.

Görsel Hiyerarşi Neden Önemlidir?

Görsel hiyerarşi, tasarım öğelerini değiştirerek her sayfanın içeriğinin kendi içindeki önemini göstermek için kullanılan bir görsel tasarım ilkesidir. Kullanıcı arayüzü (UI) tasarımında etkili bir görsel hiyerarşi oluşturmak, arayüzün görünümü hakkında beklentileri olan kullanıcıları bilgilendirmeye, etkilemeye ve ikna etmeye yardımcı olur. Bir web sitesinin, mobil uygulamanın veya masaüstü platformunun başarılı olması için sayfalarının kullanıcılarla maksimum seviyede empati kurabilecek ve onlara izlemesi hoş bir şey verecek şekilde yapılandırılması oldukça önemlidir. Bu sayede kullanıcılar daha uzun süreler boyunca web sitesinde veya uygulamada kalabilir, hiyerarşi içinde kurulmuş sayfalar arasında keyifle yolculuk yapabilir.

Görsel Hiyerarşide Dikkat Edilmesi Gerekenler

1- Görüntüleme Paternleri  

2- Büyüklük

3- Renk

4- Kontrast

5- Hizalama

6- Simetri

7- Boşluk

8- Font Kullanımı

9- İkon ve Butonların Kullanımı

1) Görüntüleme Paternleri

Her kullanıcının sayfa içindeki içerikleri taramak için özgün olarak kullandığı bir bilinçaltı görüntüleme düzenine sahip olduğunu biliyor muydunuz? Bu model, kişiden kişiye ve görüntülenen sayfanın yapısına göre değişebilir, ancak insanların büyük bir çoğunluğu, en popüler iki görüntüleme modeli olan Z ve F modeline göre okuma yapar. İçerikleri bu kalıplarla uyacak şekilde tasarlamak izleyicilerin çok daha iyi bir deneyim yaşamasını sağlar. Bu iki kalıba daha ayrıntılı olarak bakalım.

Z Pattern Tasarım

apple.com üzerinden Z Pattern gösterimi

Ürün tanıtım sayfalarında sıklıkla kullanılan Z patern tasarım, görsele veya kısa metinlere vurgu yapmak için idealdir. İçeriklerini Z stili ile tasarlaman kullanıcıların sayfa içindeki her bir öğeyi hızlı bir şekilde taramasına ve öğeler arasında kolayca geçiş yapabilmesine yardımcı olur.

F Pattern Tasarım

verge.com sitesi üzerinden F Pattern gösterimi

Makale, haber ve blog tarzı sitelerde tercih edilen F patern tasarım, metin ağırlıklı sayfaların okunmasını kolaylaştırır. Okuma yönüne uygun olarak tasarlanan F sayfa düzeni, okuyucuların resimleri ve başlıkları zorlanmadan taramasına yardımcı olur.

2)Büyüklük

Büyük bir obje, kullanıcılar tarafından daha rahat bir şekilde fark edilir. Font, görsel, çerçeve, boşluk ve animasyon gibi parçaların boyutu arttığında odak noktası ve site içindeki önemi de artar. Örneğin, SEO için önemli bir ölçek olan H1-H6 başlık sıralaması, font büyüklüğüne duyarlı olarak sayfa içi hiyerarşiyi oluşturmayı sağlar. Başlıkların büyüklüğünü belirleyerek hangi içeriğin daha önemli olduğu okuyuculara rahatlıkla gösterilebilir.

3)Renk Kullanımı

codegoda.io üzerinden renk kullanım örneği

İyi bir kullanıcı deneyimi için de iyi bir renk kullanımı şarttır. Sayfa içine ekleyeceğin renkleri arka plan ile optimize ederek okunabilirliği ve takip edilebilirliği yüksek bir sayfa düzeni oluşturabilirsin; bağlantıları, sayfa geçişlerini veya form linklerini renklendirerek anlaşılması kolay bir akış sağlayabilirsin. Burada her bir özellik içinde renk kullanmamaya özen göstermek, gerekli yerlerde doğru renkleri kullanmak önemlidir. Bir web sitesi tasarımında renk paletiniz ne kadar geniş ve site içerisinde kullanımı fazla ise, siteniz maalesef bir o kadar karmaşık hale gelecektir.

4)Kontrast

metalandgas.com sitesi üzerinden kontrast örneği

Tasarımlarında renk kullanmanın bir başka harika yolu da farklı renk seçeneklerinden faydalanarak belirli öğelerin daha fazla öne çıkmasını sağlamaktır. Renk, boyut, yazı tipi ve boşluk gibi kontrast öğelerini manipüle ederek bir odak noktası ve görsel algı oluşturmak için kullanabilirsin. Hedef öğe ile arka plan renkleri arasındaki artan kontrast doğal olarak dikkat çekecektir.

5)Hizalama

hizalama ve grid kullanımı

Sayfa düzeni ile ilgili seçenekleri bir araya toplayarak bir kullanıcının gördüklerini anlamlandırmasına yardımcı olabilirsin. Öğelerin hizalamasını ve yakınlığını renkle ve boşlukla birlikte kullanarak sayfa içinde denge ve özgün bir tasarım düzeni oluşturabilirsin. Tasarımındaki doğru hizalama, sayfa içindeki öğeleri, görsel olarak daha çekici hale getirecek, kullanıcıların sayfayı taramasını kolaylaştıracak ve daha sakin bir okuma deneyimi sunacaktır.

6)Simetri Kullanımı

Simetri kullanımı üzerine Adham Dannaway'in websitesi

Yatay, dikey veya radyal formda geliştirilebilen simetrik tasarım, aynalı yanlara sahip bir stil yaratmak için denge, ritim, orantı ve birlik ilkelerine dayanır. Simetrik tasarım şemaları her proje için uygun olmayabilir, ancak oluşturmaları oldukça basittir. Simetrinin arkasındaki teori, herhangi bir tasarımcı veya geliştiricinin dengeli, ritmik, doğal ve göze hoş gelen bir tasarım oluşturmasına destek olabilir.

7)Boşluk Kullanımı

Boşluk kullanımı üzerine pocketpenguin.com sitesi

Sayfa tasarımında boşlukların da en az içerik kadar büyük bir önemi vardır. Yeterli boşluk bırakmadan içerikleri bir alana toplamak hem okumayı zorlaştırır hem de odak noktasını bozarak zayıf bir kullanıcı deneyimi sunar. Margin ve padding ayarlarını orantılı bir şekilde oluşturmak, okumayı kolaylaştırdığı gibi düzeni sağlamayı ve profesyonel bir görünüm oluşturmayı mümkün hale getirir.

8)Font Kullanımı

Farklı fontların birlikte kullanımı üzerine Mailchimp Presents sayfası örneği

Tipografi, kelimelerin bir sayfada veya ekranda tam anlamıyla nasıl göründüğünü belirler. Font büyüklüğü, rengi ve tipi sayesinde yazıların sayfa içerisindeki hiyerarşide hangi konumda olduğu gösterilebilir. Örneğin; animasyon kullanımı ile zenginleşen fontlar veya ayrıntılı yazı tipleri, müzik, sinema ve eğlence sektörleri için daha uygundur. Köşesiz, sade, okunabilir bir font ise haber ve blog siteleri gibi içeriğin ön planda olduğu alanlarda tercih edilebilir.

9)İkon ve Butonların Kullanımı

Beğen butonu, yorum kutusu, indirme görseli, logo ve sayfa yön aracı gibi şekiller hem fonksiyonel hem de görsel olarak sayfa hiyerarşisini etkiler. Geometrik şekiller, bilgileri veya harekete geçirici araçları gruplandırmak ve önem sırasına göre sıralamak için de kullanılabilir. Büyükten küçüğe doğru sıralanan veya belirli bir simetri içinde oluşturulan şablonlar, kullanıcıların sayfa içinde nasıl ilerlemesi gerektiği yönünde bilgilendirici bir özelliğe de sahip olabilir.

Görsel hiyerarşi içinde aktarılan içerikler, siteni ziyaret eden kullanıcıların düzen içinde hareket edebilmesine ve aradıklarını kolayca keşfedebilmelerine yardımcı olur. Yukarıda sıralanan konulara dikkat ederek daha kullanıcı dostu bir tasarım diline sahip olabilir, kullanıcıların ile daha iyi empati kurabilir, ürün ve hizmetlerini karşı tarafa daha etkili bir şekilde sunabilirsin.

Kaynakçalar;

https://www.nngroup.com/articles/visual-hierarchy-ux-definition/

https://xd.adobe.com/ideas/process/information-architecture/visual-hierarchy-principles-examples/

https://tympanus.net/codrops/2012/06/19/line-that-up-proper-alignment-in-web-design/

https://usabilitygeek.com/visual-hierarchy-ux-design/


Oluşturulma Tarihi
06/2022
Güncellenme Tarihi
06/2022
Online Eğitim
UI Eğitimi

Cihazlar ve kullanıcılar arasındaki etkileşimi kolaylaştıran arayüzler nasıl tasarlanır?

14 Haziran - 26 Temmuz 2022

Space Konularımız

No items found.
No items found.
Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.