Kullanıcılar daha çok estetik anlamda onlara hitap eden, gözlerine hoş gelen ürünleri satın alma eğilimindedirler. Bir ürünün ambalajı, bir kitabın kapağı veya bir pastanenin vitrini belki de onlara ilk etapta çekici gelen taraflardır. Fiziki ürünlerin, hizmetlerin ve dahası mağazaların yerini neredeyse tamamen online platformlara bıraktığı bir zaman dilimindeyiz. Dijital platformlarda bizi karşılayan sayfaları da mağazaların vitrini, kitap kapağı gibi düşünebiliriz.

Kullanıcıyı sayfaya ilk görüşte çeken bu estetik tasarımlar tek başlarına bir anlam ifade etmezler. Kullanılabilirlik kavramı ile bir arada uygulanması gereklidir. Aynı zamanda estetik olarak göze hoş gelen bir ürünün sahip olduğu bazı kullanılabilirlik kusurlarının kullanıcı tarafından görmezden gelindiği durumlar da olabilmektedir.

Hem estetik anlamda mükemmel ürünler hem de kullanılabilirliği göz önünde bulundurup tasarlanmış ürünler için görsel tasarım ilkeleri bu noktada kilit rol oynamaktadır.

Bu yazımda da, görsel tasarımın ne olduğunu, görselliğin kullanılabilirlik ile nasıl ilişkili olduğunu ve tasarımcıların daha iyi kullanıcı deneyimleri yaratmak için hangi görsel tasarım ilkelerini takip etmesi gerektiğinden bahsedeceğim.

Jonny Czar

Görsel Tasarım Nedir?

Görsel tasarım; görüntüleri, renkleri, yazı tiplerini ve diğer unsurları stratejik olarak uygulayarak arayüzde bir takım etkileşimler gerçekleştirir. Bir sitenin ve ilgili materyallerinin estetiğine odaklanır. Başarılı bir görsel tasarım, sayfadaki veya işlevdeki içerikten uzaklaşmaz.  Ürün tasarımının ilk ve en önemli amacı, arayüzleri kullanılabilir hale getirmektir. Görsel tasarımcılar bunu gerçekleştirmek için bir sayfadaki içeriğe boyut, renk, beyaz alan gibi farklı kullanımlara öncelik verir. Bunun için resimler, animasyonlar, efektler gibi uygulama tasarımlarına çeşitli öğeler de eklenerek görsel anlamda ilk temeller oluşturulur. Bir görsel tasarımcının rolü, tüm bu görsel ve hatta işitsel öğeleri birbirine bağlamak ve görsel açıdan en uygun düzeni oluşturmaktır. Bu düzenle birlikte kullanıcı arayüzünü daha çekici ve işlevsel kılmak da önemli hedefleri arasındadır.

UX / UI Tasarımda Görsel Dil Bilgisinin Önemi Nedir?

Etkili bir tasarım için, görsel iletişim dünyasının temelini oluşturan görsel dilbilgisi ilkelerini anlamak çok önemlidir. Geçmişi grafik tasarım tarihine dayanan bu ilkeler günümüzde de uygulanmaktadır. Yarattığımız tasarımın yapı taşlarını oluşturan bu ögelere örnek olarak temelde noktalar, çizgiler ve düzlemleri verebiliriz.

Basitçe ifade etmek gerekirse, görsel olarak oluşturduğumuz her şey - ister kullanıcı arayüzü (UI) öğeleri ister ekrandaki öğelerin daha karmaşık düzenlemeleri olsun - bir dizi temel öğeden oluşur.
Bu temel unsurları birleştirerek ikonlar, bileşenler, resimler, diyagramlar, desenler vb. her şeyi oluşturabiliriz.

Kullanıcı deneyimi tasarımı (UX), nispeten genç bir disiplin olabilir, ancak bu, grafik tasarım dünyasından öğrenebileceğimiz zengin bir mirasa sahip olmadığı anlamına gelmez. Herhangi bir tasarımı parçalara ayırırsanız, özünde bunun nokta çizgilerinden ve düzlemlerden oluştuğunu görürüz. Bir tasarımcı olarak arayüzlerin temel bileşenlerine nasıl ayrıştırılacağını iyi bilmek önemlidir. Bunun yanında sadeliğe odaklanarak yapılan hassas tasarımlar bilişsel yükün azalmasına ve kullanıcıların daha mutlu olmasına da fayda sağlar.

Görsel Tasarımın UX Tasarımındaki Hayati Önemi

