User Experience
8 vanliga designmyter
"Användare skrollar inte och white space är outnyttjade ytor" Vi listar 8 designmyter du bör känna till.
UX och Design
Färgpsykologi - Färgers betydelse och effekt på webben
Färg är mer än bara ett dekorativt element. Visste du till exempel att färgvalen i en digital tjänst kan avgöra hur besökare agerar? Med hjälp av rätt färger kan man fånga besökarnas uppmärksamhet, guida dem rätt och öka konvertering. Vi guidar dig i färgers betydelse och vad du ska tänka vid val av färger för webben.
Färgpsykologi är ett forskningsområde som undersöker hur färg påverkar vårt beteende och beslutsfattande. Det är mer än bara ”grönt är skönt” och ”gult är fult”. Det finns medfödda komponenter för hur vi uppfattar färg. Det finns även personliga preferenser. När vi ska designa och skapa ett starkt varumärke behöver vi släppa våra personliga preferenser och noggrant tänka igenom färgvalen.
Även om ett företag har en befintlig grafisk profil kan vi på webben behöva justera eller lägga till komplementfärger för att skapa rätt balans. Rätt saker ska fånga besökarnas uppmärksamhet. Färgvalen ska bidra till att innehållet är tillgängligt och konverterande. Webben ska också arbeta varumärkesbyggande. Samtidigt vill vi väcka rätt sorts känslor och få användarna att ta till sig vår information eller handla våra produkter och tjänster.
Positiva och negativa associationer
Varje färg har en positiv och negativ association beroende på vilken ton eller nyans som används. Vissa färger förknippas med vissa typer av känslor och som vi nämnde tidigare kan de vara väldigt personliga. Tidigare upplevelser kan få oss att gilla något särskilt mycket eller lite mindre. Någon ser gult och tänker på mormors blommiga köksduk och goda sockerkaka medan en annan person förknippar det med obehag och sjukhuskorridorer. Ofta har vi associationer omedvetet.
Det finns även kulturella betydelser av färger som man kan behöva ta hänsyn till när man designar för en internationell marknad. I vissa länder är vitt sorgens färg medan vi i Sverige förknippar sorg med svart. Inom hinduismen hör gult ihop med kunskap och lärande medan vi i väst förknippar kunskap med lila. Rött och grönt har vi lärt oss att förknippa med ”på” och ”av” liksom rött och blått för varmt och kallt vatten i kranar.
Primär färg och komplementfärg
När man tar fram en grafisk profil för webben har man ofta en primär färg och till det komplementfärger. Den primära färgen ska göra att kunderna känner igen varumärket och komplementfärgen (eller färgerna) ska kontrastera och förhöja upplevelsen samt dra ögat till sig vid rätt tillfälle. Komplementfärger kan exempelvis användas på viktiga call-to-action (CTA) men de kan även användas subtilt och därmed få den primära färgen att stå ut mer.
Varumärken och färger på webben
Färger är en kraftfull form av icke-verbal kommunikation och är ett viktigt verktyg inom marknadsföring. Färger ger oss information. Om en tomat är röd vet vi att den är mogen. Är himlen mörk vet vi att det är oväder på gång. Det samma gäller varumärken på webben. Det är ingen slump att blått är internets vanligaste färg, att rött är en REA-färg eller att miljövänliga produkter ofta har grönt i sin profil. Etablerade varumärken och färger är nära sammankopplade. Om vi säger Coop tänker nog de flesta på färgen grön och säger vi Twitter tänker man på blått o.s.v.
Hur ska man då tänka med färger på webben och sitt varumärke? Vi kan ta ICA som ett exempel. Rött är deras primära färg. Att använda för mycket rött på webben kan lätt bli intensivt och jobbigt att titta på. ICA använder därför rött på viktiga call-to-action, där man vill fånga användarens uppmärksamhet. De har sedan kompletterat sin färgpalett med en ljusgrå färg och ytterligare ljusare nyanser av den röda primärfärgen. På webben kan man alltså behöva komplettera och justera färgpaletten så att den passar webbgränssnitt och stödjer olika användarbeteenden.
Om vi tar IKEA som ett annat exempel. Deras varumärkesfärger är gult och blått. Men deras webbplats är inte enbart gul och blå. De använder en vit grund med svart och grått som de främsta komplementfärgerna. De använder sedan blått och gult på dekorativa element som på textpuffar och köpknappar. Det är produkterna som ska framhävas och därför är hemsidans design relativt avskalad i sina färgval. Det skapar en bra dynamik och ger en ren men pigg känsla samtidigt som varumärket ändå lyser igenom i detaljer.
Färgpsykologi - färgers betydelse kopplat till känslor
Varma färger
Varma färger så som gult, orange, rött och rosa associeras ofta med passion, energi och glädje. De är dominerande och fångar vår uppmärksamhet. Men de kan också kännas skrikiga, upplevas akuta och skapa oro. På webben kan de med fördel användas som en uppmaning till handling eftersom de lätt fångar ögats uppmärksamhet, till exempel på en knapp eller ett rea-pris.
Kalla färger
Kalla färger som grönt, blått och lila upplevs ofta seriösa, trygga och lugnande. Men ibland kan de även upplevas som trista och ledsamma beroende på hur mättade och klara de är. Kalla färger är vanligt förekommande på webben, kanske för att de just är lugnande eller då de kan upplevas lättare att läsa. Effekten av behagliga färger som gör oss trygga och gör information lättare att ta till sig kan öka sannolikheten att besökarna stannar kvar längre på din webbplats.
Grönt
Grönt bidrar med en känsla av lugn, hälsa, kraft och natur. Den förknippas med förnyelse, optimism, tillväxt, ekologiskt och hållbart, men även med illamående, girighet och att vara oerfaren. Grönt är väldigt effektivt för att lyfta och förstärka miljöaspekter. I vår kultur associeras grönt med någonting positivt - att något är ”godkänt”. Det gör grönt till en bra färg för element där man vill visa besökaren att en uppgift har slutförts framgångsrikt eller att något inkluderas i ett köp. Grönt är dock en lite lurig färg eftersom den kan förekomma i så många olika nyanser och kan därmed snabbt skifta från härlig till unken.
Associationer:
+ hållbarhet, lugn, hälsa, natur, tillväxt
- illamående, girighet, oerfaren
Blått
Blått är flest konsumenters favoritfärg och internets vanligaste färg. Kanske inte så konstigt eftersom blått förmedlar lugn, trygghet, förtroende, ansvar och tillit. I branscher där det är viktigt att konsumenter känner sig lugn och trygg ser man ofta en blå färgprofil. Bank-, finans- och teknikbranschen är några exempel. Men blått kan också förmedla kyla, stelhet och okänslighet.
Associationer:
+ lugn, trygg, tillit, ansvarsfull, seriös, stabil
- vanlig, kylighet, stel, okänslig
Lila
Lila är den historiskt kungliga färgen. Eftersom det är en kombination av både rött och blått har den egenskaper från båda dessa färger. Lila förknippas med dramatik, lyx, premium, framgång och kreativitet. Den lila färgen står även för intelligens, kunskap, spiritualitet och respekt men kan i mörkare toner även associeras med ledsamhet och sorg.
Associationer:
+ dramatik, lyx, framgång, kreativitet, intelligens, spiritualitet, respekt
- ledsamhet, sorg
Rött
Rött är en kraftfull och stark färg som triggar starka känslor. Den är intensiv och akut och signalerar energi, kraft och passion. Rött höjer vår puls och ger oss en känsla av att något är aggressivt eller brådskande. På grund av sin intensitet sägs den öka vår aptit. Rött är alltså en effektiv färg för försäljning och call-to-actions för att exempelvis synliggöra ett specialerbjudande som snart går ut eller som varning och validering på webben.
Associationer:
+ kraft, energi, passion
- fara, akut, aggressivitet
Gul
Gult står för glädje, optimism, energi, ungdomlighet och nyfikenhet. Gult sägs förstärka hungerkänslor och kan ge en känsla av att en produkt är billig. Beroende på nyans så kan för mycket gult på en hemsida bli intensiv, distraherande och jobbigt för ögat. I för stora mängder kan den också framstå som oseriös och barnslig.
Associationer:
+ glädje, ungdom, lätthet, optimism, energi
- oseriös, barnslig
Orange
Många förknippar orange med värme, något exotiskt, lekfullt och optimistiskt. Den kan också upplevas som omogen, kanske på grund av sin lekfulla känsla. Liksom gult har orange en tendens att få något dyrt att verka billigare. Orange kan väcka vår uppmärksamhet och uppmana till interaktion och passar bra att använda i detaljer så som call-to-action-knappar. Orange står även för försiktighet då många föremål som används i säkerhetssyfte har denna färg, till exempel koner och skyltar vid vägarbeten. På webben fungerar en stark orange nyans ofta mindre bra som bakgrund på stora ytor eftersom den är väldigt intensiv och blir jobbigt för ökat att fokusera på. En ljusare orange däremot kan tillföra värme på en webbplats.
Associationer:
+ värme, lekfullhet, energisk, exotisk, optimistisk
- försiktighet, omoget
Rosa
Rosa upplevs som positiv, glad, kreativ och passionerad. En ljusare nyans av rosa kan vara lugnande och barnslig medan en starkare rosa kan chockera. Historiskt förknippas rosa med kvinnlighet och omtänksamhet.
Associationer:
+ passion, omtänksamhet, positivitet, kvinnlighet
- impulsiv, chockerande, barnslig
Brunt
Brunt associeras med värme, pålitlighet, att vara jordnära eller maskulint. Likt grönt kan brunt i rätt nyans signalera en känsla av naturligt och ekologiskt. I fel nyans kan dock brunt förmedla en känsla av något smutsigt, osofistikerat eller tungt.
Associationer:
+ värme, pålitlig, jordnära, maskulint
- smutsigt, osofistikerat, tungt
Svart
I Sverige har svart historiskt sett förknippats med sorg, mörker, rädsla och ondska men idag förknippas det även med en känsla av elegans, sofistikerat, exklusivt, lyxigt och minimalistiskt. Svart associeras även med makt, styrka och formalitet och är bra då man vill engagera och framföra ett viktigt och starkt budskap.
Eftersom svart är en neutral färg spelar kombinationen med andra färger in vad den förmedlar. Svart får till exempel andra färger att se klarare ut. Om vi kombinera svart med pastell kan vi ge webbplatsen en lekfull känsla, kompletterar vi den med vitt blir känslan mer sofistikerad. Lägger vi i stället till silver eller guld kan vi addera exklusivitet.
Associationer:
+ elegans, lyxigt, minimalistiskt, styrka
- sorg, mörker, rädsla, allvar
Vitt
Vitt förmedlar en känsla av positivitet, enkelhet, neutralitet och renhet men även tomhet och sterilt. Vitt kan bidra med en luftig känsla och är en bra färg att använda som bakgrund på webbplatser, eftersom andra färger lätt ger ett intensivt intryck.
Vitt är även förknippat med fred och kan därför ge oss en känsla av lugn och även inspirera oss till förändring. Vi talar ofta om ett vitt oskrivet blad när vi ska göra en nystart. Men utan andra färger kan vitt upplevas tråkigt och opersonligt.
Associationer:
+ Enkelhet, renhet, klarhet, neutralitet
- Tomhet, isolering, sterilt, opersonligt
Grått
Grå är en neutral färg och toner av grått kan ge en exklusiv och minimalistisk och behaglig känsla. Ofta är grått bra att använda som bakgrundsfärg på webben då innehållet i stället får mer uppmärksamhet.
Betydelsen hos de olika nyanserna i gråskalan är väldigt olika. Mörkgrå upplevs mer dramatisk och mystisk medan ljusgrått upplevs mer positiv. Ljusgrå kan ofta användas i stället för vitt och mörkgrå i stället för svart på exempelvis typografi. Grått som får en metallic-känsla förknippas med prestige och elegans och används gärna inom teknologibranschen för att signalera modernitet, innovation och hög kvalitet.
Associationer:
+ Exklusiv, minimalistisk, stabilitet, balans
- Opersonligt, tråkig, osäkerhet, depression, vemod
Avslutningsvis
Färgpsykologi bygger på studier men självklart finns det undantag och vi kanske inte alltid ska ta saker ordagrant. Det är inte färger ensamt som avgör hur en digital upplevelse är. En digital upplevelse är ett samspel av färger ihop med bilder, typografi, tonalitet och varumärke. Gör research och se hur andra företag i din bransch använder färger i sin kommunikation. Ibland kan det vara bra att följa strömmen men ibland kan det vara bra att sticka ut ur mängden för att bli ihågkommen. Vad har ditt varumärke för färgprofil och väcker det de känslor du vill att de ska göra?
Läs mer hur känslor påverkar kundupplevelsen.
Behöver ni hjälp med en grafiska profil eller branding?
På Limetta hjälper vi dagligen våra kunder att optimera sina webbplatser och bygga starka digitala varumärken. Vi gör allt inom branding så som grafiska profiler, brandbooks, styleguides, designsystem, mallar, grafik, illustrationer, tillgänglig design och WCAG. Kontakta oss och berätta om dina utmaningar så hjälper vi dig ta nästa steg.
