Yeni Başlayanlar için Görsel Hiyerarşi

Görsel hiyerarşi, amaçlanan alanlara dikkat çekmek için nesnelerin belirli bir sırayla düzenlenmesidir.

UX tasarımında yaygın olarak kullanılan görsel hiyerarşi, okuyucunun daha kolay gezinmesini sağlar ve dikkatlerini olmasını istediğiniz yere yönlendirmesine yardımcı olur.

Yanlış kullanım veya görsel hiyerarşi eksikliği, web sitesi ziyaretçilerinin kafasını karıştırabilir ve kaybolabilir.

Görsel hiyerarşi, dikkati amaçlanan öğelere yönlendirmeye yardımcı olmak için afişlerde ve reklamlarda yaygındır.

Bu blog, yeni başlayanlara görsel hiyerarşinin temellerini sağlayacaktır.

Görsel Hiyerarşi Bozuldu

Görsel hiyerarşiyi daha basit parçalara ayırmak, tasarımcıların tasarım konseptini nasıl ele aldığını açıklamaya yardımcı olur.

Üçü, görsel hiyerarşide ikisi büyük ölçüde ilişkili olan üç ana roldür.

Boyut

Nesnelerin boyutunu değiştirmek, onlara dikkat çekmeye veya onlardan uzaklaştırmaya yardımcı olabilir.

İfade etmek istediğiniz en önemli bilgiler için en büyük boyutu bırakmak önemlidir. Benzer boyutta çok fazla öğe kullanmak, hiçbir şey bu kadar öne çıkmadığı için bu etkiden uzaklaşacaktır.

Ölçekleme boyutları, diğer nesnelerle nasıl karşılaştırıldığını göstermek için çok önemlidir. Bir denge hissi yaratmak, en büyük nesnenizin daha küçük olanlarla nasıl karşılaştırıldığını vurgulamak için ölçeklendirmeye yardımcı olur.

Önemli olmayan bilgileriniz varsa, küçük boyutta olması, onu yoldan uzak tutacak ve kullanıcıların en son göreceği yerde bırakacaktır.

Renkler ve Kontrast

Daha parlak renkler, dikkat çekme konusunda diğerlerinden daha iyi bir iş çıkarır. Bu efekt, parlak renkleri daha koyu arka planlarla birleştirdiğinizde artar. Sonuç, bilgilerinizin daha fazla ortaya çıkmasını sağlar ve kolaylıkla dikkat çeker.

Renk ve kontrast, görsel hiyerarşinin iki parçasıdır, ancak ikisi de dikkati çekmek için kusursuz bir şekilde birlikte çalışır.

Bu yöntemi kullanmanın bir yolu, bir metnin rengini gösterişli bir renkle vurgulayarak değiştirmektir; diğer donuk renkli metinlerden önce dikkat çekecektir.

Kontrast ne kadar büyük olursa, dikkat o kadar güçlü çekilir. Parlak kırmızı yazı tipine sahip koyu bir arka plan gibi ciddi renk farklılıkları eklemek, kullanıcının dikkatini çekecek ve herhangi bir resimde veya web sayfasında ilk fark ettikleri şey olacaktır.

Dikkat çekmek için zıt renkler yaratırken, bunları minimumda tutmak en iyisidir. Çok fazla karşıt nesne okuyucunun kafasını karıştırır ve istenmeyen ve rahatsız edici bir etki yaratır.

Renkleri kullanmanın başka bir yolu, belirli nesneler arasında bir korelasyon oluşturmak için benzer paletler seçmektir.

Bu taktiği yalnızca bir sayfadaki en gerekli öğeler için ayırmak en iyisidir, çünkü tüm dikkatin ilk önce oraya yönlendirilmesini istersiniz.

İyi UX tasarımı, bol miktarda kontrast içerir ve çoğu estetik, çarpıcı işler yaratmak için güçlü kontrast kullanır.

F & Z Kalıpları

Öncelikli olarak metin yoluyla bilgi sağlamaya gelince, görsel bilgiyi nasıl işlediğimizden en iyi şekilde yararlanan iki temel model vardır.

