Design og UX Artikel
UX-design

Ikoner - hvornår, hvordan og hvilke?

God ikonografi handler ikke om pynt, men om funktion. Hvis dine ikoner ikke er intuitivt forståelige, skader de brugeroplevelsen mere, end de gavner. I offentlige løsninger er det særligt kritisk, fordi brugerne har vidt forskellige digitale forudsætninger.

Herunder finder du en række konkrete tips til brug af ikoner.

 

Rasmus Otto-Sidelmann
Digital Designer, GoPublic

Hvornår bruger man ikoner på en hjemmeside?

Der findes tre overordnede formål for ikoner:

  • Beskrivelse af en funktion eller service: Ikoner kan bruges til at beskrive, hvordan en funktion eller service fungerer. Hos offentlige myndigheder ser man ofte, at brugerrejser brydes ned i trin, som understøttes af ikoner. Det hjælper brugeren med at forstå processen og hvad de skal gøre – trin for trin. 

  • Beskrivelse af en brugerhandling: Her bruges ikoner, når man vil have brugeren til at foretage en handling på siden. Det er eksempelvis normalt, at man sætter et mail-ikon ind, hvor brugeren skal indtaste sin mail-adresse. Generelt er ikoner hyppigt brugte i alle slags formularer, hvor brugerne skal indtaste oplysninger.

  • Underbygge navigation: Ikoner bruges til at gøre det nemmere og hurtigere for brugeren at finde det, de leder efter. På en kommunal hjemmeside kan det fx være i en selvbetjeningsoversigt, hvor ikoner bruges sammen med tekst til at vise indgange som “Daginstitution”, “Skole” og “Sundhed”. Det kan også være helt simpelt, som et forstørrelsesglas ved siden af søgefeltet.

Ikoner - forvirring eller forståelse?

Ikoner hjælper med at skabe opmærksomhed, understrege budskaber og forbedre navigationen på en hjemmeside. Men for at ikoner giver mening, skal de først og fremmest være til at forstå.

Ikoner er visuelle repræsentationer af et objekt eller en idé, og hvis repræsentationen ikke er tydelig, ender ikonet med at skabe frustration hos brugeren. For at undgå frustration, er det vigtigt, at ikonet hører sammen med en forklarende tekst. På den måde kan brugeren både læne sig op ad teksten og den visuelle repræsentation, og chancen for misforståelse bliver mindre.

Ikoner er ikke universelle og betyder derfor ikke det samme for alle, særligt i offentlige løsninger, hvor brugerne har forskellige sproglige, kulturelle og digitale forudsætninger. Et godt eksempel er stjerner og hjerter, som ofte bruges til favoritter og gemte elementer. Deres betydning varierer fra site til site, hvilket gør dem svære at afkode: De kan nogle steder gemme noget til senere, mens de andre steder blot markerer, at du kan lide noget.

Kilde (NNGroup, 2014)

Gode huskeregler for brug af ikoner

For at undgå forvirring kan du bruge følgende huskeregler:

  • Brug etablerede konventioner: Selvom det kan være sjovt at prøve nye ting af, så brug altid genkendelige ikoner for ting, i stedet for at opfinde dine egne måder at repræsentere dem på. Det vil kun skabe frustration hos brugeren, hvis de skal afkode et nyt ikon. Hvis brugeren skal gætte, hvad ikonet repræsenterer, har du allerede tabt dem.
  • Brug ikoner til at understøtte tekst: Ikoner alene er ofte tvetydige. Hvis din hjemmeside har en indgang eller funktion, der ikke har et konventionelt ikon at læne sig op ad, kan du indsætte et ikon ved siden af din tekst og på den måde hjælpe brugeren med at kæde de to sammen. Gør du dette nok gange, kan det være, at dit ikon med tiden bliver genkendeligt for brugeren uden hjælpende tekst.
  • Brug en konsistent stil: Hvis du finder dine ikoner gennem GoPublics eget ikonbibliotek er du sikret, at de følger samme visuelle udtryk i både streg og farve. Hvis du derimod mixer forskellige udtryk vil det kun skabe forvirring hos brugeren og få hjemmesiden til at fremstå uprofessionel. Ikoner skal altid have samme stregtykkelse, størrelse og stil på tværs af din hjemmeside.

Kilde (thenounproject, 2026)

Ikoner betyder noget

Spotify som case

Selvom vi ikke tænker meget over dem, betyder ikoner meget for vores forståelse og oplevelse af en hjemmeside eller app.

Det blev tydeligt hos Spotify, da de i 2023 valgte at udskifte ikonet for en af deres nøglefunktioner. Hjerteikonet, som blev brugt, hvis brugeren godt kunne lide en sang og ville tilføje den til deres bibliotek, blev udskiftet med et plus-ikon.

Selvom det kunne virke som en forholdsvis ubetydelig ændring, skabte det opmærksomhed og frustration hos flere brugere, der erklærede, at Spotify “havde droppet kærligheden” (Kilde: Community-spotify, 2024)

Ikoner har altså stor betydning for brugernes oplevelse, og de skal derfor bruges intentionelt. Bryder man med konventionerne kan man skabe forvirring hos brugeren.

Do’s and dont’s for ikoner

Ikoner virker måske som en lille detalje, men de har stor betydning for, hvordan brugere forstår og navigerer i et interface. Bruges de rigtigt, skaber de klarhed. Bruges de forkert, skaber de friktion.

Do's

  • Brug ikoner til at understøtte og ikke erstatte tekst.
  • Brug kendte og konventionelle ikoner.
  • Hold stil og størrelse konsistent.
  • Test altid, om folk forstår ikonets betydning.

Dont's

  • Brug ikke ikoner som ren pynt. Hvis de ikke har en funktion, bør de ikke være der.
  • Opfind ikke dine egne ikoner uden forklarende tekst.
  • Brug ikke ikoner alene uden hjælpende tekst.
  • Bryd ikke konventioner uden en meget god grund.