UX'te Rengin Rolü

Yayınlanan: 2022-03-11

Renk psikolojisini anlamak, dijital tasarımda iyi sonuç veren bir renk paleti oluşturmanın önemli bir yönüdür. Renk bazen bazı tasarımcılar tarafından tamamen estetik bir seçim olarak düşünülse de, aslında bir tasarımın kullanıcılar üzerindeki psikolojik etkisinin ve dolayısıyla UX'inin önemli bir bileşenidir.

İyi düşünülmüş bir renk paleti, tasarımı "iyi"den "harika"ya yükseltebilirken, vasat veya kötü bir renk paleti, kullanıcının genel deneyimini olumsuz etkileyebilir ve hatta bir siteyi veya uygulamayı kullanma becerisini etkileyebilir.

Genel olarak renk teorisi karmaşık bir konu olsa ve UX tasarımında renk kullanımı, sadece güzel görünen bir palet oluşturmaktan çok daha fazlasını kapsar (erişilebilirlik ve aynı tondaki farklı tonların bile psikolojik etkileri gibi); tasarımcılar, tüm süreçlerini yeniden düşünmeye gerek kalmadan kademeli olarak renklerin daha iyi kullanımını tasarımlarına dahil edebilirler. Bir tasarımcı temel bilgileri kapsadığında, renk teorisinin en ödüllendirici kısımlarından biri, tasarımlarına daha beklenmedik renkleri dahil etmeyi öğrenmektir.

Barclays çok özel bir web sitesi renk şeması kullanır
Biraz fazla kullanılmış olsa da, gri/beyaz/mavi renk paleti finans siteleri için çok etkilidir çünkü mavi çoğunlukla renk psikolojisine bağlılık ve güven ile ilişkilendirilir.

Renk Psikolojisi

Renk teorisi ve rengin kullanıcılar üzerindeki psikolojik etkileri karmaşık ve genellikle öznel bir konudur. Ancak daha evrensel düzeyde ele alınabilecek bazı yönler var.

Ana renklerin (birincil, ikincil ve üçüncül) ortak anlamları, geleneksel renk paletleri ve renk anlamlarındaki kültürel farklılıklar gibi şeyler oldukça basittir. Tasarımcılar bu temel bilgileri kolayca öğrenebilir ve işlerinde uygulayabilirler. Ancak konu UX tasarımında renk kullanımı olduğunda öğrenilmesi gereken daha ince noktalar var.

Renk psikolojisi, renk teorisinin karmaşık bir yönüdür.
Temel renk anlamlarının öğrenilmesi ve hatırlanması kolay olabilir, ancak daha ince anlamlar da dijital tasarımda iyi bir şekilde kullanılabilir. (Vandelay Tasarım)

Arayüz renklerinin duygusal etkisi göz ardı edilmemelidir. Ve bazı renkler UX tasarımında "evrensel" olsa da (siyah, beyaz ve gri gibi, en az biri hemen hemen her iyi tasarımda kullanılır), birleştirildikleri renklerin üzerinde büyük bir etkisi olabilir. bir kullanıcının algısı.

Tabii ki, rengin kullanılma şekli de onun nasıl algılandığı üzerinde dramatik bir etkiye sahip olabilir. Örneğin, modern, minimalist bir tasarımda ana renk olarak kullanılan mavi, daha karmaşık, kurumsal bir tasarımda vurgu rengi olarak kullanılan aynı maviden çok farklı bir his verecektir.

Zutano, gri ve kırmızı bir web sitesi renk şeması kullanır.

P&N Bank, parlak kırmızı bir UI renk paleti kullanır
Web sitesi renk şemalarındaki küçük farklılıklar, sitenin uyandırdığı duygular üzerinde büyük bir etkiye sahiptir. Zutano ve P&N Bank, kırmızı ve beyazın tonlarını kullanıyor, ancak sitelerinin tamamen farklı duygusal etkileri var.

Renkte Kültürel Farklılıklar

Tasarımcıların göz ardı etme eğiliminde olduğu bir konu, farklı renkler etrafında var olabilecek kültürel farklılıklardır. Örneğin, birçok Batı kültüründe beyaz, saflık, masumiyet ve umut gibi şeylerle ilişkilendirilir. Ancak Asya'nın bazı bölgelerinde beyaz, ölüm, yas ve kötü şansla ilişkilendirilir.

