Web Tasarımında Görsel Hiyerarşi - Source Software Bilişim
×
Web Tasarımında Görsel Hiyerarşi

Görsel Hiyerarşi Nedir?

Görsel hiyerarşi, insanların bir sayfadaki bilgileri işleme sırasıdır. Öğeleri kolayca anlaşılabilmeleri için önceliklendiren bir sistemdir. Görsel bir hiyerarşi veya tasarım yapısı olmadan, kullanıcılar bunalabilir ve sonuç olarak hiçbir şey alamazlar. Tasarım tamamen görsel iletişimle ilgilidir. İnsan gözünün bunları nasıl işlediğini anladıktan sonra, öğelerinizi daha etkili bir şekilde düzenleyebildiğinizi göreceksiniz.


Gestalt ilkeleri

Web tasarımında görsel hiyerarşinin çoğu kuralı Gestalt ilkelerinden gelir. Gestalt Psikolojisi ilk olarak Avusturyalı ve Alman psikologlar Max Wertheimer, Wolfgang Köhler ve Kurt Koffka tarafından önerildi. Gestalt Almanca bir kelimedir. En yakın çeviri 'bütün', 'kalıp' veya 'form'dur. Bu psikolojik teori, insanların tasarım öğelerini nasıl algıladıklarını açıklar. Gestalt ilkelerinden çıkarılan en önemli şey, sayfanızı ayrı parçalar halinde değil, bir bütün olarak düzenlemeniz gerektiğidir.


Bu, ayrıntılara dikkat etmemeniz gerektiği anlamına gelmez. En çekici CTA'ya sahip olsanız bile, ancak tüm sayfanız bir karmaşa olsa ve iyi kurulmuş bir görsel hiyerarşiye sahip olmasa bile, muhtemelen çok fazla tıklama ve dönüşüm elde edemeyeceğinizi unutmayın.


Bu ilkelerden bazıları şunlardır:


Yakınlık – Yakınlık, kompozisyonun temel bir ilkesidir. Yakından yerleştirilmiş öğelerin ilişkili göründüğünü belirtir. Bazı öğeleri bir araya getirdiğimizde, izleyicilere nesnelerin ilişkili olduğuna dair net bir sinyal veririz. Yakınlık ilkesi, tasarımcıların içeriği hızlı tarama ve anlama için daha uygun hale getirmesine yardımcı olur.


Benzerlik – Benzerlik yasası, benzer bir görsel görünüme sahip öğelerin ilişkili göründüğünü belirtir. Aynı zamanda, beynimiz benzer şeyleri bir araya getirme eğiliminde olduğu için, gruba benzemeyen şeyleri de fark ederiz (bu tür farklılıklara "anomaliler" denir). Bir anomali doğal olarak izleyicinin dikkatini çeker çünkü grubun geri kalanından farklıdır.


Tekrarlama – Tekrarlama, Ortak Bölgenin Gestalt kural Yasasına dayanmaktadır. Bu kurala göre, öğeler açıkça tanımlanmış bir sınıra sahip bir alanı paylaşıyorlarsa gruplar halinde algılanma eğilimindedir. Görsel öğelerin tekrarı, tanımayı geliştiren birliği yaratır. Bizim tarafımızdaki görsel olarak tekrarlayan seçimler, okuyucunun bu sayfayı taramasını kolaylaştırır.


İnsan Gözü ve Tarama Desenleri

İnsan gözü öngörülebilir şekillerde çalışır. Otomatik olarak belirli ilgi noktalarına çekilir. Bunun bir kısmı bireysel kişiye bağlıdır, ancak çoğu insan web siteleri de dahil olmak üzere hemen hemen her şeyi nasıl gördükleriyle öngörülebilir eğilimleri takip eder.


Hem yazdırılan sayfada hem de dijital sayfada hiyerarşi için ortak desenler vardır. Bu kalıplar, gözlerimizin yeni bir sayfa ile sunulduğunda yapma eğiliminde olduğu hareketlere dayanmaktadır.


İnsanların genellikle takip ettiği, kendi tasarımlarınızda da yararlanabileceğiniz iki farklı tarama modeli türü vardır: esas olarak blog sayfaları ve metin ağırlıklı makaleler için kullanılan "F" ve blok paragraf biçiminde bilgi sunmayan web siteleri veya reklamlar için geçerli olan "Z".


F Deseni – Daha fazla metin içeren tasarımlarda, yukarıdan sağa, soldan sağa, sonra soldan aşağıya doğru tarama yaparız ve bilmek istediklerimize dair ipuçları ararız. Bir tane bulduktan sonra, sağdaki taramayı yapacağız.


