Renk, UX ve Kullanıcı Davranışını Nasıl Etkiler?

Yayınlanan: 2016-12-24

Renk: Bir tasarım doğru olduğunda, muhtemelen bunu asla fark etmezsiniz - ama yanlış olduğunda? Aşırı parlak, göz kamaştırıcı bir arka plan veya koyu gri bir arka plan üzerinde siyah metin olması fark etmez, ortalamanın altındaki renk seçenekleri en işlevsel uygulamayı bile mahvedebilir . Tasarımın diğer yönleri gibi, renk de yalnızca bir uygulamayı renklendirmek için orada değildir. Renk, kullanıcı deneyiminin diğer tüm özellikleri gibi bir araç olabilir.

Bir uygulamayı tasarlamak için kullanılan grafik tasarım felsefesi - her öğenin boyutundan kullanıcı arayüzünde nasıl kaydığına, evet, renge kadar - kullanıcı davranışını etkiler. Tasarımcıların bir projenin ilk aylarını tel çerçeveler yerine renk paletleri üzerinde uğraşarak geçirmelerinin iyi bir nedeni var.

Mükemmel paleti seçmek, kullanıcıların rahatlamasına yardımcı olan bir meditasyon uygulaması tasarlamak ile telefonlarını duvara fırlatmak istemelerine neden olan bir meditasyon uygulaması tasarlamak arasındaki fark olabilir. Bakiyenizi kontrol etme konusunda sizi endişelendiren bir bankacılık uygulaması ile bir sonraki maaş çekinin ne zaman geleceği konusundaki endişelerinizi giderebilecek bir bankacılık uygulaması arasındaki farktır.

Peki bunu nasıl doğru bir şekilde elde edersiniz - ve tasarımınızda renklere hakim olmak için ne yapabilirsiniz?

Grafik Tasarım Felsefesi: Renk Teorisi

Grafik tasarım felsefesinin (ve psikolojinin!) derinliğine girmeden önce, renk ve tasarımın bazı temel ilkelerini anlamak önemlidir. Renk son derece karmaşık bir konu gibi görünmese de, her sanat dersinin sadece rengin nasıl kullanılacağına değil, aynı zamanda nasıl renk yapılacağına dair bir dersle başlamasının iyi bir nedeni var.

Temeller - renk tekerleğinde açıklandığı gibi - basittir: birincil renkler (kırmızı, sarı ve mavi), ikincil renkler (yeşil, mor ve turuncu) oluşturmak için birleştirilebilir. Benzer şekilde, renk tonları oluşturmak için bir renge beyazın çeşitli fraksiyonları eklenebilir ve gölgeler oluşturmak için siyah eklenebilir.

Bir renk tekerleğinin görüntüsü: grafik tasarım felsefesini oluştururken önemli bir araç.
Bir renk tekerleği, grafik tasarım felsefenizi uygularken elinizin altında tutmanız gereken önemli bir araç olabilir.

Birbirine zıt renkler (kırmızı ve yeşil veya mavi ve turuncu gibi) tamamlayıcı olarak kabul edilir. Bu renkler güçlü bir kontrast oluşturarak yan yana (veya üst üste) olduklarında öne çıkmalarını sağlar.

Birbirine yakın renkler analog olarak kabul edilir. Bu renklerin kontrastı çok daha düşüktür, yani birbirine yakın olduklarında çok fazla göze çarpmazlar.

Yüksek veya düşük kontrastlı renkler hakkında doğal olarak "doğru" veya "yanlış" olan hiçbir şey yoktur. Bazen bir uygulama, birbiriyle tamamen zıt olan parlak renkler ister. Diğer zamanlarda, biraz daha nazik bir şey isteyeceksiniz. Genel olarak, bir şeyin öne çıkmasını ne kadar çok istiyorsanız, zıt renklere o kadar çok güvenmelisiniz.

Renklerin birlikte nasıl gittiğine (ve gitmediğine) dair bir fikir edinmenin en iyi yolu, onlarla oynamaktır. Şu anda bir proje üzerinde çalışmıyor olsanız bile, Adobe'nin renk tekerleğini hızlı bir şekilde döndürmek, zihninizin renk hakkında yeni bir şekilde düşünmesini sağlayabilir.

Duygu Örnekleri: Renk Ve Psikoloji

Uygulamanızın arkasındaki grafik tasarım felsefesini sağlamlaştırırken, yalnızca işlerin nasıl göründüğünü düşünmekle kalmaz, onların nasıl hissettirdiğini de düşünmeniz gerekir. Dokunsal geribildirimden de bahsetmiyoruz. Johann Wolfgang Goethe, rengin fizyolojik etkilerini araştırdığından beri, fiziksel ve duygusal etkiler üretmek için rengi kullanmaya takıntılıyız.