Bazı renkler kültürden bağımsız olarak (turuncu gibi) genellikle olumlu çağrışımlara sahipken, beyaz gibi diğerleri farklı ülkeler arasında büyük farklılıklar gösterir. Bu, mümkün olan en geniş kitleye hitap edecek bir tasarım yaratmaya çalışırken bir tasarımcının hayatını kesinlikle karmaşıklaştırabilir.

Tasarımcıların, ürün veya web sitesi için hedeflenen kitleye dayalı olarak renk paletlerinin kültürel etkilerine bakmaları önemlidir. Bir ürün dünya çapında bir kitleyi hedefleyecekse, olumsuz kültürel çağrışımları önlemek için kullanılan renkleri ve görüntüleri dengelediğinizden emin olun. Bir ürün öncelikle yalnızca belirli bir kültürü hedefliyorsa, tasarımcılar seçilen paletin diğer kültürlerdeki etkilerine daha az dikkat edebilir.

Renk psikolojisi, büyük ölçüde kültürel çağrışımlara dayalı olarak dünya çapında farklılık gösterir.
Renklerin dünyadaki çeşitli kültürlerde tamamen farklı anlamları olabilir. (Bilgi Güzeldir)

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

UX Renklerini Markayla Eşleştirme

Marka değerleri, bir renk paleti oluşturmada önemli bir rol oynamalıdır. Ama tek önemli faktör onlar değil. Rakipler tarafından halihazırda kullanılan renkler gibi endüstri normları da kilit öneme sahiptir. Bir markanın birincil rekabetiyle neredeyse aynı olan bir renk paleti kullanmak, kafa karışıklığı yaratmanın ve markanın öne çıkmamasını sağlamanın harika bir yoludur.

Kabul, bunun istisnaları var. Örneğin McDonald's ve Wendy's'i ele alalım. Her ikisi de birbirleriyle doğrudan rekabet halinde olan fast food restoranlarıdır. Her ikisi de kırmızı ve sarı renk paleti kullanır. Ancak logolarına bakıldığında, Wendy'nin logosu sarı vurgulu kırmızı renkteyken, McDonald's tam tersi. Ambalajları da bu renkleri farklı şekillerde kullanarak markalar arasında daha da farklılaşıyor. Bu nedenle, ambalajlarından logolar ve diğer tanımlayıcı işaretler çıkarılsa bile, ikisi de diğeriyle kolayca karıştırılamaz.

Beklenmeyen kullanıcı arayüzü renk paletleri, bir markayı rakiplerinden ayırmak için çok ileri gidebilir
Kırmızı, tehlikenin ve tutkunun rengidir, aynı zamanda heyecanın rengidir, bu da Virgin Atlantic'in markaları için neden onu kullandığını açıklayabilir (mor ile birlikte lüks anlamına gelir).

