UX/UI designer Josef om färger

josef_header1.jpg

UX/UI designer Josef berättar om färger och kontraster.

Senaste tiden har vi taget fram ett systematisk sätt att jobba med den visuella designen av användargränssnittet i Textalk Webshop, det vi brukar kalla admin. Vi har förändrat både vårt arbetssätt och våra tekniska verktyg. Något vi fokuserat extra mycket på den senaste tiden är färger och kontraster.

I ett arbetsverktyg vill man ofta använda ganska lite färg till skillnad från en shop där färg kan vara inspirerande och man kan tillåta sig att vara mer vågad. Därför är de färger vi använder mest de färger som vi kallar för semantiska färger. Semantiska färger är färger som har betydelse. Vi har fyra sådana:

semantiska_farger
Dessa färger förmedlar någon form av betydelse: Rött signalerar något negativt, stoppat eller destruktivt. Gult/orange signalerar något pågående, blockerande eller något som behöver uppmärksamhet. Grönt signalerar något positivt eller konstruktivt. Blått signalerar något informativt och liknar på sätt och vis gult/orange, men tar inte ställning till om det är bra eller dåligt.

Det är viktigt att färgerna ser bra ut tillsammans. Det är ett par saker som spelar in här. För det första behöver de semantiska färgerna kännas lika ”viktiga”. Ingen färg ska dominera över de andre. För det andra behöver färgerna upplevas som att de passar med varandra. När vi pratar om färger behöver vi ta hensyn till tre viktiga färgegenskaper:

  • Färgton
  • Mättnad
  • Ljuset

Denna modell att beskriva färg kallas HSL (vilket står för ”Hue, Saturation, Lightness” på engelska). Fördelen med HSL jämfört med andra modeller (t.ex RGB) är att det är lätt att jobba med ett värde i taget:

  • Färgtonen ställer in vilken ton av rött, grönt, gult och blått man vill ha. Vi har till exempel valt en gul färgton som går mycket åt det röda hållet.
  • Mättnad ställer man in hur mycket grått det ska vara i färgen. Ju mindre mättad en färg är ju mer grå blir den. Våra färger är någonstans mitt emellan – de har tillräckligt mycket mättnad för att de ska vara tydliga, men samtidigt ska de inte vara för skrikiga. 
  • Det sista värdet är ljusheten. Vi har nio nivåer av ljushet, alltifrån väldigt ljust till nästan svart.

HSL.jpgHSL är dock inte perfekt anpassat till hur våra ögon och hjärnor tar in och tolkar färg. Ändrar man på ett värde kan man fortfarande behöva finjustera de andra två. Till exempel ökar vi mättnaden kraftigt när vi drar ner ljusheten för att färgen inte ska “försvinna” i mörkret. Vi drar även upp mättnaden ordentligt för gul/orange eftersom vi uppfattar gult som en “svag” färg. Även om HSL är en väldigt bra modell att jobba i är det den mänskliga upplevelsen som ska avgöra om färgerna ser bra ut eller inte.

red_green_button.png

Både “Ja” och “Nej” känns lika viktiga. Varken den röda eller gröna färgen tar över. 

Vi har även en gråskala som används till nästan allt annat. Den har numera ett litet inslag av blått, vilket ger en kallare känsla, vilket ska vara behagligare att jobba med när man sitter under en lång tid. Vi har även finjusterat ljusheten mellan de olika nivåerna så att skalan är mer jämn och så att det är tydliga skillnader mellan varje steg. Slutligen har vi sett till att den gråa tonen passar med de andra färgerna.

dark_tones.png

Vi använder den tredje mörkaste tonen för vanlig text. De två mörkaste tonerna använder vi när något behöver sticka ut något alldeles extra.

En sak vi kunnat göra med de nya skalorna är att byta knapparna från mörka med ljus text till ljusa med mörk text. Det här gör texten på knapparna lättare att läsa genom att det blir högre kontrast mellan texten och bakgrunden. Samtidigt blir knapparna mindre skrikiga utan att bli otydliga.

green_buttons.png

Våra nya knappar är tydliga, har bättre kontrast och drar till sig mindre uppmärksamhet.

En sista viktig sak att påpeka är att man aldrig ska förlita sig helt på färg för att förmedla information. När vi använder semantiska färger gör vi det för att förstärka en text eller i vissa fall en symbol. Anledningen till det är att vår färguppfattning inte är tillförlitlig. Det är vanligt med olika typer av synnedsättningar och färgblindhet och ungefär en tredjedel av befolkningen har någon typ av synnedsättning. Men det är också vanligt med dåliga skärmar, solblänk och andra distraktioner i omgivningen som gör att färger kan vara svåra att uppfatta även med full syn.lights.jpgÄven utan färg är det lätt att se vad trafikljusen visar eftersom vi vet att “stopp” är överst och “kör” är underst.

Hur jobbar du med färg i din webshop? Här är några enkla saker att tänka på: 

  • Se till att dina färger passar ihop. Du kan ta hjälp av ett verktyg som Adobe Color. Om du själv inte har öga för det så fråga några vänner och bekanta. Det här är ingen exakt vetenskap, men det finns generella uppfattningar om vad som passar, oavsett om man tycker att färgerna är “snygga” eller inte. 
  • Tänk på kontraster. Text och knappar måste alltid vara tydliga. Vilka färger du använder har stor betydelse. Ett dåligt val kommer ha en negativ inverkan på både konvertering och sökmotorranking. Det finns verktyg där du kan testa dina färgkombinationer, t.ex. på whocanuse.com.
  • Använd färg för att förstärka, men förlita dig inte helt på dem. En riktigt bra design ska fungera även om man skulle lägga ett svartvitt filter på den.

Skärmavbild 2019-06-19 kl. 14.12.29

Textalk Webshop är den perfekta e-handelplattformen för dig som vill sälja på nätet. Prova helt gratis i lugn och ro, lägg upp bilder och info om dina produkter och möbler och prova dig fram bland alla e-handelsfunktioner som finns i vår e-handelsplattform.  Säker drift, betalningslösningar, integrationer till affärssystem och logistiksystem är redan på plats. Prova någon av våra färdiga mallar och bygg din webbutik själv

Starta webshop