UX og UI design: forskellen, og hvad det betyder for jeres hjemmeside

UX design handler om hele oplevelsen af at bruge hjemmesiden: navigation, brugerflows og brugervenlighed, altså om man finder det, man leder efter, forstår det, man læser, og nemt når det, man kom for. UI design er selve grænsefladen, man ser og interagerer med: menuer, knapper, formularfelter, typografi, farver og den feedback, man får, når man trykker på noget. UX er den samlede oplevelse, UI er de elementer, den foregår igennem, og på en god hjemmeside er forløbet på plads, før nogen vælger farver.

Her er definitionerne, forskellen vist på ting, I kender fra jeres egen side, hvorfor rækkefølgen betyder noget, hvad en UX-proces består af på et rigtigt projekt, hvad dårlig UX koster, og hvornår I har brug for en UX designer. Hvad siden skal indeholde, står under hvad skal en hjemmeside indeholde.

Hvad er UX design?

UX står for user experience, på dansk brugeroplevelse. Den internationale standard ISO 9241-210 definerer det som en persons opfattelser og reaktioner, der kommer af brugen eller den forventede brug af et produkt, system eller en service. Læg mærke til “forventede”: Oplevelsen begynder, før man klikker. Et Google-resultat, der lover noget, siden ikke holder, er også dårlig UX.

Nielsen Norman Group, der har forsket i brugervenlighed siden 1990’erne, siger det bredere: UX er alle sider af brugerens møde med virksomheden, dens ydelser og produkter. På en hjemmeside betyder det, at UX også omfatter, om prisen står der, om formularen virker, og om nogen svarer på henvendelsen.

Tæt på UX ligger brugervenlighed (usability). Den har sin egen standard, ISO 9241-11, der definerer det som i hvilken grad et produkt kan bruges af bestemte brugere til at nå bestemte mål effektivt, nemt og med tilfredshed i en bestemt brugssituation. Nemt betyder her uden spild af tid og kræfter. På engelsk hedder de tre led effectiveness, efficiency og satisfaction. Oversat til en hjemmeside: Kan en potentiel kunde på mobilen finde ud af, hvad I koster, og skrive til jer uden at give op undervejs? Brugervenlighed er den del af UX, der er nemmest at teste: Kan folk løse opgaven, hvor meget besvær koster det, og hvordan havde de det bagefter?

Hvad er UI design?

UI står for user interface, på dansk brugergrænseflade. Det er alt det, man ser og trykker på: farver, skrifttyper, ikoner, knapper, felter, billeder, afstande og de små bevægelser, når noget åbner eller lukker. UI design er at give de forløb, UX har lagt, en grænseflade, der er tydelig, genkendelig og reagerer, som man forventer. En knap skal ligne en knap og vise, at der skete noget, når man trykkede. Det vigtigste på siden skal fange øjet først. Teksten skal kunne læses på en telefon i solskin.

UI er ikke pynt. Kontrast, størrelse og rækkefølge afgør, om folk ser kontaktknappen eller ej. Men UI kan ikke redde en side, hvor forløbet er forkert. En flot menu med de forkerte punkter er stadig en forkert menu.

Forskellen på UX og UI med eksempler, I kender

Den nemmeste måde at se forskellen på er at tage de samme elementer og stille to forskellige spørgsmål til dem:

Kort sagt: UX er hele oplevelsen: navigation, brugervenlighed, og hvor nemt det er at komme fra spørgsmål til mål. UI er grænsefladen, oplevelsen foregår igennem: de elementer, man ser, trykker på og får svar fra. Når folk skriver “UI&UX”, “UX og UI” eller “UXUI”, er det fordi de to i praksis hænger tæt sammen. En uklar grænseflade giver en dårlig oplevelse, og på mange projekter laves de af de samme mennesker. Men det er stadig to forskellige sæt beslutninger.

Hvorfor UX skal komme før UI

