Blur-filteret
Knib øjnene sammen - og forbedr brugervenligheden af dit design.
Brug blur-filteret eller knib øjnene sammen for at sikre, at dit design er nemt og hurtigt at forstå visuelt.
Af Marie Louise Holm Møller, Human Factors Consultant, april 2022 • Følg på LinkedIn • April 2022
Ekspertreview
Blur-filter
Vigtige pointer fra denne artikel:
Selvom vi ikke er bevidste om det, er det meste af vores synsfelt sløret og dårligt til at opfatte detaljer og farver. Dette vil påvirke, hvordan dine brugere opfatter dit design.
Blur-filteret er et værktøj, der hjælper dig med at skabe et design, som dine brugere let kan forstå.
Understøtter dit design kun 2-4 % af brugerens synsfelt?
Vidste du, at du kun ser 2-4 % af hele dit synsfelt i høj opløsning og klare farver? Selvom vi ikke bevidst opfatter det, er det meste af vores synsfelt sløret og ikke særlig følsomt over for farver.
Denne artikel præsenterer et brugervenligt UX-værktøj, der giver dig en fornemmelse af det visuelle hierarki i dit design, og straks gør det muligt for dig at designe på en måde, der passer til måden dine brugere faktisk ser dit design.
Øjet har to “typer” af syn, der understøtter forskellige dele af vores hjerne og adfærd:
Det centrale eller fokale syn strækker sig fra midten af vores blik (hvor vi kigger) til en cirka 5-graders synsvinkel (svarende til bredden af din knyttede hånd, når du strækker armen foran dig). Dette dækker omkring 2-4 % af vores synsfelt.
Det perifere syn er alt omkring det centrale syn. Det perifere syn udgør 96-98 % af vores synsfelt.
Her er problemet…
I grafisk design, såsom grafiske brugergrænseflader, fokuserer vi ofte på det centrale syn og giver ikke tilstrækkelig støtte til det perifere syn – selvom dette udgør størstedelen af, hvad vores brugere ser.
Dette efterlader en stor del af brugerens synsfelt ubrugeligt i dit design. Endnu værre risikerer vi at skabe et design, der ikke kommunikerer meningsfuld information til størstedelen af brugerens synsfelt (det perifere syn). Dette er kritisk, da de to typer syn – centralt og perifert – er meget forskellige.
Forskellen mellem det centrale og det perifere syn
Vores centrale syn er forbundet med vores opmærksomhed, og det vi bevidst opfatter. Denne del af øjet består af celler med høj opløsning og stor følsomhed over for farver. Men denne type syn udgør kun en lille del af, hvad vi faktisk ser.
Den største del af vores synsfelt består af vores perifere syn, som er sløret og dårligt til at skelne former, detaljer og farver. Så jo længere væk vi kommer fra midten af vores blik, jo dårligere bliver farveopfattelsen.
Mens det centrale syn er fremragende til specifik og detaljeret genkendelse af objekter, er det perifere syn nødvendigt for at forstå hele scenen – for eksempel din grafiske brugergrænseflade. Derfor er det essentielt at designe til hele synsfeltet.
Ved også at designe til det perifere syn kan du sikre, at:
Brugerens fokus effektivt ledes til de rigtige steder.
Selv når brugerne kun kaster et hurtigt blik på dit design, kan de nemt finde de vigtigste elementer.
Brugeren let kan adskille de forskellige dele af et design (for eksempel på en hjemmeside) og se, hvilke elementer der hører sammen.
Placeringen af elementerne på siden effektivt kommunikerer designets formål, og brugeren intuitivt forstår designstrukturen.
Når vi opfatter verden, er vi ikke bevidste om sløringen og den manglende farve i vores perifere syn. Derfor har vi brug for et værktøj til at gøre det perifere syn bevidst for os – og det er her, blur-filteret kommer ind i billedet.
Anvend blur-filteret til at designe for hvordan vi faktisk ser
Tag et skridt tilbage. Kig på dit design og knib øjnene sammen (luk dem delvist for at gøre dit syn sløret). Nu kan du se designet på lidt samme måde som dit perifere syn opfatter det.
For eksempel, som på billedet nedenfor, hvor et blur-filter er anvendt til at simulere det at knibe øjnene sammen:
Ved blot at knibe øjnene sammen eller bruge et blur-filter får vi et værktøj til at undersøge, hvor godt et visuelt design understøtter de dele af synet, der ligger uden for det centrale område. At sløre billedet hjælper med at bringe det perifere syn ind i bevidstheden, da det slører de dele, det centrale øje ser, og kun efterlader den information, det perifere øje opfatter.
En anden ting, der kan tilføjes til undersøgelsesprocessen, er at skrue ned for ”saturation” i billedet for at simulere den lave følsomhed over for farver i det perifere syn, som vist i det følgende eksempel.
Eksempel 1: Hvor skal du checke ind og ud?
Når man kigger direkte på check-ind og check-ud stationerne på billedet nedenfor (disse stationer findes på danske metro- og busstationer), er det nemt at se forskellen på grund af de tydelige grønne og røde farver.
Men når du er på en metrostation, og har travlt med at finde ud af hvor du skal checke ind, før toget kører, er du nødt til at spotte check-in-stationen med dit perifere syn. Det perifere syns sløring og lave farvefølsomhed er simuleret på billedet nedenfor - nu er det næsten umuligt at finde ud af, om du skal gå til venstre eller højre for at checke ind.
Redesign for det perifere syn
Lad os se på en alternativ løsning. Ud fra sløringstesten kan vi se, at det kan blive lettere at spotte, ud fra vores perifere syn, hvor du skal checke ind, hvis vi f.eks. introducerer en forskel i form og kontrast.
Eksempel 2: Brug blur-filteret til at forbedre datavisualisering
Et andet eksempel kunne være en tabel, der skal læses fra venstre mod højre for at finde information om specifikke patienter.
Blur-filteret afslører, at information intuitivt er grupperet på den lodrette akse, og derfor kan tabellen være svær at aflæse hurtigt på den vandrette akse. At tilføje skiftevis farve på rækkerne hjælper.
Download vores guide til blur-filteret nu
☞ Download
Det er nemt at bruge et blur-filter på Mac eller PC, enten i Mac-terminalen, i PowerPoint, i et billedredigeringsprogram eller i Figma.
Download det ved at klikke på billedet til højre.