Bugün bile renk, birçok markanın tasarım felsefesinin merkezinde yer alıyor. Sağlık, iş dünyası ve hükümet , güven ve profesyonellik duygusu verdiği için maviyi kullanma eğilimindedir. Yeşil, enerji dolu genç bir renk olarak görülür ve elbette çevrecilik ve doğaya yakınlık duygusunu yansıtır. Kırmızı, enerjik ve dürtüseldir; hız, verimlilik ve güç izlenimi verir. Gördüğümüz her renk (ve kesinlikle belirli markalarla içsel olarak ilişkilendirdiğimiz her renk), doğrudan veya dolaylı olarak, bireysel markalara ilişkin algımızı yönlendirmeye yardımcı olan bir şeyi ima eder.

Renk merkezli olarak tanıdığınız markaları ve sembolleri düşünün. Apple, Wikipedia ve The New York Times, sakin bir güvenilirliği simgeleyen gri tonlamalı renklere sahiptir. Bu markalar dengeli ve güvenilir olarak görülüyor. Whole Foods, John Deere ve Starbucks'ın logolarında yeşil tonlar bulunur ve markaları ve ürünleriyle doğayı ve sağlıklılığı birleştirir.

Hatta bazı renkler markalarının ötesine geçerek tüm endüstrileri tanımlar. Örneğin, kaç tane fast food veya restoran zincirinin kırmızı veya sarı renk şemaları kullandığını düşünün. Bu renkler bizi zihinsel olarak tetiklemeye yardımcı olur ve bizi bir çeşit ürün satın almaya hazırlayan belirli bir psikolojik yere yerleştirir.

Bu, pazarlamacıların uzun zaman önce keşfettiği bir şey olsa da, bilim, renklerle ilgili ortak duygularımızın çoğunu haklı çıkarıyor. Örneğin, kırmızının bazı insanların belirli uyaranlara daha hızlı ve daha güçlü tepki vermesini sağladığı bulunmuştur. Aynı zamanda göz korkutabilir: araştırmacılar, sınava girenlerin kırmızı rengi gördüklerinde puanlarının daha kötü olduğunu buldu.

Hatta yabancı? Bir hapın rengi, nasıl çalıştığı üzerinde hafif bir etkiye sahiptir. Mavi haplar en iyi yatıştırıcı olarak, sarı en iyi antidepresan olarak çalışır ve her durumda parlak renkler en iyi sonucu verir. Bu muhtemelen aktif ilaçlara verdiğimiz tepkileri artıran plasebo etkisi olsa da, etki, şirketlerin yeni ilaçlar üretirken bunu dikkate alması için yeterince güçlü.

Şimdi, ruh hali izleme uygulamanızda sarı tabanlı bir renk şeması kullanmanın onu bir antidepresan olarak etkili hale getireceğini söylemiyoruz, ancak seçtiğiniz renk paletinin kullanıcının ruh hali üzerinde makul bir etkisi olabilir - bu yüzden akıllıca seçim yapın.

Sizin için tavsiye edilen:

Metaverse Hindistan Otomobil Endüstrisini Nasıl Dönüştürecek?

Metaverse Hindistan Otomobil Endüstrisini Nasıl Dönüştürecek?

Anti-Profiteing Hükmü Hintli Startuplar İçin Ne Anlama Geliyor?

Anti-Profiteing Hükmü Hintli Startuplar İçin Ne Anlama Geliyor?

Edtech Startup'ları Beceri Kazanmaya ve İş Gücünü Geleceğe Hazır Hale Getirmeye Nasıl Yardımcı Oluyor?

Edtech Startup'ları Hindistan'ın İşgücünün Becerilerini Geliştirmesine ve Geleceğe Hazır Olmasına Nasıl Yardımcı Oluyor?

Bu Hafta Yeni Çağ Teknoloji Hisseleri: Zomato'nun Sorunları Devam Ediyor, EaseMyTrip Gönderileri Stro...

Hintli Startup'lar Finansman İçin Kısayollar Kullanıyor

Hintli Startup'lar Finansman İçin Kısayollar Kullanıyor

Dijital pazarlama girişimi Logicserve Digital'in alternatif varlık yönetimi şirketi Florintree Advisors'tan 80 INR Cr fon sağladığı bildirildi.

Dijital Pazarlama Platformu Logicserve Çantaları 80 INR Cr Finansmanı, LS Dig Olarak Yeniden Markala...

Renk ve Kullanılabilirlik

Tasarım sadece güzel görünmekle ilgili değildir - bu, herhangi bir UX tasarımcısı için tartışmasız en önemli olan iki ilke olan işlevsellik ve kullanılabilirlikle ilgilidir. UX düzgün değilse, seçtiğiniz renk paletinin ne kadar güzel olduğu veya UI'nizin ne kadar çarpıcı olduğu önemli değildir. Bir kullanıcı verimli bir şekilde kaydıramazsa, kalıcı güce sahip olmayacaktır.

