UX og UI: Forskellen forklaret enkelt (og hvorfor du har brug for begge)

UX handler om, hvordan det føles at bruge en hjemmeside eller app, mens UI handler om, hvordan den ser ud, og hvad du konkret klikker på. UX er oplevelsen og vejen gennem løsningen. UI er de knapper, farver, skrifttyper og layouts, du møder undervejs. Du kan have det ene uden det andet, men det er først, når de to arbejder sammen, at en hjemmeside både ser godt ud og får besøgende til at handle. Jeg er Marko, og jeg designer og bygger hjemmesider hos MF WebDesign, så her får du forskellen forklaret i praksis, med eksempler fra hverdagen og en guide til, hvordan du bruger begge dele i dit eget projekt.

Hvad er forskellen på UX og UI?

Forskellen på UX og UI er, at UX (user experience) er den samlede oplevelse, en bruger har med dit produkt, mens UI (user interface) er den visuelle og interaktive overflade, brugeren møder. UX besvarer spørgsmålet “kan jeg finde det, jeg kommer efter, uden at tænke over det?” UI besvarer spørgsmålet “ser det troværdigt ud, og er det tydeligt, hvad jeg kan trykke på?”

Et billede, jeg ofte bruger: Tænk på en restaurant. UX er hele besøget: at du kan finde et bord, at menuen er til at forstå, at maden kommer i rimelig tid, og at regningen ikke er en overraskelse. UI er indretningen, tallerkenerne, menukortets typografi og belysningen. En flot restaurant med lang ventetid giver en dårlig oplevelse. En simpel restaurant, hvor alt fungerer, giver ofte en god en. Det samme gælder digitalt.

	UX (oplevelsen)	UI (udseendet)
Spørgsmål	Kan brugeren nå sit mål nemt?	Er det tydeligt og tiltalende?
Fokus	Struktur, flow, indhold, logik	Farver, typografi, knapper, billeder
Metoder	Brugertests, brugerrejser, wireframes	Designsystemer, prototyper, stilguides
Målbart via	Konverteringer, afvisningsprocent, opgaveløsning	Brandfølelse, læsbarhed, konsistens

Hvad er UX design?

UX design er arbejdet med at gøre en løsning nem, logisk og behagelig at bruge. Det starter ikke i et designprogram, men med at forstå, hvem brugeren er, hvad vedkommende vil, og hvor det går galt i dag. En UX-designer arbejder med research, strukturer sider og indhold, tegner skitser (wireframes) og tester, om andre rent faktisk kan bruge løsningen.

I praksis handler UX design på en hjemmeside blandt andet om:

• Navigation: Kan besøgende finde rundt uden at lede? Læs mere i guiden til hjemmeside navigation.
• Struktur: Er indholdet delt op, så det giver mening? Se, hvordan du kan strukturere din hjemmeside med brugervenlig kategorisering.
• Brugerrejsen: Hvilke trin tager en besøgende fra første klik til henvendelse eller køb? Det går jeg i dybden med i den optimale brugerrejse.
• Hastighed og tilgængelighed: En side, der er langsom eller svær at læse, mister folk, uanset hvor flot den er.

Hvis du vil se, hvorfor det kan betale sig at investere i det, har jeg samlet argumenterne i UX design: hvorfor det betaler sig at investere i godt design.

Hvad er UI design?

UI design er arbejdet med de visuelle elementer, brugeren ser og interagerer med: farver, skrifttyper, ikoner, knapper, formularer, afstande og billeder. Målet er, at grænsefladen er tydelig, konsistent og i tråd med din virksomheds udtryk. En UI-designer sørger for, at en knap ligner en knap, at vigtige ting stikker ud, og at siden ser ens ud fra underside til underside.

UI handler altså ikke kun om at gøre noget pænt. Det handler om at gøre det tydeligt. Gode UI-valg hjælper brugeren til at forstå, hvad der er vigtigt, og hvad der skal ske som det næste.

Eksempler på UI-beslutninger:

• Farver: Hvilken farve har din primære knap, og er kontrasten god nok til, at den kan læses af alle? Her kan guiden til den optimale farvepalet hjælpe.
• Typografi: Er teksten stor nok og let at læse på mobil?
• Komponenter: Har knapper, formularer og menuer samme udseende og opførsel overalt?
• Billeder og video: Understøtter de budskabet? Se, hvordan du skaber en konverterende webshop med gode billeder og videoer.