İyi bir görsel tasarım, kullanıcıların kendilerini daha iyi hissetmelerini sağlayarak bir ürünün genel kullanıcı deneyimini iyileştirebilir. Görsel tasarım, etkileşimli öğelerin bir arayüzde nasıl göründüğünü belirler. Kullanıcı deneyimini birçok yönden etkiler. Örneğin:

  • Okunabilirliği etkiler.
  • Sayfada görsel denge oluşturur.
  • Gözü belirli sayfa öğelerine doğru hareket etmeye ikna eder.
  • Kullanıcıları işlemlere yönlendirir.
  • Güven ve güvenilirlik oluşturur.
  • Markayı güçlendirir.

Tüm bu maddeleri bir arada düşündüğümüzde UX tasarımcıları en azından temel bir görsel tasarım anlayışına sahip olmalı ve ortak bir dili paylaşmalıdır.
Ziyaretçiler bir web sitesine girdiklerinde, zihinlerinde beliren ilk izlenim yalnızca birkaç saniye sürer. Bu ilk izlenim çoğu durumda ilk etapta gördüklerine dayanır. Elbette bir ürünle etkileşim kurmaya başladıklarında, onu tüm farklı yönleriyle değerlendirirler. Görsel tasarıma zaman ve çaba harcamak, kullanıcılar üzerinde harika bir ilk izlenim yaratmanıza yardımcı olacaktır. Bu yüzden UX tasarımında görsel tasarım ilkelerinin doğru ve yerinde kullanımı hayati önem taşır.

Photo by HalGatewood.com / Unsplash

UX Tasarımında Etkili 5 Görsel Tasarım ilkesi

UX Tasarımında etkili 5 önemli tasarım ilkesinin benimsenerek bir kullanıcı arayüzü tasarlanması, kullanılabilirliğin artırılması için önemli bir kriterdir. Bahsedecek olduğum 5 önemli öge;

  1. Denge
  2. Oran
  3. Kontrast
  4. Görsel Hiyerarşi
  5. Gestalt Tasarım Prensipleri

Denge

Denge, bir kompozisyondaki öğelerin görsel ağırlığıdır. Denge ilkesi , tasarım öğelerinin iyi bir şekilde düzenlemesini veya oranını ifade eder.

Tasarımda, bir amacı gerçekleştirmek veya belirli bir görünüm ve his elde etmek için görsel unsurları estetik açıdan hoş bir düzende yerleştirmek önemlidir. Denge, ekranın ortasından geçen hayali bir eksenin her iki tarafında eşit olarak dağıtılmış miktarda görsel sinyal olduğunda oluşur. Görselinizde oluşturduğunuz hayali eksen, mizanpajı nasıl düzenleyeceğiniz konusunda referans noktası olacak ve görselinizdeki mevcut denge durumunu anlamanıza yardımcı olacaktır. Bu eksen genellikle dikeydir ancak yatay da olabilir. Dengeyi sağlayan görsel unsurların simetrik olma şartı yoktur. Denge adeta bir tahterevalli gibidir: ağırlık yerine tasarım öğelerini dengelersiniz.
Üç ana denge türü vardır:

Simetrik Denge: Öğeler, merkezi sanal eksene göre simetrik olarak dağıtılır.

Asimetrik Denge: Elemanlar, merkezi eksene göre asimetrik olarak dağıtılır.

Radyal Denge: Elemanlar merkezi, ortak bir noktadan dairesel yönde yayılır.
Bir kompozisyonu dengelemek, hem pozitif unsurları hem de negatif alanı, tasarımın hiçbir alanı diğer alanlara üstün gelmeyecek şekilde düzenlemeyi içerir. Her şey birlikte çalışır ve kusursuz bir bütün halinde birbirine uyar.

Ölçek

En yaygın olarak kullanılan görsel tasarım ilkelerinden birisidir.  Ölçek, bir tasarım öğesinin başka bir öğeye kıyasla göreceli boyutunu ifade eder. Ölçek ilkesi, bir kompozisyondaki önemi ve sıralamayı belirtmek için göreceli boyutu kullanmayı ifade eder.

Yani bu prensip doğru kullanıldığında bir tasarımdaki en önemli unsurlar, daha az önemli olanlardan daha büyüktür.  Farklı boyutlara göre her bir öğenin birbiriyle nasıl ilişkili olduğunu göstererek ilgi ve derinlik yaratır. Bu ilkenin arkasındaki sebep basittir: Bir şey büyük olduğunda, farkedilebilirliği artmaktadır. Bir dizi farklı boyutta öğeye sahip olmak yalnızca düzeninde çeşitlilik yaratmakla kalmaz, aynı zamanda sayfada görsel bir hiyerarşi de oluşturur. Ölçek prensibi doğru kullanımı ile  doğru unsurlar vurgulandığında, kullanıcılar görseli kolayca ayrıştıracak ve nasıl kullanacaklarını bileceklerdir.

