Hvorfor du bør unngå vibrerende fargekombinasjoner

I denne raske artikkelen lærer du om hvordan fargevibrasjon påvirker grensesnittets lesbarhet i sammenheng med web- og grensesnittdesign.

Fet eller Garish?

Det er en fremvoksende tendens blant grensesnittdesignere til å etterligne de fargerike farger som ofte finnes i trykkdesign. Mens det delvis skyldes ideologiske trender, kommer denne impulsen også fram av det nyfundne typografiske området som er tilgjengelig for den moderne webdesigneren, som oppmuntrer til utskriftsformater og stor type. Det er viktig å merke forskjellene mellom hvert medium som forårsaker at vibrerende farge blir noe mer tillatt i trykket, og mindre for web.

Vibrerende farger på Frootis nettsted

Ved utskrift, betyr bruk av fet skriftfarger ofte forskjellen mellom å bli ignorert på et magasinhylle og et salg. På den annen side, i brukergrensesnittet, har vi andre hensyn som har forrang over å gripe brukerens oppmerksomhet med makt, særlig lesbarheten av tekst.

Hva er vibrasjon?

En av de primære fenomenene som kommer ut av dristige og høyt mettede fargeskjemaer er en tilsynelatende "vibrerende" farge, en forekomst der kantene av to direkte tilstøtende farger ser ut til å fusjonere, uskarpe og gløde, noe som gir en illusjon av bevegelse.

De ytre to prøvene har tekst med vibrerende farge, mens midtprøven har tekst med likeverdig verdi.

Josef Albers, den anerkjente fargeteoretoren, advarte mot bruken av vibrerende farger i sin klassiker, Interactions of Color:

"Denne opprinnelig spennende effekten føles også aggressiv og ofte ubehagelig for øynene våre. Man finner det sjelden brukt bortsett fra en skrikende effekt i reklame, og som et resultat er det ubehagelig, mislikte og unngått. "

For et par farger som har lav synlighet mot hverandre, er det nødvendig at de er likeverdige, har en tilsvarende lysstyrkeverdi. Men for å merkbart vibrere, vil fargene generelt være av høy metning og være komplementær til hverandre, skiftet ca. 180º på fargeskiven.

Blå (HSB 210, 99, 100) på rødt (HSB 12, 99, 100)

I eksemplet ovenfor kan de røde og blå nyansene finnes på motsatte sider av fargeskiven (men ikke direkte motsatt) og begge har en lysstyrke på 100.

Spotify EDM

Spotify har blitt synonymt med dristige fargeskjemaer, brukt med stor effekt for å få tak i oppmerksomheten. Noen ganger kan disse kombinasjonene være avskyende, selv om de ikke vibrerer i sanneste forstand; som for eksempel knappen mot den lilla bakgrunnen i eksemplet ovenfor. Brukernes øyne vil gjenkjenne hva det er, men noen kan slite for å bestemme formenes ytre kanter. 

lesbarhet

Grensesnittteksten er betydelig hindret når den er satt i likevekt, vibrerende farge. Jeg har valgt ut disse vibrerende fargene:

Når fargevibrasjon oppstår, er elementet som er sterkt påvirket av den glødende forvrengningseffekten kanten mellom de to fargene. Det er derfor vibrasjon er spesielt farlig i sammenheng med brukergrensesnitt, små ikoner og andre detaljerte elementer som ikke er store nok til å kompensere for deres uskarpe vibrerende kanter.

Her er det samme settet med fargeprøver, denne gangen sett av noen med fullfargeblindhet:

I tillegg til de ofte irriterende vibrerende og uklare fargene for de som ser i full farge, gitt farger med like luminans, kan de med fargeblindhet ende opp med å ikke se noe i det hele tatt. Mens det er varierende nivåer av fargeblindhet, er det best å spille det trygt når det gjelder tilgjengelighet.

Her er for eksempel papirkurvikonet på Apple Watch ikke synlig for de med fargeblindhet:

Fargesyn (venstre) mot fargeblindhet (høyre)

Konklusjon

Vibrerende farger kan brukes til god effekt, men de gir virkelige farer i brukervennligheten til brukergrensesnitt, og kan være tunghendt hvis de ikke er bevisst vurdert før bruk. Vær oppmerksom på dette mens du designer!