Den hyppigste fejl på hjemmesideprojekter er at begynde med designet. Man ser tre forslag til en forside, vælger det flotteste og opdager bagefter, at der ikke er plads til ydelserne, at menuen har ti punkter, og at kontaktformularen ligger tre klik væk. Så bliver designet bøjet, indtil det passer, og resultatet ligner hverken det, man valgte, eller det, man havde brug for.

Omvendt: Når strukturen er på plads, er designet lettere at lave, lettere at vurdere og lettere at ændre. I diskuterer ikke længere, om blå er pænere end grøn, men om siden gør det, den skal. Og det er billigere at flytte en kasse i en skitse end en færdigbygget sektion på siden.

Sådan ser en UX-proces ud på et hjemmesideprojekt

En UX-proces behøver ikke være stor. På en hjemmeside til en mindre virksomhed kan den tage nogle uger og ske sideløbende med tekst og indhold. Trinene er de samme:

1. Research

Hvem er kunderne, hvad leder de efter, og hvad spørger de om i telefonen? Kilderne er samtaler med jer og jeres sælgere, data fra den nuværende side, søgeord og gerne et par samtaler med rigtige kunder. Har I en side i forvejen, viser brugeradfærden, hvor folk falder fra.

2. Struktur og sitemap

Hvilke sider skal der være, hvad hedder de, og hvordan hænger de sammen? Det er her, menuen og URL-strukturen bliver besluttet. Et sitemap på én side er det vigtigste dokument i hele projektet.

3. Wireframes

Skitser i gråtoner af de vigtigste sider: forside, ydelsesside, kontakt. Ingen farver, ingen billeder, kun kasser, overskrifter og knapper. Formålet er at blive enige om rækkefølge og indhold, før nogen bliver forelsket i et design. Hvad de forskellige skitser viser, og hvordan I gennemgår dem, står under wireframes og prototyper.

4. Prototype

En version af wireframes eller design, man kan klikke rundt i, typisk lavet i Figma, som er det mest udbredte designværktøj i dag. Det gør det muligt at prøve forløbet, før der skrives en linje kode.

5. Test

Sæt nogle få personer fra målgruppen foran prototypen, og giv dem en opgave: “Find ud af, hvad en tagrenovering koster, og bed om et tilbud.” Se, hvor de går i stå. Det kræver ikke mange: Jakob Nielsen fra Nielsen Norman Group har beregnet, at fem testpersoner fra samme målgruppe i gennemsnit kan finde omkring 85 % af problemerne. Tallet kommer fra en model, ikke en garanti, og hans råd er derfor at teste flere gange med få personer frem for én gang med mange. Har I flere meget forskellige målgrupper, skal I bruge 3–4 personer fra hver. Hvordan I planlægger og kører testen, står under brugertest.

6. Visuelt design (UI)

Nu kommer farver, typografi, billeder og detaljer. Designet bygger på wireframes, der allerede er testet, så diskussionen handler om udtryk og tydelighed, ikke om struktur. Det er også her, kontrast og størrelser tjekkes, så siden kan bruges af alle. Se webtilgængelighed.

Hvad I selv skal bidrage med i designfasen, fra brief til godkendelse, står under webdesign-processen.

7. Overdragelse til udvikling

Designet overdrages med alle tilstande: hvordan en knap ser ud, når man holder musen over den, hvordan fejl i formularen vises, hvordan siden ser ud på mobil. Jo mere, der er besluttet her, jo færre gæt i udviklingen.

8. Opfølgning med tracking

UX slutter ikke ved lanceringen. Sæt tracking op på det, der betyder noget: henvendelser, opkald, køb og frafald i formularen. Efter en måned eller to kan I se, hvor folk stopper, og rette det. Det er her, UX går over i konverteringsoptimering.

Hvad dårlig UX koster