Markanın değerlerini destekleyen bir marka renk paleti yaratmanın ilk adımı, çeşitli renklerin anlamını ve onları nasıl daha açık/parlak/koyu/donuk/vb. yapmak olduğunu anlamaktır. onları etkileyebilir. İşte farklı renklerin ne anlama geldiğinin temel bir dökümü:

  • Kırmızı - Kırmızı, tehlikenin ve tutkunun yanı sıra heyecanın rengidir. Çok güçlü bir renktir ve insanlarda güçlü reaksiyonlara neden olabilir. Pembeye aydınlatmak onu daha kadınsı ve romantik hale getirirken, tonu kestane rengine koyulaştırmak onu daha bastırılmış ve geleneksel hale getirir.
  • Turuncu - Turuncu, macera ve gençlikle de ilişkilendirilen çok yaratıcı bir renktir. O da çok enerjik. Turuncunun 70'lerin stiliyle olan güçlü bağları nedeniyle retro bir his uyandırabilir.
  • Sarı - Sarı mutlu, iyimser ve neşelidir. Hem çocuklar hem de yetişkinler için tasarımlarda popülerdir. Daha pastel tonlar genellikle cinsiyetten bağımsız bir bebek rengi olarak kullanılırken, yaratıcı tasarımlarda daha parlak sarılar popülerdir. Sarının daha koyu tonları, zenginlik ve başarı ile ilişkilendirilen altın olur.
  • Yeşil — Yeşilin çeşitli çağrışımları vardır. Bir yandan zenginlik ve gelenek (özellikle koyu tonlar) duygularını kışkırtırken, diğer yandan çevrecilik ve doğa ile güçlü bir şekilde ilişkilidir. Kireç yeşillikleri genellikle yenilenme ve büyüme ile ilişkilendirilir.
  • Mavi — Mavi çoğunlukla sadakat ve güvenle ilişkilendirilir. Daha parlak maviler iletişimle ilişkilendirilebilirken, daha koyu ve daha koyu maviler üzüntü ve depresyon ile ilişkilendirilebilir. Mavi, dünyada evrensel olarak en çok sevilen renktir ve bu, birçok şirketin markaları için neden mavi tonları tercih ettiğini açıklayabilir.
  • Mor - Mor, çeşitli anlamları olan başka bir renk tonudur. Uzun zamandır kraliyet ve zenginlik ile ilişkilendirilmiştir (birçok eski uygarlıkta mor boya nadir olduğundan, kraliyet için ayrılmıştır). Ama aynı zamanda gizem ve maneviyatla da ilişkilidir. Mor aynı zamanda yaratıcılığı da uyandırabilir.
  • Siyah - Siyah, sofistike ve lüks anlamına gelir. Bununla birlikte, üzüntü ve olumsuzluğa da bağlı olabilir. Siyahın yanında kullanılan diğer UX renklerine bağlı olarak, modern veya geleneksel, resmi veya gündelik bir his verebilir.
  • Beyaz - Beyaz saflık, masumiyet ve pozitifliğe bağlıdır. Beyaz, nötrlüğü ve sadeliği nedeniyle minimalist tasarımlarda da oldukça popülerdir. Siyah gibi beyaz da birlikte kullanıldığı diğer renklerin özelliklerini kolayca alır.
  • Gri — Gri, bağlama bağlı olarak çeşitli anlamlara sahiptir. Muhafazakar ve sofistike veya pis ve donuk olabilir. Duygusuz veya karamsar olabilir. Üzüntü ve üzüntü ile de ilişkilendirilebilir.
  • Kahverengi - Kahverengi (aslında turuncunun koyu bir tonudur) yere yakın ve topraklanmış olmakla ilişkilendirilir. Aynı zamanda doğa ve hatta rahatlık ile ilişkilidir. Ve elbette, kirli veya pis olmakla bağlantılı olabilir.

Bu temel renk anlamlarını bilmek, tasarımcılara herhangi bir marka veya ürün için renk paletleri oluşturmak için sağlam bir temel sağlar.

Bununla birlikte, renk teorisi kısmen bilim ve kısmen sanattır. Bir rengin genellikle belirli bir duygu veya ruh hali ile ilişkilendirilmesi, onu farklı renklerle birleştirerek, tam tonu değiştirerek veya diğer tasarım öğeleri arasında nasıl kullanıldığını değiştirerek başka şekillerde algılanamayacağı anlamına gelmez.

Yerleşik renk psikolojisinden yararlanmak, UX'i geliştirmenin sağlam bir yoludur
Bu bitki sulama uygulaması konsepti, ana rengi için güzel bir yeşil tonu kullanıyor ve mavi, sarı ve kırmızı vurgular kullanıcılara anlamlı gelecek şekilde kullanılıyor. (Amy Holley Hirst tarafından)

Alışılmadık UX Renklerini Kullanma

UX renklerinin alışılmadık kullanımı, bir markayı diğerlerinden ayırmanın harika bir yoludur. Ve bir tasarımcının birleştirmek istediği eski renkleri basitçe bir araya getirmekten daha fazla incelik gerektirse de, UX tasarımlarında beklenmedik renklerin nasıl kullanılacağını öğrenmek o kadar da zor değil.

Bir tasarıma alışılmadık renkler eklemek söz konusu olduğunda, vurgu renkleri başlamak için en kolay yerdir. Örneğin, bir hukuk firmasının web sitesi, lacivert ve griden oluşan geleneksel bir renk paleti kullanabilir. Ancak bazı limon yeşili vurgular ekleyin ve tasarım aniden lacivert ve gri web siteleri ile diğer hukuk firmalarının denizinden ayrılır. Veya diğer yasal sektör sitelerinden kesinlikle farklı olan modern bir web sitesi oluşturmak için beyaz, gri ve limon yeşili renk paleti kullanan Hogan Lovells'in bu örneğe bakın. Ortalama yasal sitenizden daha genç, daha modern bir kalabalığa hitap eder.

