Hansen StudioDesign & development

Design4 min. læsning

Hvad er forskellen på UX og UI?

Det korte svar

UX handler om den samlede oplevelse af at bruge et produkt til at nå et mål. UI handler om den konkrete brugerflade: indholdets præsentation, kontroller og deres tilstande. UI er en del af oplevelsen, og de to områder overlapper i arbejdet med en forståelig og brugbar løsning.

02 / To perspektiver
Funktion møder form.Den samme oplevelse. To perspektiver.

En side kan se gennemført ud og stadig være svær at bruge. Den kan også have en fornuftig struktur, som bliver vanskelig at aflæse. Forskellen mellem UX og UI hjælper med at beskrive problemet mere præcist.

01

To perspektiver på samme produkt

UX står for user experience, altså brugeroplevelse. Det handler blandt andet om, hvorvidt løsningen passer til situationen, giver mening og hjælper brugeren gennem en opgave. Oplevelsen kan begynde før første skærm og fortsætte efter sidste klik, eksempelvis med en bekræftelse eller behov for support.

UI står for user interface, altså brugerflade. Her arbejder man med det, mennesker møder og betjener: tekst, layout, links, knapper, felter og feedback. Det er for enkelt at kalde UI for pynt. Et uklart felt eller en usynlig fejl kan forhindre hele opgaven.

To perspektiver på samme produkt
SpørgsmålUX-perspektivUI-perspektiv
Kan brugeren finde vej?Rækkefølge, navigation og sammenhængSynlige links, labels og placering
Kan en formular gennemføres?Nødvendige oplysninger og passende trinFelter, instruktioner og fejltilstande
Hvad sker der bagefter?Bekræftelse og næste opgaveTydelig status og handlingsmuligheder
02

Et fiktivt bookingflow gør forskellen konkret

Forestil dig, at du skal ændre en booket tid. Et UX-spørgsmål er, om du kan finde reservationen uden at oprette en ny konto. Et andet er, om reglerne for ændringer bliver forklaret, før du bruger tid på at vælge en ny dato.

Et UI-spørgsmål er, om den valgte dato er tydelig, om knappen beskriver handlingen, og om fejlbeskeden er placeret ved det relevante felt. De valg påvirker samme oplevelse. En anden knapfarve løser ikke et manglende trin, men god struktur hjælper heller ikke meget, hvis teksten ikke kan læses.

03

Beskriv symptomet, før du bestiller et redesign

Skriv, hvad du har observeret: Brugere overser et link, misforstår en valgmulighed eller bliver i tvivl efter en handling. Undgå at springe direkte fra en formodning til en visuel løsning. En uklar overskrift, et overflødigt krav og en teknisk fejl kræver forskellige indsatser.

Se både på helheden og de enkelte detaljer. Gennemgå opgaven fra start til slut, inklusive tomme lister, ventetid, fejl og bekræftelse. Brugertest kan vise, hvor relevante deltagere får problemer. En gennemgang med teamet kan finde mulige problemer, men er en anden type evidens.

04

Tilgængelighed forbinder oplevelse og interface

Tydelig kontrast, meningsfulde labels og information, der ikke kun formidles med farve, er konkrete designhensyn. Beskriv også, hvordan et element ser ud ved tastaturfokus, og hvordan brugeren opdager en fejl. De tilstande bør indgå i designet, ikke overlades til tilfældigheder under udviklingen.

En visuel vurdering kan ikke alene afgøre, om et produkt er tilgængeligt. Den færdige løsning skal også kunne betjenes og forstås i praksis. Aftal derfor, hvem der kontrollerer implementeringen, og hvilke manuelle og tekniske undersøgelser projektet omfatter.

05

Vælg leverancer efter behovet

Hvis strukturen er uklar, kan brugerforløb og tidlige prototyper være relevante leverancer. Hvis forløbet er afklaret, kan opgaven i højere grad handle om visuel sammenhæng, komponenter og tilstande. Ofte er der brug for begge dele i mindre iterationer.

Titlen UX/UI-designer siger ikke, hvor meget research, tekst eller udvikling der følger med. Aftal ansvar og materialer konkret. Et begrundet designvalg og en afprøvning fortæller mere om kvaliteten end antallet af skærme i en præsentation.

Tag med videre

Det vigtigste
at huske.

  • UX ser på opgaven og den samlede oplevelse.
  • UI gør handlinger og information synlige og betjenelige.
  • Undersøg problemet, før du beslutter den visuelle ændring.

Lad os gøre det klart

Spørgsmål & svar

Er UX vigtigere end UI?

De bør vurderes sammen. Et meningsfuldt forløb kræver også en brugerflade, som kan aflæses og betjenes.