Kontrast

Kontrastlık ilkesi, aynı sayfada bulunan öğelerin farklı olduğu gerçeğini iletmek için görsel olarak benzer olmayan öğelerin yan yana dizilmesi ile oluşturulur. Kontrast, dijital kullanıcı arayüzleriyle etkileşim konusunda kararlar almak için kullanılan temel durumlardan biridir. Bu ilke, tasarımınızın belirli bölümlerini kullanıcılarınıza ön plana çıkaran ve yaygın olarak kullanılan başka bir ilkedir.
Kontrast ilkesi genellikle renk yoluyla uygulanır. Örneğin kırmızı, kullanıcı arayüzü tasarımlarında, özellikle iOS'ta, silme işlemini belirtmek için sıklıkla kullanılır. Parlak renk, kırmızı bir elementin diğerlerinden farklı olduğunu gösterir.

Genellikle, UX'te "kontrast" kelimesi, metin ile arka planı arasındaki kontrastı akla getirir. Bazen tasarımcılar, daha az önemli olan metni vurgulamak için metin kontrastını kasıtlı olarak azaltırlar. Ancak bu yaklaşım tehlikelidir. Metnin kontrastını azaltmak aynı zamanda okunabilirliği de azaltır ve içeriğinizi erişilemez hale getirebilir. Uygun bir kontrast seviyesi olmadan, kullanıcılar temel görevleri tamamlamada güçlük çekecek ve bu da kullanmaya çalıştıkları ürüne karşı hatalara, hayal kırıklıklarına ve hatta kızgınlığa yol açacaktır.
Kontrast kavramı, geçici veya kalıcı görme yetersizliği yaşayan insanlar için de çok önemlidir, çünkü bu kişiler renkleri başkalarının yaptığı gibi algılayamazlar.

Görsel Hiyerarşi

Görsel hiyerarşi, insanların bir sayfadaki bilgileri işlediği sıralama için kullanılan bir ilkedir. Sayfadaki ögelerin kolay anlaşılmaları için önceliklendirme sistemine dayanır. Görsel bir hiyerarşi veya tasarım ilkelerinin kullanımı kullanıcının sayfada sıkılmasına ve aradığını bulamamasına yol açar. Bu nedenle, öğeleri insan gözünün onları anlamlandırabileceği şekilde organize etmek önemlidir. İyi bir görsel hiyerarşiye sahip bir düzen, kullanıcılar tarafından kolayca anlaşılacaktır.
Görsel hiyerarşi; ölçek, değer, renk, aralık, yerleşim ve çeşitli başka yollarla uygulanabilir.

Ölçek, görsel hiyerarşiyi tanımlamaya da yardımcı olabilir, bu nedenle farklı tasarım öğeleri için çeşitli ölçekleri kullanmak faydalı olacaktır.

Görsel hiyerarşi aynı zamanda deneyimi de etkiler. Bir sayfada nereye bakacağınızı bulmakta zorlanıyorsanız, büyük olasılıkla düzeninde net bir görsel hiyerarşi eksiktir. Net bir görsel hiyerarşi oluşturmak ve kullanıcılara içerik parçalarının en önemli olduğunu belirtmek için en fazla 3 yazı tipi boyutu kullanmak çözüm olacaktır. Önemli öğeler için parlak renkler, daha az önemli öğeler için ise soluk renkler kullanmak da hiyerarşi oluşturmada etkili yöntemlerdendir.

Gestalt İlkeleri

Gestalt ilkeleri, yirminci yüzyılın başlarında Gestalt psikologları tarafından oluşturulmuş bir dizi ilkedir. Bu ilke, insanların görüntüleri nasıl anlamlandırdığını yakalar.

Gestalt teorisine 5 ilke rehberlik eder.

  • Yakınlık
  • Benzerlik
  • Süreklilik
  • Kapanış
  • Şekil / Zemin

Gestalt ilkeleri, parçaları bir dizi farklı unsur olarak yorumlamaz. Parçaları bilinçaltında bir bütün oluşturan organize bir sisteme yerleştirerek insanların birçok unsurdan oluşan karmaşık görüntüleri nasıl basitleştirdiğini açıklar.
Yakınlık özellikle UX için önemlidir ve  görsel olarak birbirine daha yakın olan öğelerin aynı grubun parçası olarak algılanması anlamına gelir. Gestalt teorisi; zihnin bütünü, parçalarının toplamından daha büyük olduğunu anladığına odaklanır.