Bu kalıplar çoğu dilde işe yarar, ancak sözcükler soldan sağa ve yukarıdan aşağıya okunduğundan İngilizce için harika çalışır.

F Modeli

F deseni, kapsamlı metin içeren tasarımlar için mükemmel bir seçimdir. Tasarım, sol üstten başlayıp sağa doğru hareket ederek adını taşıyan harfi takip eder.

Bundan sonra, izleyici alt başlıklar veya başlıklar için arkayı tarar.

F deseni daha ikonik olsa da, desen alternatif olarak E deseni olarak adlandırılır.

F-desenini kullanmak için, dikkat çekmek için tüm hayati bilgileri küçük başlıklarda sol tarafa yerleştirmeniz gerekir.

Bu tasarım, büyük paragraf bloklarından metin okuma ile ilgili can sıkıntısını ortadan kaldırmada mükemmeldir.

Kullanıcılar, dikkat çekmeye hizmet ettikleri için göz alıcı başlıkları veya madde işaretlerini tespit etmek için başlıkları tarayabilir.

Z Modeli

F deseni, metin ağırlıklı web siteleri için uygun olsa da, Z deseni farklıdır.

Z deseni, birkaç paragraf metni olmayan web siteleri veya reklamlar için mükemmeldir.

Tasarım, en yüksek öncelikli bilgilerin sol üstte kalmasıyla başlar, ardından önem açısından sağ üst, sol alt ve sağ altta kademelendirilir.

Sık kullanılan ve anlaşılması kolay bir tasarım olduğu için kullanıcılar Z-deseninde kolayca gezineceklerdir.

Sol üst kısım, insanların ilk fark ettiği şey olacağı için genellikle bir logo için ayrılmıştır. Sağ üstte, kullanıcılar şirket logosunu gördükten sonra konumlandırılan bir harekete geçirici mesaj bulunur. Bu durumda harekete geçirici mesaj genellikle bir kayıt istemidir.

Tasarımın ortasında genellikle boş kısmı dolduracak bir resim bulunur.

Alt sol ve sağ, ziyaretçinize göstermek istediğiniz tüm metin veya bilgileri içerir.

Tipografiyi Anlamak

Tipografik hiyerarşinin anlaşılması kolaydır ve büyük çoğunluğu çok sayıda metin içeren herhangi bir tasarım için geçerlidir. Sıra başlık, alt başlıklar ve son olarak metniniz olacak şekilde üç bölüme ayrılabilir.

Başlıklarınız temel bilgileri içerir, tasarımınızın en üstüne yerleştirilir ve en görünür içeriktir.

Alt başlıklarınız, tüm metninizi sıralamak ve paragraf dağınıklığına düzen sağlamak için çalışır. Öncelikli olarak rekabet etmemeleri gerektiğinden, alt başlıklarınızı her zaman başlıklarınızdan daha küçük tutun.

Alt başlıklar, kullanıcıların belirli bilgileri bulmaları için basit gezinme sağlar.

Son parçanız, genellikle paragraflardan oluşan metninizdir. Yazı tipi boyutu küçük olmalı ancak okunabilirliği korumalıdır. Önceki iki bölüm, kullanıcıların yoğun metinleriniz arasında gezinmesi için daha kolay bir zaman sağlamak için çalışır.

Aralığın Önemi

Minimum bilgi içeren web siteleri için önemli bilgileri çevreleyen bol miktarda alan bırakmak, dikkatin tüm alanın olduğu merkeze çekilmesine neden olacaktır.

Bu konsept diğer tüm tasarımlarınız için de geçerli olmalı, çok fazla bilgi eklemek sizi hoş olmayan bir kullanıcı deneyimine bırakacaktır.

Alanla çevreleyen içerik, basit ve takip edilmesi kolay bir UX tasarımı sağlar.

Çok fazla bilgiyi tıkamak ve alanların etrafında çok az boşluk bırakmak, sizi bunaltıcı ve insanları şaşkın hissettiren bir tasarımla baş başa bırakacaktır. Kullanıcıların kafası karıştığında, her zaman web sitenizden ayrılma şansları vardır, yalnızca önemli bilgileri gösterdiğinizden emin olun.

Hizalamayı Kullanma