Z Deseni – Çok fazla metin içermeyen tasarımlarda, gözümüz sol üstten sağ üste, daha sonra çapraz olarak sol alta doğru taramaya başlar ve sağ altta durur.

görsel hiyerarşi tarama desenleri

Boyut veya Ölçek Hiyerarşisi

Bu yeterince basit: insanlar önce daha büyük şeyler okuyorlar.


Boyut, daha büyük öğelerin daha fazla dikkat çektiği ve böylece en önemlisi gibi göründüğü bir hiyerarşi oluşturur. Boyutlandırma, öğelere diğerlerinden daha fazla önem verebilen ve izleyicinin gözünü belirli bir alana doğru çekmeye yardımcı olabilecek çok temel ama çok önemli bir ilkedir. Bir öğenin ölçeğini artırarak, izleyicinin dikkatini hemen çekebilirsiniz. Bununla birlikte, çok fazla öğeyi büyütmemeye veya boyuta, ekrandaki diğer öğelerin önemini azaltacak şekilde artırmamaya dikkat etmek istersiniz.


Boyut genellikle anlamlı konuları, başlıkları veya önemli alıntıları tanımlamak için metin gövdelerinde kullanılır, bu da en önemlisini en büyüğü yapar ve oradan küçültülür. Çok fazla boyut kümesinin kafa karıştırıcı olabileceğini unutmayın, bu nedenle temel bir boyut yapısı oluşturmak iyi bir fikirdir. Etiketler gibi ikincil içerik daha küçük olmalıdır, böylece daha önemli bilgilerle rekabet etmezler.


Tipografik hiyerarşi

Tipografik hiyerarşi, veriler içinde bir önem sırası oluşturan, okuyucunun aradıklarını kolayca bulmasını ve içerikte gezinmesini sağlayan bir tür düzenleme sistemidir. Okuyucunun gözünü bir bölümün başladığı ve bittiği yere yönlendirmeye yardımcı olurken, kullanıcının bir metin gövdesi boyunca stilin tutarlı kullanımına dayanarak belirli bilgileri izole etmesini sağlar.


Peki tipografik hiyerarşiyi web sitesi tasarımımıza nasıl dahil edebiliriz? Bunu yapmanın en kolay yolu, tipografinizi üç ayrı seviyeye ayırmaktır:


Seviye 1 (Başlıklar) – Birinci seviye tipografiniz sayfadaki en önemli içeriktir. Okuyucunuzun ilk önce ne görmesini istiyorsunuz? Genellikle dikkatinizi ilk çeken büyük, kalın yazı tipidir.


Seviye 2 (Alt Başlıklar) – İkinci seviye tipografi, birinci seviye kadar öne çıkmaz, ancak içeriği görsel olarak farklı bölümlere ayırmaya yardımcı olur. İkinci seviye tipografiyi alt başlıklar olarak düşünün; okuyucuya okumak üzere oldukları şey hakkında ipuçları veren öğeler.


Seviye 3 (Metin gövdesi) – Okuyucularınızın bitmesini istediğiniz yer burasıdır. Birinci seviye ve ikinci seviye tipografinizle ilgileniyorlarsa, muhtemelen üçüncü seviyeye ulaşacaklardır. Üçüncü seviyeyi mesajınızın özü olarak düşünün. Burası ürününüz, hizmetiniz veya konunuz hakkında daha fazla ayrıntıya girebileceğiniz yerdir ve genellikle daha küçük bir yazı tipindedir. Üçüncü seviye tipografi hakkında hatırlanması gereken en önemli şey, genellikle birinci seviye veya seviye iki tipten çok daha küçük olduğu için okunması kolay bir yazı tipinde olması gerektiğidir.


Renk ve Kontrast kullanarak Görsel Hiyerarşi

Renk, ışığın spektrumudur. Bir rengin yoğunluğu, ışığın dalga boyu ile belirlenir.


Renkler, tasarımınızdaki öğelere önem vermek için boyut ve ağırlığa benzer şekilde kullanılabilir. Daha parlak renkler genellikle izleyicinin dikkatini donuk, doymamış renklerden çok daha fazla çekecektir.


Renk, küçük bir ekran boyutunun boyut farklılaştırma ve geniş aralık gibi diğer stratejileri kullanma yeteneğinizi sınırladığı mobil uygulama tasarımında özellikle önemlidir.


