UX og UI: Forskellen, og hvordan du får besøgende til at blive længere

UX (user experience) er hele oplevelsen af at bruge din hjemmeside – om folk forstår, hvad du tilbyder, og nemt når det, de kom for – mens UI (user interface) er det, de ser og trykker på: knapper, farver, typografi og menuer.

De to hænger tæt sammen. Et flot UI hjælper ikke, hvis vejen til kontaktformularen er uklar, og et logisk flow taber, hvis knapperne er svære at se. Her får du forskellen forklaret enkelt og 10 konkrete greb, du kan bruge på din egen side med det samme.

Hvad er forskellen på UX og UI?

UX står for user experience, på dansk brugeroplevelse. Det dækker hele forløbet: hvordan besøgende lander på siden, forstår hvad du tilbyder, finder vej og gennemfører det, de kom for – et køb, en booking eller en henvendelse.

UI står for user interface, på dansk brugergrænseflade. Det er laget, man ser: farver, skrifttyper, knapper, ikoner, billeder og den måde, elementerne er sat op på.

En simpel tommelfingerregel: UX er vejen, UI er skiltningen. Du skal have begge dele i orden.

Hvorfor skal du arbejde med begge dele samtidig?

Fordi brugeren ikke skelner. Er siden langsom, menuen forvirrende eller knappen svær at ramme, er oplevelsen bare dårlig. Derfor arbejder vi med UX og UI i samme proces: først struktur og flow, så det visuelle, og til sidst test på rigtige telefoner, tablets og computere.

Betyder UX og UI noget for din placering i Google?

Google har ikke et rankingsignal, der hedder »godt design«. Men Google måler sidens oplevelse via Core Web Vitals, og de tre målinger hænger direkte sammen med UX:

• LCP (Largest Contentful Paint): hvor hurtigt det største element vises. Godt: 2,5 sekunder eller mindre.
• INP (Interaction to Next Paint): hvor hurtigt siden reagerer, når man klikker eller taster. Godt: 200 millisekunder eller mindre.
• CLS (Cumulative Layout Shift): om indholdet hopper rundt, mens siden indlæser. Godt: 0,1 eller mindre.

Google vurderer ud fra 75. percentil af rigtige besøg, opdelt på mobil og desktop. Gode målinger giver ikke automatisk topplaceringer, men en side, der er hurtig og let at bruge, holder bedre på de besøgende, du allerede har fået ind. Vil du have styr på det tekniske, er vores teknisk SEO-pakke et godt sted at starte.

Siden skal også fungere lige godt på alle skærmstørrelser. Det kræver responsivt design, hvor layoutet tilpasser sig skærmen i stedet for bare at skrumpe.

10 UX-forbedringer med før og efter

Her er de greb, vi oftest ser give effekt på små og mellemstore virksomheders hjemmesider. Ingen af dem kræver et helt nyt design.

1. Én tydelig hovedhandling pr. side

Før: Forsiden har fem knapper i fem farver: »Læs mere«, »Se cases«, »Book møde«, »Tilmeld nyhedsbrev« og »Ring nu«.

Efter: Én primær knap i en kontrastfarve, fx »Få et tilbud«, og højst én sekundær knap i en neutral stil. Når alt råber, hører brugeren ingenting.

2. En overskrift, der siger, hvad du laver

Før: »Velkommen til vores hjemmeside«.

Efter: »Tagrenovering på Midtsjælland – fast pris efter gratis besigtigelse«. Den besøgende skal med det samme kunne se, om de er det rigtige sted.

3. Kortere formularer

Før: Ti felter med adresse, firmanavn, CVR-nummer og »Hvordan hørte du om os?«.

Efter: Navn, telefon eller e-mail og en besked. Resten kan du spørge om, når du ringer tilbage. Hvert ekstra felt er en ekstra grund til at give op.

4. Klikflader, der er lette at ramme

Før: Små ikoner og tekstlinks tæt sammen i mobilmenuen, så man rammer forkert.

