UX/UI Tasarımında Gestalt İlkeleri

Dribble

İnsan beyni, bir görüntüdeki boşlukları doldurmak ve küçük parçalarından büyük bir bütün yaratmada son derece iyidir. Bu algılama biçimi, görsel algılamadaki gestalt ilkelerinin arkasındaki en önemli temel fikirlerden biridir. Gestalt teorisi, Alman psikologlar tarafından kurulmuştur. Bu teori, çevremizdeki dünyayı algılamaya çalışırken, küçük bileşenlere odaklanmanın doğru olmadığını savunur.
Gestalt kelimesi Almanca’da biçim veya şekil anlamına gelmektedir.

Gestalt ilkeleri, herhangi bir tasarımcının öğrenmesi gereken önemli bir fikir kümesidir. Bunların uygulanması, sadece bir tasarımın estetiğini değil, aynı zamanda işlevselliği ve kullanım kolaylığını da büyük ölçüde geliştirebilir. En basit ifadeyle, gestalt teorisi, insan beyninin parçaları bilinçaltında, sadece bir bütünden ziyade bir bütün oluşturan organize bir sisteme yerleştirmesidir.

Gestalt teorisi ile yaygın olarak ilişkilendirilen ilkeler vardır: benzerlik , süreklilik, kapatma, yakınlık, şekil / zemin, simetri ve düzen, ortak kader, ortak bölge.

UX ve UI Tasarımında Gestalt İlkeleri

UX ve etkileşim tasarımı alanlarında en etkili psikolojik teorilerden biri Gestalt teorisidir.

Herhangi bir psikolojik ilkede olduğu gibi, Gestalt’ın görsel algı ilkelerini tasarım çalışmalarına dahil etmeyi öğrenmek, kullanıcı deneyimi çalışmalarında büyük ölçüde fark yaratacaktır. İnsan beyninin çalışma sistemini keşfederek ve ardından insanların gündelik hayatlarındaki eğilimlerini kullanarak, kullanıcının ilk ziyaretinde bile rahatlıkla dolaşabileceği bir web sitesi tasarlanabilir. Bu da kullanıcının web sitesi/mobil uygulamalarla olan etkileşimini de artıracaktır.

Benzerlik

Benzerlik ilkesi, nesneler fiziksel olarak benzer olduğunda, onları bir arada gruplama ve aynı işlevselliğe sahip olduklarını varsayma eğiliminde olduğumuzu belirtir.

Gestalt teorisinde benzer öğeler, birbirlerine yakınlıklarından bağımsız bir şekilde görsel olarak gruplandırılır. Bu gruplamalar, renk, şekil veya boyuta göre olabilir. Benzerlik/yakınlık kavramı ise bir tasarımda birbirinin yakınında olmayan öğeleri birbirine bağlamak için kullanılabilir.

UX tasarımında benzerlik ilkesini kullanmak, ziyaretçilerinizde hangi öğelerin birbirine benzediği konusunda netlik kazandırır. Örneğin, tekrarlayan tasarım öğelerinin kullanıldığı bir özellikler listesinde, benzerlik ilkesi, bunları taramayı kolaylaştırır. Vurgulamak istediğiniz özellikler için tasarım öğelerini değiştirmek, onları öne çıkarır. Harekete geçirici mesajlar için tasarlanan düğmeler de genellikle sayfanın geri kalanından farklı bir renkte tasarlanır. Böylece öne çıkma ve kullanıcıların dikkatini çekme konusunda başarılı olurlar. kalıcı olur.

Bir web sitesi tasarımında ziyaretçilerinizin sitenizin organizasyonunu ve yapısını algılama biçimi de benzerlik ilkesine dayanır. Sonuç olarak da ziyaretçinin algısında öne çıkardığınız ögeler daha anlaşılır ve hatta

Süreklilik

Düz çizgiler veya eğrilerle hizalanmış öğeleri takip ederek kesintisiz hareketi takip etme eğilimi ile hareket ederiz.

Süreklilik ilkesi, gözün bir nesneyi takip etmeye başladığında, başka bir nesneyle karşılaşıncaya kadar o yöndeki hareketi izlemeye devam edeceğini anlatır. Kesintisiz bir çizgi veya yumuşak bir eğri üzerinde konumlandırılmış ögeler, rastgele konumlandırılan öğelerden daha çok birbiriyle ilişkili görünür.
Süreklilik ilkesinde amaç eğer bir ziyaretçinin gözünü belirli bir yöne yönlendirmek ise çok değerli bir araç olarak tasarımda kullanılabilir. Gözümüz doğal olarak bir çizgiyi takip ettiğinden, öğeleri bir satırdaki bir diziye yerleştirmek, doğal olarak gözü bir öğeden diğerine çekecektir.

Tamamlama (Kapatma)

Kapatma ilkesi, bir bütün oluşturmak için beyninizin bir tasarımın veya görüntünün eksik kısımlarını dolduracağı fikrinden doğmuştur.

UX ve UI tasarımında tamamlama ilkesinin güzel bir örneği kullanıcının ekranda gördüğü görüntünün kısmen tam olmamasıdır. Kullanıcı ekranı sola veya sağa kaydırdığında keşfedecek şeylerin daha çok olduğu hissi yaratılır. Yani görüntünün bir kısmının gösterilmesi ile kullanıcının görüntüyü tamamlaması için kaydırma yöntemi ile sitede etkileşime geçmesi sağlanmış olur.

