Görsel Hiyerarşi, herhangi bir web sitesinin kullanıcısının bir sayfada etkileşime girme ve işleme sırasını özetleyen tasarım ilkesidir. Tasarım stilleri yerine görsel önem sırasına dayanır. İyi bir UI/UX, gözün her bir alanda, bir tasarımdaki nesnelerin içindeki kontrast, denge, vurgu ve ölçek kullanılarak nesnelerin nasıl algılandığını etkiler. Önemli bir kural, en önemli öğelerinizin en önemli unsur olması gerektiğidir. Bir web sitesinin unsurlarını daha açık bir hiyerarşiye sahip olacak şekilde düzenleyerek ve bir siteyi bu prensibe göre etkili bir şekilde tasarlayarak, tasarımcılar kullanıcıların web sitesinde farklı bilgileri algılamanın önemini etkileyebilir.
Nelere Dikkat Edilmelidir?
Konumlandırma, Boyut, Renk ve Kontrast, Hizalama, Tekrarlama, Yakınlık, Doku.
Konumlandırma
Boyut
Renk ve Kontrast
Hizalama
Standart olarak, yukarıdan aşağıya kural çoğu web sitesi için geçerlidir. En önemli bilgiler önce listelenir, ardından ikinci en önemli bilgi, genellikle gövde kopyası gelir. İnsanların hem soldan sağa okuma kültürlerinde hem de sağdan sola okuma kültürlerinde web sitelerini okuma biçimi yakın tarihte nispeten yoğun bir şekilde incelenmiştir. Batı dünyası soldan sağa, yukarıdan aşağıya doğru okur.
Bu sıradan bir şey gibi görünebilir, ancak web sitenizi tasarlarken düşünmeye değer. Daha büyük öğeler daha fazla dikkat gerektirir. Bir web sitesinin farklı öğelerinin ölçeğini ve boyutunu ayarlamak, yukarıdan aşağıya konumlandırma kuralını geçersiz kılabilecek tekniklerden biridir. Elemanların ve bilgilerin boyutunu değiştirerek, kullanıcıların web sitenizle etkileşime girme şeklini değiştirebilir ve nihayetinde vermek istediğiniz mesajı iletirken kullanıcılarınız için daha ilgi çekici bir deneyim yaşatabilirsiniz.
Bir web sitesinde kullanılan renk, markalamadan harekete geçirici mesajlara, kullanıcıların web sitenizde yaşadığı deneyimi iyileştirebilir veya bozabilir. Renk, kullanıcılarınıza, görünmelerini istediğiniz yerde imzalamak ve sitenizde istenen sırayla yönlendirmek için kullanılabilir.
Bir tasarımdaki iki veya daha fazla nesne arasındaki farka kontrast denir. Nesneler arasındaki fark açık ve koyu, ince ve kalın, küçük ve büyük, parlak ve donuk, renkli ve siyah-beyaz olabilir. Bir öğeyi sayfadaki en belirgin öğe yapmak için renk ve kontrastı kullanabilirsiniz.
Hizalama, tasarımın en temel ve önemli ilkelerinden biridir. Aralarındaki görsel bir bağlantı oluşturarak sayfadaki öğeleri birleştirmeye yardımcı olur. Bu unsurlar birbirine yakın olmasa bile, hizalandığında onları birbirine bağlayan görünmez bir çizgi (hem gözünüzde hem de zihninizde) oluşturulur. Sayfada başka bir şeyle görsel bir bağlantı kurarak, hizalama okuyuculara iki öğenin aynı parçaya ait olduğunu söyler; bu da daha keskin, daha organize bir tasarım yaratır.
Yakınlık ve Beyaz Alan
Tekrarlama
Doku
Yakınlık, nesnelerin bir kompozisyona nasıl uyum sağladıklarıdır. Yakınlığın temel amacı, tasarımınızı organize etmek için ilgili öğeleri birlikte gruplandırmaktır.
Elemanlara yeterli boşluk vermek, kullanıcının bunları daha kolay okumasını ve sindirmesini sağlar. Geniş boşluk alanları, nesnelerin daha önemli hissetmesini sağlayabilir. Öte yandan, yeterli boşluk olmaması, öğelerin okunmasını ve sindirilmesini zorlaştırabilir.
Tekrarlama, tüm parça boyunca elemanları tekrarlayarak bir tasarımı güçlendirir. Bir tasarımın tüm parçalarını birleştirmek bilinçli bir çabadır. Tasarımda tutarlılık ve süreklilik oluşturduğunuz öğeyi tekrarlayarak -renk, şekil, kalın yazı tipi, hatta doku olabilir – belirli bir format yaratabilirsiniz. İnsanlar temel tekrarlarla öğrenirler. Tekrarlamayı renk, ölçek, hizalama, kontrast ve konumlandırma ile birleştirmek mesajınızı daha cazip kılar.
Batı kültüründe soldan sağa okumak için ağır bir şekilde yerleşmiş olmasına rağmen, görsellerin ve grafiklerin dokusu, okuyucuyu farklı bir şekilde verilen bilgiler aracılığıyla yönlendirmek için ayarlanabilir. Kullanıcılara alternatif bir okuma deneyimi sunmak, web sitenizle daha fazla etkileşim kurmaya teşvik eder ve sitenizi daha unutulmaz kılar. Bir siteyle daha fazla etkileşim, dönüşümleri artırır ve sonuç olarak kullanıcılarınızı siteniz ve dolayısıyla şirketiniz hakkında daha olumlu bir izlenim bırakır.
Web sitenizi tasarlama sürecinde görsel giyerarşi ilkelerine dikkat ederek, kullanıcıları web siteniz üzerinden istenen sırayla yönlendirebilirsiniz. Önemli bilgileri bir sayfaya hükmedebilir veya okuma kalıplarını kesmek için ilkeleri kullanarak web sitenizdeki yolculuğu biraz daha ilginç hale getirebilirsiniz.
Adwise Digital Agency tüm bunları göz önünde bulundurarak sizlere UI/UX olarak son kullanıcıya hitap eden tasarımlar yapabiliriz.
