Tasarımın Gestalt İlkelerini Keşfetmek

Yayınlanan: 2022-03-11

Bu makalenin sesli sürümünü dinleyin

Negatif alan uzun zamandır iyi tasarımın temel unsuru olmuştur. Bir tasarımın öğelerinin etrafında boşluk bırakmak genellikle akla gelen ilk şeydir. Ancak, aslında orada olmayan bir öğeyi çıkarmak için bu beyaz boşluğu kullanan tasarımlar var (örnek olarak akla hemen FedEx logosunda E ve X arasında gizlenmiş ok geliyor).

Negatif boşluk tasarımın temel unsurlarından ve ilkelerinden biridir. — FedEx logosundaki "E" ve "x", aralarındaki negatif boşlukta bir ok oluşturur.

İnsan beyni, bir görüntüdeki boşlukları doldurmada ve parçalarının toplamından daha büyük bir bütün yaratmada son derece iyidir. Bu yüzden ağaç yaprakları veya kaldırım çatlakları gibi şeylerde yüzler görüyoruz.

Bu ilke, görsel algının gestalt ilkelerinin arkasındaki en önemli fikirlerden biridir. Teori hakkında yazılmış en etkili erken öneri Max Wertheimer tarafından 1923 Gestalt algısal organizasyon yasalarında yayınlandı, ancak Wolfgang Kohler'in 1920 Fiziksel Gestalten tartışması da konuyla ilgili birçok etkili fikir içeriyor.