Efter: Klikflader på mindst 24 × 24 CSS-pixels eller med luft nok omkring sig. Det er minimumskravet i tilgængelighedsstandarden WCAG 2.2 (niveau AA). Vigtige knapper bør være større.

5. Menupunkter med kundens ord

Før: »Løsninger«, »Kompetencer«, »Univers«.

Efter: »Hjemmesider«, »Webshops«, »Priser«, »Kontakt«. Navngiv menuen efter det, kunderne leder efter, ikke efter jeres interne organisering.

6. Læsbar tekst på mobil

Før: Lysegrå tekst i lille skriftstørrelse på hvid baggrund og lange tekstblokke.

Efter: Mørk tekst, en skriftstørrelse der kan læses uden at zoome, korte afsnit og mellemrubrikker. WCAG kræver en kontrast på mindst 4,5:1 for almindelig tekst og 3:1 for stor tekst.

7. Ingen hop i layoutet

Før: Mens siden indlæser, bliver knappen skubbet ned af et billede eller et banner, og brugeren klikker forkert.

Efter: Faste dimensioner på billeder og reserveret plads til bannere og indlejret indhold. Det forbedrer CLS og fjerner fejlklik.

8. Hurtigere første visning

Før: En stor video og en slider med fem billeder øverst på forsiden.

Efter: Ét komprimeret billede i et moderne format som WebP eller AVIF, caching og lazy load af billeder længere nede. På WordPress bruger vi FlyingPress, som klarer både caching og billedoptimering.

9. Tillid tæt på handlingen

Før: Anmeldelser gemt på en separat side, som ingen finder.

Efter: To-tre korte, ægte kundeudtalelser og en kontaktperson med navn, billede og telefonnummer lige ved formularen eller knappen.

10. Tydelig besked, når noget sker

Før: Man trykker »Send«, og intet ser ud til at ske – eller formularen nulstilles uden forklaring, fordi et felt var udfyldt forkert.

Efter: En klar bekræftelse efter afsendelse og fejlbeskeder lige ved det felt, der skal rettes, så brugeren ikke skal gætte.

Hvordan finder du ud af, hvad der skal forbedres?

Du behøver ikke et stort analyseprojekt. Start her:

• Gå din egen side igennem på mobilen – med én hånd.
• Bed en, der ikke kender virksomheden, om at finde jeres priser eller kontaktformular, og se dem gøre det uden at hjælpe.
• Tjek Core Web Vitals i PageSpeed Insights og i Google Search Console.
• Se i Google Analytics, hvilke sider folk forlader uden at gøre noget.
• Brug heatmaps eller sessionsoptagelser (fx Microsoft Clarity) til at se, hvor folk klikker og scroller. Husk, at det kræver samtykke i dit cookiebanner.
• Ret én ting ad gangen, og mål effekten, så du ved, hvad der virkede.

Hvad gør et godt UI?

Brug farver med et formål

Farver styrer opmærksomhed. Vælg én accentfarve til handlinger som knapper og links, og hold resten roligt. Det vigtigste er ikke, hvilken farve du vælger, men at den har nok kontrast og bruges ens overalt, så brugeren lærer, at »den farve betyder: klik her«.

Hold dig til få skrifttyper

To skrifttyper er nok: én til overskrifter og én til brødtekst. Hver ekstra skrifttype er også en ekstra fil, siden skal hente, og et mere uroligt udtryk.

Byg med genbrugelige komponenter

Et lille designsystem – knapper, kort, formularfelter og bokse, der ser ens ud overalt – gør siden lettere at bruge og lettere at vedligeholde. Når brugeren har lært, hvordan en knap ser ud, skal den se sådan ud på alle sider. Det er sådan, vi griber professionelt webdesign an.

Ofte stillede spørgsmål

Kilder: web.dev: Web Vitals · W3C: WCAG 2.2, Target Size (Minimum) · W3C: WCAG 2.2, Contrast (Minimum)

“Det bedste interface er det, brugeren ikke lægger mærke til – fordi alt er præcis dér, hvor det forventes at være.”

Du er velkommen til at læse mere i nogle af vores andre blogindlæg