Kan samme person arbejde med begge dele?

Ja. Afklar kompetencer, ansvar og tid til de konkrete opgaver frem for at bruge jobtitlen som eneste pejlemærke.

Beviser et flot UI, at UX er god?

Nej. Det viser et visuelt resultat. Brugbarhed og andre effekter kræver relevante observationer og undersøgelser.

Hvad står UX og UI for på dansk?

UX er forkortelsen for user experience, brugeroplevelse. UI betyder user interface, brugerflade. Begreberne hjælper med at skelne mellem oplevelsen af en opgave og de konkrete kontroller, tekster og visuelle tilstande, man møder.

Er UX-design det samme som brugertest?

Brugertest er én metode til at undersøge en løsning. UX-arbejde kan også omfatte research, informationsstruktur, indhold og design af forløb. Metoden vælges efter det spørgsmål, teamet mangler svar på.

Hører tekst og fejlbeskeder til UX eller UI?

Begge perspektiver er relevante. Ordene hjælper brugeren med at forstå opgaven, mens placering og præsentation gør hjælpen til at finde. Design eksempelvis fejlens forklaring, kobling til feltet og mulighed for at rette den som én sammenhængende situation.

Hvad er forskellen på UI-design og grafisk design?

UI-design omfatter brugerfladens handlinger og tilstande, eksempelvis valgt, deaktiveret, fokuseret og fejl. Grafisk design kan rette sig mod mange andre medier og formål. Visuelle færdigheder overlapper, men et interface skal også kunne betjenes.

Hvordan ved jeg, om et problem kræver UX- eller UI-arbejde?

Beskriv først, hvad der sker: Finder personen ikke funktionen, misforstår teksten eller mister orienteringen mellem trin? Undersøg derefter både forløbet og den konkrete brugerflade. Det samme symptom kan have flere årsager, som kræver forskellige ændringer.

Er tilgængelighed en del af UX og UI?

Ja. Læselig tekst, forståelige labels, tastaturfokus og tydelig feedback påvirker både interface og oplevelse. Tilgængelighed kræver også korrekt implementering og vurdering af den fungerende løsning.

Hvad er forskellen på UX og CX?

UX betyder brugeroplevelse, mens CX betyder kundeoplevelse. Begreberne overlapper. CX bruges ofte om relationen til en organisation over tid og på tværs af kanaler, mens et UX-team kan arbejde med en bestemt interaktion eller rejse. Aftal derfor oplevelsens omfang frem for at bruge ordene som en skarp grænse.

Hvad står CX for?

CX står for customer experience: kundeoplevelse. Det kan omfatte opdagelse, køb, brug og kontakt med support over tid. En forståelig app er ét muligt bidrag til den samlede relation, som også påvirkes af andre møder med virksomheden.

Hvad er en customer journey?

En kunderejse beskriver, hvordan en person forsøger at nå et mål over tid. Den kan gå på tværs af website, app, e-mail og menneskelig hjælp. Et kort over rejsen bør vise relevante handlinger, behov og problemer med afsæt i undersøgte oplevelser.

Hvilke fire faser har en customer journey?

Der findes ikke én obligatorisk model med fire faser. Opdagelse, overvejelse, valg og brug kan være en praktisk opdeling i et bestemt projekt. Undersøg det faktiske forløb, og tilpas faserne, hvis eksempelvis levering, support eller fornyelse er vigtige dele af rejsen.

Hvilke regler og principper hjælper i UI-design?

Gør handlinger tydelige, brug genkendelige mønstre, skab et læsbart hierarki og vis, hvad systemet gør. Giv forståelig feedback, hjælp med at forebygge og rette fejl, og understøt forskellige måder at betjene løsningen på. Afprøv principperne i den konkrete opgave frem for at bruge dem som en automatisk kvalitetsgodkendelse.

Læs selv videre

Kilder & fordybelse

Guiden bygger på disse kilder og erfaring fra egne projekter.

  1. Government Digital and Data: Interaktioner og brugerforløb (åbner i en ny fane)
  2. W3C WAI: Design af tilgængelige brugerflader (åbner i en ny fane)
  3. GOV.UK: Modererede brugertests (åbner i en ny fane)
  4. Nielsen Norman Group: UX, CX og oplevelsens forskellige niveauer (åbner i en ny fane)
  5. GOV.UK: Kortlæg oplevelser og brugerrejser (åbner i en ny fane)

Fra tanke til løsning

TeoriBoost

En dansk læringsbeta med korte lektioner, illustrerede trafiksituationer og feedback. Se samspillet mellem produktdesign, UX/UI og frontend.

TeoriBoost med gule og mørke brugerflader og illustrerede trafiksituationer.