Fikirleri ilk kimin önerdiğine bakılmaksızın (1890'a kadar uzanan makaleler vardır), gestalt ilkeleri, herhangi bir tasarımcının öğrenmesi gereken önemli bir fikir dizisidir ve bunların uygulanması, yalnızca tasarımın estetiğini değil, aynı zamanda büyük ölçüde iyileştirebilir. işlevselliği ve kullanım kolaylığı.

En basit ifadeyle, gestalt teorisi, insan beyninin, bilinçaltında parçaları bir bütün oluşturan organize bir sistem halinde düzenleyerek, birçok unsurdan oluşan karmaşık görüntüleri veya tasarımları basitleştirmeye ve düzenlemeye çalışacağı fikrine dayanır. birbirinden farklı unsurlar dizisi. Beynimiz, içinde yaşadığımız çevreyi daha iyi anlamamız için yapı ve kalıpları görmek üzere inşa edilmiştir.

Gestalt teorisiyle yaygın olarak ilişkilendirilen altı ayrı ilke vardır: benzerlik , devamlılık , kapatma , yakınlık , şekil/zemin ve simetri ve düzen ( pragnanz olarak da adlandırılır). Ortak kader gibi bazen gestalt ile ilişkilendirilen bazı ek, daha yeni ilkeler de vardır.

Benzerlik

Benzer şeyleri bir araya toplamak insan doğasıdır. Gestalt'ta benzer öğeler, birbirlerine yakınlıklarından bağımsız olarak görsel olarak gruplandırılır. Renk, şekil veya boyuta göre gruplandırılabilirler. Benzerlik, bir tasarımda yan yana olmayabilecek öğeleri birbirine bağlamak için kullanılabilir.

Tabii ki, kalabalığın arasından sıyrılmak istiyorsanız, farklı şeyler yapabilirsiniz. Harekete geçirici mesaj düğmelerinin genellikle sayfanın geri kalanından farklı bir renkte tasarlanmasının nedeni budur; bu nedenle öne çıkarlar ve ziyaretçinin dikkatini istenen eyleme çekerler.

UX tasarımında benzerlik kullanmak, ziyaretçilerinize hangi öğelerin birbirine benzediğini açıkça gösterir. Örneğin, tekrarlayan tasarım öğelerini kullanan bir özellikler listesinde (3-4 satırlık bir metnin eşlik ettiği bir simge gibi), benzerlik ilkesi bunları taramayı kolaylaştıracaktır. Buna karşılık, öne çıkarmak istediğiniz özellikler için tasarım öğelerini değiştirmek, onları öne çıkarır ve ziyaretçinin algısında onlara daha fazla önem verir.

Bir tasarımdaki bağlantıların aynı şekilde biçimlendirildiğinden emin olmak kadar basit şeyler bile, ziyaretçilerinizin sitenizin organizasyonunu ve yapısını algılama biçimindeki benzerlik ilkesine dayanır.

devam

Süreklilik yasası, çizgilerin gerçekte nasıl çizildiğine bakılmaksızın, çizgileri görüntülerken insan gözünün en düzgün yolu izleyeceğini varsayar.

gestalt süreklilik ilkesine bir örnek — Göz, bu şeklin bir ucundan diğerine düz çizgiyi ve yukarıdan aşağıya doğru eğri çizgiyi, çizgiler ortasında renk değiştirse bile takip etme eğilimindedir.

Amaç, ziyaretçinin gözünü belirli bir yöne yönlendirmek olduğunda, bu devam değerli bir araç olabilir. Sayfadaki en basit yolu izleyecekler, bu yüzden görmeleri gereken en hayati kısımların bu yola girdiğinden emin olun.

Göz doğal olarak bir çizgiyi takip ettiğinden, öğeleri bir sıra halinde bir sıraya yerleştirmek, doğal olarak gözü bir öğeden diğerine çekecektir. Yatay kaydırıcılar, Amazon gibi sitelerdeki ilgili ürün listeleri gibi bir örnektir.

kapatma

Kapanış, en havalı gestalt ilkelerinden biridir ve bu parçanın başında değindiğim bir ilkedir. Beyninizin bir tasarımın veya görüntünün eksik kısımlarını tamamlayarak bir bütün oluşturması fikridir.

En basit haliyle, kapatma ilkesi, gözünüzün noktalı bir çizgi gibi bir şeyi sonuna kadar takip etmesini sağlar. Ancak logolarda, Dünya Yaban Hayatı Fonu için olduğu gibi daha karmaşık uygulamalar sıklıkla görülür. Pandanın ana hatlarının büyük bir kısmı eksik, ancak beyniniz tüm hayvanı görmek için eksik bölümleri doldurmakta sorun yaşamıyor.

dünya vahşi yaşam fonu logosu, gestalt kapatma ilkesinin bir örneğidir — Gestalt'ın kapatma ilkesi, Dünya Yaban Hayatı Fonu'nun panda logosunda güzel bir şekilde gösterilmiştir. Beyin, tam olarak tanımlanmamış olsalar da beyaz şekilleri tamamlar.

Kapatma, USA Network, NBC, Sun Microsystems ve hatta Adobe için olanlar da dahil olmak üzere diğer örneklerle birlikte, logo tasarımında oldukça sık kullanılır.

UX ve UI tasarımında iş yerinde kapatmanın bir diğer çok önemli örneği, sola veya sağa kaydırdıklarında bulunacak daha fazlasının olduğunu göstermek için kullanıcının ekranından kaybolan kısmi bir görüntü göstermenizdir. Kısmi bir görüntü olmadan, yani yalnızca tam görüntüler gösteriliyorsa, beyin daha fazlasının görülebileceğini hemen yorumlamaz ve bu nedenle kullanıcınızın kaydırma yapması daha az olasıdır (çünkü kapatma zaten belirgindir).

ABD merkezli tam zamanlı serbest UI tasarımcıları istedi

yakınlık

Yakınlık, öğelerin birbirine ne kadar yakın olduğunu ifade eder. En güçlü yakınlık ilişkileri, örtüşen nesneler arasındaki ilişkilerdir, ancak yalnızca nesneleri tek bir alanda gruplandırmak da güçlü bir yakınlık etkisine sahip olabilir.

Bunun tersi de doğrudur elbette. Öğeler arasına boşluk koyarak, diğer özellikleri aynı olsa bile ayırma ekleyebilirsiniz.

Bu çevre grubunu ele alalım, örneğin:

daire gruplarıyla gösterilen gestalt yakınlık ilkesi — Soldaki grubu sağdakilerden ayıran tek şey çizgilerin yakınlığıdır. Yine de beyniniz sağdaki görüntüyü üç ayrı grup olarak yorumlar.

ux'u zayıflatan eylemde yakınlık gestalt ilkesi örneği — Yakınlık gestalt ilkesinin UX'i bozduğu bir USPS PDF formu örneği. Alan etiketlerinin altlarındaki alanlara daha yakın olması nedeniyle, insanlar yanlışlıkla "c" için bilgilerin oraya gittiğine inanırlar. ve "d" Ancak, bilgilerin metin etiketlerinin üzerindeki alanlarda sağlanması gerekiyor.

UX tasarımında yakınlık, en sık olarak, kullanıcıların katı sınırlar gibi şeyleri kullanmadan belirli şeyleri bir arada gruplandırmasını sağlamak için kullanılır. Benzer şeyleri her grup arasında boşluk bırakarak birbirine yaklaştırarak, izleyici, onların algılamasını istediğiniz organizasyonu ve yapıyı hemen algılayacaktır.

Şekil/Zemin

Şekil/zemin ilkesi, beynin negatif alanı işleme biçiminden yararlandığı için kapatma ilkesine benzer. Muhtemelen bu ilkenin örneklerini sosyal medyadaki memlerde veya logoların bir parçası olarak (daha önce bahsedilen FedEx logosu gibi) görmüşsünüzdür.

Beyniniz, bir görüntünün ön planında olduğunu düşündüğü nesneler (şekil veya odak noktası) ile arka plan (şekillerin üzerinde durduğu alan) arasında ayrım yapacaktır. İşlerin ilginçleştiği yer, ön plan ve arka planın aslında aşağıdaki gibi iki farklı görüntü içermesidir:

şekil-zemin ilişkisini oluşturan tasarım öğeleri ve ilkelerine bir örnek — Bazı insanlar Pittsburgh Hayvanat Bahçesi ve PPG Akvaryumu'nun logosuna bakarken ağacı ve kuşları hemen görürken, diğerleri goril ve aslanın birbirine baktığını görecektir.

şekil-zemin gestalt ilkesinin harika bir örneği — Şekil/zemin gestalt ilkesinin bir başka harika örneği.

Bu görüntüde, aralarında bir şamdan veya vazo oluşturan iki yüzün daha basit bir örneği görülebilir:

şekil-zemin ilkesinin basit bir örneği, bir gestalt tasarım ilkesi — Danimarkalı psikolog Edgar Rubin tarafından geliştirilen bu ünlü illüzyonda, izleyiciye genellikle iki şekil yorumu sunulur: iki yüz veya bir vazo. Şekil/zemin ilkesinin bir başka mükemmel örneği.

Genel olarak, beyniniz bir görüntünün daha büyük alanını zemin olarak ve daha küçük olanı şekil olarak yorumlayacaktır. Yukarıdaki resimde gösterildiği gibi, yine de, daha açık ve daha koyu renklerin, şekil olarak görüleni ve zemin olarak görüleni etkileyebileceğini görebilirsiniz.

Şekil/zemin ilkesi, ürün tasarımcıları özellikle aktif veya kullanımdayken bir odak noktasını vurgulamak istediğinde, örneğin kalıcı bir pencere açıldığında ve sitenin geri kalanı arka planda kaybolduğunda veya bir arama çubuğuna tıklanır ve onunla sitenin geri kalanı arasındaki kontrast artar.

Toptal tasarım bloguna abone olun ve e-Kitabımızı alın

Simetri ve Düzen

Simetri ve düzen yasası, Almanca "iyi şekil" anlamına gelen pragnanz olarak da bilinir. Bu ilkenin söylediği, beyninizin belirsiz şekilleri olabildiğince basit bir şekilde algılayacağıdır. Örneğin, Olimpiyat logosunun tek renkli bir versiyonu, bir dizi eğri çizgiden ziyade bir dizi örtüşen daire olarak görülür.

gestalt tasarım ilkelerinden bir diğeri olan pragnanz ilkesi olimpiyat logosu ile gösterilmiştir.

İşte gestalt tasarım ilkesi “ pragnanz ”ın bir başka güzel örneği:

pragnanz ilkesinin karmaşık bir örneği, başka bir gestalt ilkesi

Beyniniz soldaki görüntüyü bir dikdörtgen, daire ve üçgen olarak yorumlayacaktır, her birinin ana hatları eksik olsa bile, bunlar genel görüntüden daha basit şekillerdir.

ortak kader

Ortak kader, başlangıçta gestalt teorisine dahil edilmese de, sonradan eklenmiştir. UX tasarımında kullanışlılığı göz ardı edilemez. Bu ilke, insanların aynı yöne işaret eden veya hareket eden şeyleri bir araya getireceğini belirtir.

Doğada bunu kuş sürüleri veya balık sürüleri gibi şeylerde görürüz. Bir grup bireysel unsurdan oluşurlar, ancak görünüşte bir olarak hareket ettikleri için beynimiz onları bir araya toplar ve onları tek bir uyaran olarak kabul eder.

bir kuş sürüsü ortak kader ilkesini gösterir — Bir kuş sürüsü, aynı yönde uçarken tek bir birim olarak görülür ve böylece ortak bir kaderi paylaşır. (Unsplash'ta Martin Adams tarafından)

Modern tasarımda animasyonlu efektler daha yaygın hale geldiğinden, bu UX'de çok kullanışlıdır. Unutulmamalıdır ki, bu ilkeden yararlanmak için öğelerin aslında hareket etmesi gerekmez, ancak hareket izlenimi vermeleri gerekir.

UX Tasarımında Gestalt İlkeleri

Herhangi bir psikolojik ilkede olduğu gibi, gestaltın görsel algı ilkelerini tasarım çalışmanıza dahil etmeyi öğrenmek, kullanıcı deneyimini büyük ölçüde iyileştirebilir. İnsan beyninin nasıl çalıştığını anlamak ve ardından bir kişinin doğal eğilimlerinden yararlanmak, kullanıcının ilk ziyaretleri olsa bile bir web sitesinde rahat hissetmesini sağlayan daha sorunsuz bir etkileşim yaratır.

Gestalt ilkelerini hemen hemen her tasarıma dahil etmek nispeten kolaydır ve gelişigüzel görünen veya bir kullanıcının dikkatini çekmek için savaşıyormuş gibi görünen bir tasarımı, kullanıcıları yapmalarını istediğiniz eyleme yönlendiren kesintisiz, doğal bir etkileşim sunan bir tasarıma hızla yükseltebilir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

Tasarım İlkeleri: Hiyerarşiye Giriş
Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar
Tasarımda Güçlü Gestalt İlkeleri Nasıl Kullanılır (İnfografik ile)
Kapsamlı Bilgi Mimarisi Rehberi
Bu Başarılı Etkileşim Tasarım İlkeleri ile UX'inizi Güçlendirin