Tasarımlarınızı hizalamak önemlidir, çünkü metnin rastgele konumlandırılması, bakmak için telaşlı bir görüntü oluşturacaktır.

F-desenli ve Z-desenli tasarımların her ikisi de hizalama kullanımını içerir. F-desenli tasarımlar sola hizalamayı kullanırken, Z-desenli tasarımlarda sol ve sağ hizalamalar ve merkez hizalamalar kullanılır.

Metnin odak noktası olduğu bir görsel tasarım yaparken, sola hizalamak en iyisidir.

Basit odaklı, tamamen görsel tasarımlar için, tüm öğeleri merkeze hizalamak çekici bir tasarım yaratma eğilimindedir.

Izgaraları Kullanma

Tasarımları oluştururken, ızgaralar oluşturma sürecine yardımcı olmak için yaygın bir yöntemdir. Üçte bir kuralının kullanılması, tasarımlarınıza denge ekleme olanağı sağlar.

Üçler kuralını kullanmak için tasarımınıza bir ızgara ekleyin ve iki yatay ve dikey çizgi üzerinde durmasına izin verin. Sonuç, göze hoş gelen ve göze hoş gelen bir tasarım sağlar.

Merkeze yakın olan nesneler dikkati çekerken, uzaktakiler en son dikkat çeker.

Yakınlık ve İlişki

Öğeler birbirine daha yakın olduğunda, okuyucunuz bunların ilişkili olduğunu varsayacaktır.

Bu, birçok bilgiyi organize etmenize ve izleyiciniz için daha kolay anlamanıza yardımcı olabilir.

Görüntüleri metinle gruplamak, her ikisinin de ilişkili olduğu anlamına gelir ve okuyucular ikisini birbiriyle ilişkilendirir. Bir görüntünün ve metnin birbirinden uzak olması, okuyucunun her iki öğenin de ilgisiz olduğunu ve birbiriyle hiçbir ilgisi olmadığını varsaymasına neden olacaktır.

Yazı Tipleri ve Görsel Hiyerarşi

Yazı tipinizin boyutunu, önemli bilgiler için ayrılmış daha büyük yazı tipleriyle değiştirmek, bunlara doğrudan dikkat etmenize yardımcı olacaktır.

Poster için adlar büyük puntolardan biri olmalı, adres gibi öğeler ise küçük punto ile yazılmalıdır.

Yazı tipi boyutundan yola çıkarak, farklı yazı tiplerini kullanmak, kullanıcının dikkatini doğrudan yönlendirmeye yardımcı olacaktır. Başlıklar, alt başlıklar ve bilgi metni için farklı bir yazı tipi kullanın. Bu tasarım yöntemi, çalışmanıza okuyucunun dikkatini toplamak ve sürdürmek için ihtiyaç duyduğu popu vermenize yardımcı olacaktır.

Görsel Hiyerarşi İpuçları

Tasarımınızı oluşturmaya başlamadan önce birkaç not almak tasarımınızı düzenlemenize ve hatta daha estetik tasarımlar oluşturmanıza yardımcı olabilir.

Önceliklendirmeniz gereken en önemli bilgileri ve bunu yapmak için hangi yöntemleri kullanacağınızı not edin.

Ayrıca, okuyucunun yolculuğunu hayal etmeye çalışın ve UX tasarımını iyileştirmeye çalışın ve karmaşık ayrıntıları ortadan kaldırın.

İyi bir UX tasarımından elde edilen yatırım getirisi her zaman ekstra çalışmaya değer, bu nedenle önemini hafife almayın.

Sarmak

Görsel hiyerarşi, okuyucunuzun dikkatinin hangi sırayla gitmesini istediğinizi dikte etmekle ilgilidir; hayati bilgilerin önce görülmesini, ardından diğer her şeyin görülmesini istiyorsunuz.

Kontrast kullanımı, ortaya çıkan ve okuyucuların bir tasarımda ilk fark ettikleri şey haline gelen renkler yaratabilir.

Okuyucular tarafından önce hangi bilgilerin görülmesini istediğinizi bilmek, başkalarına iyi bir UX tasarımı sağlamak için görsel hiyerarşinin tüm unsurlarını kullanmanızı sağlayacaktır.