Kapatma genellikle logo veya simgeler üzerinde kullanılır. Bu ilke ile hem ögelerin basitleştirilmesi hem de tasarımın dağınık olması önlenir.

Yakınlık

Beynimiz birbirine yakın nesneleri uzak olanlardan kolayca ayırır. Bu kümelenme, insanların bir şeyleri birlikte organize etme ve gruplama konusunda doğal bir eğilime sahip olması nedeniyle oluşur.

Yakınlık ilkesinde insanlar çeşitli nesneleri algılarken birbirine yakın olan nesneleri grup halinde algılarlar. Nesneleri tek bir alanda gruplamak ile güçlü bir yakınlık etki yaratılmış olur. UX tasarımında, yakınlık çoğunlukla kullanıcıların belirli şeyleri, sert sınırlar çizmeden gruplandırmasını sağlamak için kullanılır. Kullanıcı, her grubun arasına boşluk bırakarak benzer şeyleri birbirine yaklaştırarak, onların algılamasını istediğiniz yapıyı hemen anlayacaktır.

Şekil / Zemin Prensibi

Figür-zemin ilkesi, insanların içgüdüsel olarak nesneleri ön planda veya arka planda algıladıklarını belirtir. Bu prensibe göre görsel dünyamızı şekil ve zemine ayırma eğilimindeyiz.

Şekil ve zemin ilişkisi, kullanıcıların arka plan ve ön planda ayrım yapabilmesi amacıyla kullanılan bir Gestalt prensibidir. Amaç, kullanıcıların tasarımda yer alan odak noktasına yönelmelerini sağlamaktır. Şekil, tasarımın ana parçası veya kullanıcıların öncelikli olarak görmeleri ve odaklanmaları gereken nesnedir. Zeminse arka plan veya ikinci tamamlayıcı tasarım ögesidir.

Simetri ve Düzen

Simetri ve düzen yasası , Almanca’da “iyi figür” anlamına gelen prägnanz olarak da bilinir. Bu ilkenin söylediği şey, beyninizin belirsiz şekilleri olabildiğince basit bir şekilde algılayacağıdır.

Simetrik öğeler, kullanıcılara her şeyin organize olduğu hissini verir. Bu da kullanıcılarım simetrinin web sitenizin veya uygulamanızın tasarımında kendilerini rahat hissetmelerini sağlar. Öğeler asimetrik ise, kullanıcılarınız asimetrinin arkasındaki mantığı bulmaya çalışırken çok zaman kaybedecektir. Bir şeylerin yanlış, eksik veya dengesizmiş gibi hissettikleri için bırakılacaklar.

Ürününüzü tamamen simetrik olarak tasarlamaya çalışmak zorunda değilsiniz. Çoğu zaman bu mümkün değildir. Bu aşırıya kaçan simetri de uygulamanızı veya web sitenizi sıkıcı gösterir. Simetri ve asimetri arasında denge bulmak önemlidir.
Arka plan resimleri, eşleşen renkler ve diğer öğeler, doğru kullanıldığında ürün tasarımına denge getirecektir. Simetrik bir web sitesi/uygulamadaki asimetrik öğeler, kullanıcılarınızın dikkatini tercihinize göre belirli bir noktaya çekmek amacıyla da kullanılabilir.

Ortak Kader

Ortak kader başlangıçta gestalt teorisine dahil edilmemiş olsa da sonrasında eklenmiştir. Ortak kader prensibi, aynı yönde hareket eden unsurların, zıt yönlerde hareket eden veya hiç hareket etmeyenlere göre birbirine ait olma ihtimalinin daha yüksek olduğunu gösterir.

Bu prensipten en iyi şekilde yararlanmak ve kullanıcıların beklentilerini karşılamak için birbirine ait olan unsurların aynı yönde ve aynı hızda hareket etmesini sağlamalısınız.

Bu prensibi, açılır menüler tasarlarken veya kullanıcı kaydı gibi bir işlemi gösterirken kullanabilirsiniz. Bu durumlarda hareket, süreç yoluyla ima edilir.
Animasyonlu efektler modern tasarımda daha yaygın hale geldiğinden, bu UX’te çok kullanışlıdır.Bu ilkeden yararlanmak için elemanların aslında hareket etmeleri gerekmez, ancak hareket izlenimi vermeleri bile yeterlidir.

Ortak Bölge Prensibi

Ortak bölge ilkesi, yakınlık prensibi ile büyük ölçüde ilişkilidir. Bu yasa, aynı kapalı bölgede bir araya getirilen unsurların bir grup olarak anlaşılacağını açıklar.

Nesneler aynı kapalı bölge içinde bulunduğunda, onları gruplanmış olarak algılarız. Aynı yakınlığa sahip nesneleri bir çerçeve içine almak onların aynı gruba ait olduklarını anlatmak için ideal bir yöntemdir.

Net bir sınır tanımlarsanız, kullanıcılarınıza içindeki öğelerin bir grup olarak çalıştığını göstermiş olursunuz.