Ama tüm bunlarla rengin ne alakası var?

Basit: renk, gözü yönlendirmeye yardımcı olabilecek bir araçtır . Renkleri verimli bir şekilde kullanabiliyorsanız, uzun bir eğitim, bir dizi karmaşık video ve hatta tek bir kelime olmadan yeni bir kullanıcıya uygulamanız boyunca rehberlik edebilirsiniz. Sezgisel bir kullanıcı arayüzü, yalnızca kullanıcının dikkatini değil, aynı zamanda tüm deneyimle etkileşimlerini yönlendirmek için renk kullanır.

Grafik tasarım felsefesi, göze öncülük etmekle ilgilidir.
Bir daire içinde renkli kalemlerin, keskinleştirilmiş noktaları renkli olarak kalan siyah beyaz bir görüntü.

Bir an için, büyük kuruluşların yemek siparişlerini kolayca özelleştirmesine yardımcı olan bir yemek şirketi için bir uygulama geliştirdiğinizi hayal edin. Potansiyel bir müşteri, uygulamanızı ilk kez indirir ve açar. Ne görüyorlar?

Uygulamada, menü öğelerinin çoğu - arka plan ve tüm bilgi kutuları dahil - sessiz, donuk bir gri tonlamalı renk paletinde renklendirilir. Tek istisna, "sipariş" yazan turuncu-kırmızı bir kutudur. Tasarımcı olarak, kullanıcıların uygulamanızı kullanırken yapmak istedikleri bir numaralı şeyin yemek siparişlerini zahmetsizce ayarlamak olduğunu biliyorsunuz. Bu özelliği uygulamanın derinliklerine gizlemek veya ona ulaşmak için her sayfada sayfayı aşağı kaydırmalarını istemek yerine, onu öne ve ortaya koyarsınız. Sadece bu değil, aynı zamanda gözlerini hemen ona çekiyorsun. Renk, göze çarpmasına yardımcı olur ve yeni kullanıcılara tam olarak nereye gitmeleri gerektiğini gösterir.

Aynı şekilde, günlük olarak renkle çeşitli şekillerde etkileşime girer ve zihnimizde belirli sosyal çağrışımlar kurarız. Örneğin, bir trafik ışığı alın: yeşil, git, kırmızı dur ve sarı, yavaşla anlamına gelir (veya bizi ileride bir şey için uyarır). Sarıya önemli bir uyarı koyarak veya bir şeyi vurgulamak için kırmızıyı kullanarak, kullanıcıyı girdileri için hazırlayan bir mesajı güçlü bir şekilde iletebilirsiniz.

Ancak aynı mantık sadece uyarı ekranlarından daha fazlası için kullanılabilir. Uygulamanızda uygulama içi satın alma işlemlerine yol açan bir düğmenin rengini değiştirmek, dönüşüm oranlarını önemli ölçüde etkileyebilir.

Bir uygulamanın içinde olmasa da HubSpot, yalnızca bir düğmeyi yeşil yerine kırmızı yaparak dönüşüm oranlarını %21 artırabileceklerini buldu. Bu, her uygulama içi satın alma düğmesini parlak bir kırmızıya çevirmeniz gerektiği anlamına gelmez, ancak burada, rengin yalnızca tasarım felsefenizin bir parçası olamayacağına dair bir argüman var: tüm uygulama geliştirme felsefeniz.

Yetişkin bir boyama kitabından kısmen bitmiş bir sayfanın fotoğrafı.
Cesur renk seçimlerinde bile yumuşak tonları kazıyoruz. Renk tonu ve gölgelendirme, grafik tasarım felsefenizi iyileştirmenin basit yollarıdır.

Rengi Akıllıca Kullanmak: Tasarım ve Erişilebilirlik Felsefesi

Proto.io'da erişilebilirlik, tasarım felsefemizin her zaman ön saflarında yer alır. Açık konuşmak gerekirse, erişilebilirlik iyi bir tasarım haline getirilmesi gereken bir şeydir. Eğer orada değilse, o zaman tasarım çok iyi değildir.

Erkeklerin yaklaşık %8'i ve kadınların %0,5'i bir çeşit renk körlüğüne sahiptir. Popüler düşüncenin aksine, tek tip bir renk körlüğü yoktur, ancak kırmızı/yeşil renk körlüğü en yaygın olma eğilimindedir. Bu renk körlüğünden muzdarip biri, genellikle hem kırmızı hem de yeşilin çeşitlerini görmekte zorlanır. Bu renk körlüğünün ciddiyeti biraz farklılık gösterse de, hafif kırmızı/yeşil renk körlüğü bile birçok uygulamayı kullanmayı neredeyse imkansız hale getirebilir.