Başarılı bir tasarım, görsel ilgiyi ortaya çıkarmak için kontrasta dayanır. Kontrast birçok biçimde olabilir: renk seçimi, yazı tipi stili, desen, sıcaklık, doygunluk ve değer aracılığıyla. Ayrıca tasarımın monoton ve düz görünmesini önler.


Kontrastlı görsel hiyerarşi oluşturmak için, odak noktalarının görünümünü tasarımın diğer bölümlerinden zıtlaştırarak öne çıkmasına izin verin.


Dokulu Hiyerarşi

İnsanlar görsel hiyerarşi açısından "doku" hakkında konuştuklarında, resimsel doku efektlerine atıfta bulunmazlar. Daha ziyade, bu tür bir "doku", bir sayfadaki alanın, metnin ve diğer ayrıntıların genel düzenini veya desenini ifade eder.


Dokular farklıdır - dekoratif özelliklerdir. Ancak, dokuların öncelikle estetiği etkilemesine rağmen, tasarımınıza doku eklemek hiyerarşiyi etkileyebilir. Doku, görsel ilgi yaratabilir ve kullanıcının dikkatini mizanpajınızın belirli bölümlerine çekebilir.


Hick yasası ve beyaz alan

Dikkat çekmenin bir başka yolu da içeriğe nefes alması için yeterli alan sağlamaktır. Negatif alan, görsel tasarımın önemli bir parçasıdır ve onu mekanın olumlu kullanımı kadar tanımlar.


Hick Yasası'nın ilkelerinden biri web tasarımı için geçerlidir. Seçim sayısını artırdığımızda, karar vermek için gereken sürenin de arttığını söylüyor. Buna ek olarak, ne kadar çok seçeneğiniz olursa, hiçbir şey seçmemek o kadar kolay olur.


Basitçe söylemek gerekirse, Hick yasasını anlayarak, sayfanızı yeterli beyaz alanla düzenleyebilir ve bilişsel aşırı yüklenme oluşturmaktan kaçınabilirsiniz. Kullanıcılarınızın web sitenizi bulmak için harcamak zorunda kalacakları zamanı azaltacak, onları doğrudan CTA'nıza yönlendirecek ve dolayısıyla dönüşümleri artıracaktır.


Altın Oran ve web tasarım

Altın Oran, kabaca 1.6180'e eşit olan matematiksel bir orandır. Doğada yaygın olarak bulunabilir ve dengeli kompozisyonlar oluşturmak için klasik tasarım teorisinde kullanılabilir. Altın Oran'ı web tasarımına da uygulayabilirsiniz. Yapısal olarak daha dinamik düzenlerle kolayca dikkat çekin.


Eski Yunanlılar, doğada bulunan güzel bir asimetriyi keşfeden ilk kişilerdi. Bu olguyu Yunanca phi harfi ile ifade ettiler ama bugün biz buna altın oran diyoruz.


Source Software'de Altın Oran, metin ağırlıklı içeriği dengelemek, hiyerarşi oluşturmak ve kullanıcıların gözlerini belirli alanlara çekmek için de kullanılır.


Son

Hiyerarşi, web sitesi tasarım sürecinin önemli bir parçasıdır, ancak hiyerarşi ve stil hakkında karar vermeden önce içeriğin konusunu ve ne iletmeye çalıştığınızı bilmek de önemlidir.


Bazı durumlarda, yukarıda listelenen hiyerarşi yöntemlerinden herhangi birini kullanma özgürlüğüne sahip olabilirsiniz, ancak diğer senaryolarda arka planda belirli bir boşluk veya tür karşıtlığı ile sınırlı olabilirsiniz.


En iyi eylem planı, durum için hangi yöntemlerin işe yaradığını değerlendirmek ve mantıklı olanları kullanmaktır. Nihai amaç, içeriği insan gözüyle işlenmesi kolay organize bir şekilde sunmaktır.


İşletmeniz için bir web sitesine ihtiyacınız varsa, Reaktif Grafikler yardımcı olabilir.

Projenizi nasıl hayata geçirebileceğimizi görmek için bugün bizimle iletişime geçin!

Reaktif Grafiklerin web tasarımlarında görsel hiyerarşiyi nasıl uyguladıklarına bir göz atmak için lütfen buradaki çalışma portföyümüze bir göz atın.


Blog Ara

Hizmetler

Web Tasarım

Oyun Geliştirme

Mobil Uygulama Geliştirme

Arama Motoru Opti̇mi̇zasyonu

E-Ticaret Geliştirme