Dårlig UX koster sjældent på en måde, man ser. Folk klager ikke; de går. Den mest grundige dokumentation kommer fra webshops, fordi købet kan følges klik for klik. Baymard Institute har samlet 50 undersøgelser og fundet, at i gennemsnit 70 % af alle indkøbskurve bliver forladt. En del af det er folk, der bare kigger, men blandt de øvrige grunde nævner 18 %, at siden ville have dem til at oprette en konto, og 17 %, at kasseforløbet var for langt eller kompliceret.

Det er UX-problemer, og de kan rettes. Baymards benchmark af 344 webshops viser, at 65 % har et kasseforløb, der er middelmådigt eller dårligere, og vurderer, at en gennemsnitlig stor webshop kan øge konverteringsraten med op til 35 % alene ved bedre design af kurv og kasse. Et konkret eksempel: Den gennemsnitlige kasse havde i 2024 11,3 formularfelter, mens de fleste kan nøjes med 8.

Det samme gælder sider, der ikke sælger online. En kontaktformular med ti felter, en ydelsesside uden pris eller en menu, hvor kunden ikke kan finde det, de søgte på, koster henvendelser. Forskellen er bare, at der ikke er nogen kurv, der viser det. Hvordan formularen skal være, står under kontaktformularer, der konverterer, og kassen under kasseflow.

UX designer eller et bureau, der gør begge dele?

En dedikeret UX designer giver mening, når det digitale er selve produktet eller en stor del af forretningen: en app, en kundeportal, en booking- eller bestillingsløsning med mange trin, eller en webshop med tusindvis af varer og flere målgrupper. Der er der arbejde nok til, at nogen kan bruge al deres tid på research, test og forbedringer, og det betaler sig at have den viden i huset.

For de fleste virksomheder er hjemmesiden ikke produktet, men vejen til en henvendelse eller et køb. Der giver det sjældent mening at ansætte en UX designer. Det, I har brug for, er et bureau, hvor UX og UI laves af de samme mennesker, eller i hvert fald af folk, der sidder ved siden af hinanden, og hvor udviklerne bygger det, der er designet. Spørg den, I taler med, om tre ting:

• Starter I med struktur og wireframes, eller med et færdigt design?
• Tester I med rigtige brugere, før siden bygges?
• Hvad sker der efter lanceringen? Sætter I tracking op og følger op?

Svarer de “vi viser jer tre designforslag” på det første, er UX ikke en del af processen. Hvordan et projekt forløber fra start til slut, står under sådan får I en hjemmeside.

Tjekliste

1. I ved, hvem siden er til, og hvad de vil gøre på den.
2. Der er et sitemap, før der er et design.
3. Menuen bruger kundernes ord, ikke jeres interne.
4. De vigtigste sider er skitseret som wireframes og godkendt.
5. Forløbet er testet med mindst fem personer fra målgruppen.
6. Designet er tjekket for kontrast, læsbarhed og mobil.
7. Formularer har kun de felter, I har brug for.
8. Tracking er sat op på henvendelser og køb, og nogen ser på tallene.

Hos os starter hvert hjemmesideprojekt med struktur og wireframes, og designet kommer bagefter. Se, hvordan vi arbejder med webdesign og UX/UI. Har I allerede en side, der ikke giver de henvendelser, den burde, er konverteringsoptimering stedet at begynde.

Kilder

• Interaction Design Foundation, What is User Experience (UX) Design? (gengiver definitionen fra ISO 9241-210), ixdf.org.
• Nielsen Norman Group, The Definition of User Experience (UX), nngroup.com.
• W3C Web Accessibility Initiative, Accessibility, Usability, and Inclusion (gengiver definitionen fra ISO 9241-11), w3.org.
• Nielsen Norman Group, Why You Only Need to Test with 5 Users, nngroup.com.
• Baymard Institute, Cart Abandonment Rate Statistics, baymard.com.
• Baymard Institute, E-Commerce Cart & Checkout Usability Research, baymard.com.
• Baymard Institute, Checkout Optimization: 5 Ways to Minimize Form Fields in Checkout, baymard.com.