Renk körlüğünün dışında, miyop kullanıcılar, ekranı yüzlerine yaklaştırmadıkça genellikle düşük kontrastlı metinleri okumakta zorlanırlar - bu, birçok uygulamanın kullanılabilirliğini potansiyel olarak bozabilir.

Bu sorunların her ikisinin de çözümü oldukça basittir: metni arka planda görüntülerken kontrast oluşturmayan renkler kullanmaktan kaçının . Herkesin uygulamanızı istediğiniz gibi görebileceğini garanti edemeseniz de, zıt renkler kullanıyorsanız, en azından insanlara kullanabilecekleri bir uygulama vermiş olursunuz. Benzer şekilde, yüksek kontrastlı renkler kullanmak metnin herkes için okunmasını kolaylaştıracaktır - görme sorunları olmasa bile.

Erişilebilirliği artırmak için başka bir seçenek de uygulamanızda değiştirilebilir renk paletleri sunmaktır. Bu herkes için bir seçenek olmasa da uygulamanızın erişilebilirliğini büyük ölçüde artırabilir. Kullanıcıların belirli özelliklerin rengini değiştirmesine de izin verebilirsiniz. Örneğin, uygulamanızın vurgu rengini veya uygulama genelinde metnin rengini değiştiren bir seçeneğiniz olabilir. Bu seçeneklerin her ikisi de kontrolü biraz elinizden alabilirken, uygulamanızın daha geniş bir kitle tarafından erişilebilir olmasını sağlayacaktır.

Hala uygulamanızın erişilebilirliğine zarar vermeyecek şekilde rengi tasarım felsefenize nasıl entegre edeceğinizi bulmakta zorlanıyorsanız, Google'ın malzeme tasarım kitaplığına göz atmanızı öneririz.

Mükemmel Paleti Seçmek: Tasarım Felsefenizi Sağlamlaştırmak

Renk söz konusu olduğunda uyulması gereken bazı kurallar olduğu açık olsa da, mutlaka bir bilim de değildir. Renk, genellikle hissetmek gibi daha soyut şeylerle ilgilidir. Uygulamanız bir kullanıcıda bir tür duygu sergilemeye çalışmıyor olsa bile, bu olmayacağı anlamına gelmez. Mükemmel paleti bulmak siyah beyaz bir çaba olmasa da, gri tonlamalı bir şeyle başlamanızı öneririz .

Gri tonlamalı bir degradede uygulamanızın düz bir prototipini oluşturun ve bunu temeliniz olarak kullanın. Nasıl göründüğüne ve hissettirdiğine dikkat edin: QA ekibinize iletin ve ne söyleyeceklerini görün. Alışma süreciniz renksiz mi bulanık? Uygulamanızın yanlış kısımlarına mı dikkat çekiyorsunuz? Bu geri bildirimle, birkaç prototip daha tasarlayın, bu sefer renk getirin. Tek bir palete güvenmeyin. Bunun yerine, Google'ın malzeme tasarımı web sitesinden bir ipucu alın ve birkaç renk örneğiyle oynayın.

Bir yelpazeye yayılmış birden fazla renk örneği tutan bir kişinin fotoğrafı.
Bu kişinin grafik tasarım felsefesi kırmızıya şok edici bir unsur katıyor.

Bu düzeltmeleri de KG'ye gönderin. A/B'yi birbirlerine (ve orijinal gri tonlamalı sürüme) karşı test etmekten korkmayın. Mücadeleye kattığınız renkler hakkında bazı zor sorular sorduğunuzdan emin olun. Uygulamada kullanıcının gözünü yönlendirmek için renk mi kullanıyorsunuz? Sadece bir kıvılcım eklemek için ekrana renk mi atıyorsunuz? Renk, kullanıcının gitmek istediği yere gitmesini engelliyor mu?

Kullanıcı psikolojisini veya erişilebilirliği unutmayın. Bir seyahat uygulaması oluşturuyorsanız, gerçekten her şeyin parlak kırmızı olmasını ister misiniz? Bir sağlık uygulaması oluşturuyorsanız, arka planınız gerçekten yeşil mi olmalı? Metnin okunaklı olması için renkleriniz yeterince kontrast oluşturuyor mu?

İyi UX tasarımı tüm bu soruları dikkate alır - sonuçta rengin kullanıcı davranışı ve keyfi üzerinde kesin bir etkisi vardır. Tasarım felsefeniz bunu dikkate almıyorsa, düşündüğünüz kadar erişilebilir veya kullanışlı olmayan bir uygulama yapıyor olabilirsiniz. Her adımda tasarımınızı prototiplediğinizden emin olun ve bir veya iki renge fazla takılmayın.

Deneyin, başka bir renk seçin ve sizin için mükemmel olan paleti bulana kadar gözden geçirmeye devam edin.