Hvad betyder UI/UX?

UI/UX er en samlet betegnelse for de to discipliner, der tilsammen skaber brugervenlige digitale løsninger. UI står for user interface, UX står for user experience. Skråstregen i “UI/UX” (eller “UX/UI”) signalerer, at de to hører sammen, og at mange designere arbejder med begge dele i samme rolle. Rækkefølgen betyder ikke noget: “UX/UI” og “UI/UX” dækker over det samme.

I stillingsopslag og hos bureauer ser du ofte titlen “UI/UX designer”. Det er en person, der både kan tilrettelægge, hvordan en løsning fungerer, og designe, hvordan den ser ud. På mindre projekter er det helt almindeligt, at samme person tager begge roller. På store projekter kan der være flere specialister.

Hvorfor er både UX og UI vigtige?

UX uden UI giver en løsning, der virker, men ikke vækker tillid. UI uden UX giver en løsning, der ser flot ud, men ikke fører brugeren derhen, hvor han eller hun skal. Du har brug for begge dele, fordi brugere dømmer en side på få sekunder, og fordi de samtidig forlader den, hvis de ikke kan løse deres opgave.

Her er tre konkrete eksempler på, hvordan de to spiller sammen:

1. Kontaktformularen. UX bestemmer, hvor mange felter der er, og hvad der sker bagefter. UI bestemmer, hvordan felterne ser ud, og om fejlbeskeder er tydelige.
2. Menuen på mobil. UX bestemmer, hvilke punkter der er med, og i hvilken rækkefølge. UI bestemmer ikonet, størrelsen på trykfladen og animationen.
3. Produktsiden i en webshop. UX bestemmer, hvilke informationer køberen har brug for for at føle sig tryg. UI bestemmer, hvordan prisen, knappen og billederne fremstår.

Når begge dele sidder i skabet, mærker du det på resultaterne: flere henvendelser, færre der hopper fra, og en side der er lettere at vedligeholde.

Hvordan arbejder UX og UI sammen i et projekt?

Et typisk forløb følger en fast rækkefølge, hvor UX kommer først og UI bygger oven på:

1. Forståelse: Hvem er brugerne, og hvad vil de? Her afklarer vi mål, målgruppe og de vigtigste handlinger på siden.
2. Struktur: Sidetræ, navigation og indholdets rækkefølge lægges fast. Det er ren UX.
3. Wireframes: Simple skitser uden farver viser, hvor elementerne sidder, så vi kan teste logikken, inden der bruges tid på design.
4. Visuelt design: Nu kommer UI: farver, skrifttyper, billeder og komponenter, der passer til dit brand.
5. Test og justering: Vi tester på rigtige brugere og enheder og retter det, der ikke fungerer.
6. Lancering og opfølgning: Data fra besøg og konverteringer viser, hvad der bør finpudses.

Er du i gang med at planlægge en ny side, kan tjeklisten til hjemmeside udvikling give dig overblik over, hvad der skal være på plads i hvert trin.

Hvad er UX webdesign?

UX webdesign er UX-principperne anvendt på en hjemmeside: at designe sidens struktur, indhold og funktioner ud fra, hvordan besøgende faktisk bruger den. Det dækker alt fra, hvor din kontaktknap står, til hvor hurtigt siden loader, og om teksterne er skrevet, så de er nemme at skimme.

Hvis du bygger i WordPress, kan du komme langt med et solidt fundament og en gennemtænkt opbygning. I guiden til brugervenlig hjemmeside med WordPress og Elementor viser jeg, hvordan du gør det i praksis. UX-tankegangen går igen i alt, hvad jeg laver på hjemmesider og webshops.

10 hurtige UX- og UI-tjek af din egen hjemmeside

Du behøver ikke være designer for at spotte de største problemer. Gå din egen side igennem med disse tjek:

1. Kan en ny besøgende på 5 sekunder forstå, hvad du tilbyder?
2. Er der én tydelig hovedhandling på forsiden (for eksempel “kontakt mig”)?
3. Kan du finde alle vigtige sider via menuen med maksimalt to klik?
4. Er teksten stor nok og let at læse på en mobil?
5. Har knapper og links samme udseende på alle sider?
6. Er kontrasten mellem tekst og baggrund høj nok?
7. Er formularer korte og bruger kun de felter, du reelt har brug for?
8. Loader siden hurtigt, også på mobilnetværk?
9. Fortæller billederne noget, eller er de kun pynt?
10. Ved besøgende, hvad der sker, når de har trykket på knappen?

Vil du have flere konkrete råd, kan du læse 10 UX-regler der vil forvandle dine hjemmesider.

UX og UI i app design

Forskellen mellem UX og UI gælder også, når du udvikler en app. UX bestemmer, hvordan brugeren bevæger sig mellem skærmbilleder, og hvor mange trin en handling kræver. UI bestemmer ikoner, farver og animationer. På mobil er pladsen lille, så begge dele skal sidde helt rigtigt: trykflader skal være store nok til en tommelfinger, og vigtige handlinger skal ligge, hvor hånden naturligt er. Læs mere om de nyeste tendenser i appdesign eller se min side om appdesign.

De mest almindelige fejl, når UX og UI blandes sammen

Mange små virksomheder ender med en hjemmeside, der er pæn, men ikke virker, fordi UX og UI bliver behandlet som ét og det samme. Her er de fejl, jeg oftest ser:

• Design før struktur. Man vælger farver og billeder, før man har besluttet, hvad siden skal opnå. Resultatet er en flot forside uden tydelig næste handling.
• For mange valgmuligheder. Når alt er fremhævet, er intet fremhævet. En side med fem lige store knapper får færre til at klikke end en side med én tydelig hovedknap.
• Tekst, der ikke kan læses. Lys grå tekst på hvid baggrund ser elegant ud, men er svær at læse, særligt på en mobil i dagslys.
• Skjulte kontaktoplysninger. Hvis besøgende skal lede efter, hvordan de kontakter dig, mister du henvendelser.
• Ingen test. Man antager, at brugerne tænker som en selv. Bed i stedet en kollega, en kunde eller en ven om at løse en konkret opgave på din side, og læg mærke til, hvor de hænger fast.
• Ét design til alle enheder. En desktopløsning, der bare skaleres ned, er sjældent god nok. Tænk mobil først, og læs om hvorfor en responsiv hjemmeside er afgørende.

Hvad er vigtigst for en lille virksomhed: UX eller UI?

For de fleste små virksomheder giver UX det største løft først. Hvis strukturen, teksterne og vejen til en henvendelse er på plads, kan et enkelt og rent UI gøre mere end et avanceret design. Når fundamentet er stærkt, løfter et gennemarbejdet UI din troværdighed yderligere og gør, at din hjemmeside stemmer overens med resten af dit brand, fra logo til tilbud.

Tommelfingerreglen er: Start med at gøre det let at forstå og let at handle. Gør det derefter flot og genkendeligt. Det er også derfor, jeg altid taler om mål og brugere, før jeg åbner et designprogram.

Sådan kommer du i gang

Du behøver ikke vælge mellem UX og UI. Start med UX: afklar, hvad besøgende skal kunne på din side, og ryd op i strukturen. Bagefter får UI en tydelig opgave: at understøtte de handlinger, du har besluttet er vigtigst. Har du allerede en hjemmeside, kan en gennemgang ofte afsløre få justeringer, der gør en stor forskel.

Hvis du i stedet skal have lavet en ny løsning, kan du bruge prisberegneren til at få et overslag, eller kontakte mig direkte, så finder vi ud af, hvad der giver mest værdi for dig. Hos mig får du både UX og UI i samme forløb, og jeg arbejder selv med hele opgaven fra skitse til lancering, så du har én kontaktperson.

FAQ – ofte stillede spørgsmål om UX og UI

Få hjælp til UX og UI på din hjemmeside

Vil du have en hjemmeside, der både ser godt ud og får besøgende til at handle? Kontakt mig via kontaktformularen, eller få et hurtigt overslag i prisberegneren.

Denne artikel er udarbejdet med hjælp fra AI-værktøjer og gennemgået af Marko Freno inden udgivelse.