Beklenmeyen bir web sitesi renk şeması
Hogan Lovells, çok taze bir renk paleti ile modern bir tasarım yaratıyor.

Berdan Emlak, beklenmedik bir renk paleti kullanan başka bir sitedir. Emlak sitesi, her ikisi de ortalama emlak sitenizden (büyük mavi, kırmızı ve yeşil alanların hakim olduğu) çok daha enerjik olan sarı ve şeftali tonlarını kullanır.

Bu emlak sitesinde başka bir beklenmedik web sitesi renk şeması
Berdan Real Estate, taze ve sıcak bir şey lehine tipik kurumsal renk şemalarından kaçınır.

Sigorta genellikle modern, çığır açan bir endüstri olarak düşünülmez, ancak bu, tasarımlarının olamayacağı anlamına gelmez. Lemonade'nin web sitesi, fuşya desenli gri ve beyaz renk şeması kullanıyor. Risk almadığı bilinmeyen bir sektörde bu tamamen beklenmedik bir durum.

Lemonade web sitesinde tamamen beklenmedik bir UX renk şeması
Lemonade'nin markalarında fuşya tercihi sektörde tamamen beklenmedik bir durum.

Web'de pratikte kullanılan ve ilham almak için kullanılabilecek çok sayıda geleneksel olmayan UX renk örneği vardır.

60-30-10 Kuralı

60-30-10 Kuralı, iyi dengelenmiş ve görsel olarak ilginç renk paletleri oluşturmak için basit bir teoridir. Buradaki fikir, tek bir rengin (genellikle oldukça nötr bir şey (gerçekten veya psikolojik olarak)), paletin %60'ını oluşturmasıdır. Diğer bir tamamlayıcı renk ise paletin %30'unu oluşturuyor. Ve sonra tasarımın kalan %10'luk kısmı için vurgu olarak üçüncü bir renk kullanılır.

Bu yöntem, tasarımcıların bir endüstri veya marka içinde beklenen normların çok dışına çıkmadan alışılmamış renk paletleriyle denemeler yapmaya başlamasını çok daha kolay hale getirir. Beklenmedik bir renk tonu eklemek, aksi takdirde belirli bir şirketten beklenenlere uyan bir tasarımı yükseltebilir. Ayrıca rakiplerinden çok daha ileri görüşlü bir marka paleti yaratmanın ilk adımı olabilir, böylece markayı diğerlerinden ayırabilir ve daha akılda kalıcı hale getirebilir.

Web tasarımı renk teorisinde 60-30-10 kuralına mükemmel bir örnek
Clarity Stress Management'ın web sitesi, üstbilgi ve altbilgide %60 mor, %30 beyaz ve %10 macenta ile 60-30-10 kuralını güzel bir şekilde sergiliyor.

Çözüm

Renk teorisi karmaşık bir konu olsa da, temel bilgileri öğrenmek özellikle karmaşık değildir. Oradan tasarımcılar, tasarımları için daha çeşitli ve sofistike renk paletleri oluşturmak için bilgilerini geliştirebilirler.

İyi tasarlanmış bir renk paleti, özellikle de beklenmedik tonlar içeren bir renk paleti, yalnızca estetik bir seçim değildir. UX tasarımcılarının daha iyi deneyimler yaratmak için yararlanmaları gereken kullanıcılar üzerinde önemli psikolojik etkileri olabilir.

• • •

Toptal Tasarım Blogunda daha fazla okuma:

  • Tasarım Psikolojisi ve Müthiş Kullanıcı Deneyiminin Sinirbilimi
  • Karanlık UI'ler. İyi ve kötü. Yapılması ve yapılmaması gerekenler.
  • Sürdürülebilir Ürün Tasarımı için Duygusal Markalaşma
  • İlhamınızı Kullanın - Mood Panoları Kılavuzu
  • İkna Edici Tasarım: İleri Psikolojiyi Etkili Kullanmak