Godt design begynder ikke med dekoration. Det begynder med forståelse.
Se, hvordan jeg anvender den menneskecentrerede designproces i mine casebeskrivelser, eller kontakt mig for at høre, hvordan jeg kan bidrage til at forbedre din digitale løsning.
Når en ny digital løsning skal udvikles, er det fristende at starte med farver, skrifttyper eller valg af software. Men uden forståelse for brugerne, organisationens behov og det egentlige problem, risikerer vi at skabe en flot løsning, der ikke fungerer i praksis. Menneskecentreret design (Human-Centred Design) hjælper os med at identificere og løse de rigtige problemer for de mennesker, der skal bruge løsningen.
I denne artikel vil jeg guide dig igennem min designproces og vise, hvordan teori og praksis forenes i redesignet af Thy.dk.
Hvorfor processen kommer før værktøjet
Værktøjer som Figma, WordPress eller AI er kun instrumenter. De definerer hverken problemet eller den rigtige løsning. Hvis man åbner Figma, før man har gennemført sin research, risikerer man at designe i blinde.
Processen hjælper med at sikre, at valg – fra sitemapstruktur til farvekontrast – er metodisk og fagligt begrundede. Jeg arbejder blandt andet ud fra Design Councils Double Diamond-model, som består af fire faser: Discover, Define, Develop og Deliver. Den første diamant handler om at undersøge og afgrænse det rigtige problem, mens den anden handler om at udvikle, teste og forbedre mulige løsninger. I min praktiske arbejdsproces omsætter jeg modellen til fem sammenhængende trin: Research, Define, Design, Test og Improve.
Trin 1: Research (Discover)
Vi kan ikke designe ud fra mavefornemmelser; vi har brug for data. I denne fase anvender jeg tre centrale metoder:
- Desk research: Analyse af markedet, konkurrenterne og den relevante lovgivning, herunder eventuelle krav efter European Accessibility Act, direktiv (EU) 2019/882. De konkrete krav afhænger af produktet, tjenesten og organisationens rolle.
- Heuristisk evaluering: Manuel gennemgang af det eksisterende website for at identificere tekniske og brugervenlighedsmæssige barrierer.
- Screaming Frog crawling: Kortlægning af metadatafejl, overskriftsstruktur og billeder med manglende alt-tekst.
Målet er at kortlægge problemrummet og forstå brugerne i dybden.
Trin 2: Define
Her strukturerer og prioriterer vi researchresultaterne for at identificere det egentlige problem og skabe sammenhæng mellem brugernes behov og projektets mål.
For at gøre problemerne handlingsorienterede formulerer jeg såkaldte “How Might We”-spørgsmål – på dansk: “Hvordan kan vi …?” spørgsmål. Hvis researchen viser, at brugere på farten ikke kan navigere på mobil pga. dårlig kontrast, omformulerer vi det til: “Hvordan kan vi gøre mobilgrænsefladen lettere at læse og betjene i forskellige brugssituationer?” Dette forvandler en barriere til en åben designmulighed.
Trin 3: Design (Develop)
Med de identificerede og prioriterede designkrav som fundament begynder det kreative og tekniske arbejde:
- Informationsarkitektur: Reorganisering af navigationsstrukturen ved hjælp af kortsortering (card sorting). Vi grupperer indholdet efter brugernes mentale modeller.
- Wireframes (Low-Fidelity): Skitser i Figma for at teste sidens struktur, hierarki og flow uden at blive afledt af farver og billeder.
- Prototyping (High-Fidelity): Udvikling af en interaktiv prototype i Figma for at afprøve struktur, navigation og brugerflow.
- Udvikling: I en funktionel WordPress-prototype kan designet omsættes til semantisk HTML, responsive komponenter og tilgængelige interaktioner. Her anvendes semantisk HTML med landmarks som
<header>,<nav>,<main>og<footer>og tilgængelighedskrav kontrastforhold.
Trin 4: Test
En prototype skal testes af rigtige mennesker. I testfasen observerer jeg, hvad brugerne gør, og ikke kun hvad de siger.
Jeg benytter primært “Tænk højt”-test (Think-Aloud Usability Testing). Brugerne udfører opgaver og verbaliserer deres tanker, mens de navigerer. De kvalitative tests kan suppleres med automatiserede værktøjer som Lighthouse og WAVE. De kan identificere udvalgte problemer med blandt andet kontrast, semantik og tilgængelige navne, men resultaterne skal altid vurderes manuelt og suppleres med tastaturtest og, hvor det er relevant, test med skærmlæser. Testen er vores virkelighedstjek – den afslører de blinde vinkler, som designteamet har overset.
Trin 5: Improve (Deliver)
Den sidste fase handler om at omsætte testresultaterne til konkrete designændringer. Hvis en bruger farer vild, er det designet, der skal rettes.
Vi analyserer feedbacken, prioriterer problemerne og foretager målrettede justeringer. Det er en central del af kvalitetssikringen. Designet forbedres, så løsningen bliver mere sammenhængende, robust og tilgængelig.
Processen er ikke lineær
Selvom faserne præsenteres i rækkefølge fra Trin 1 til 5, er processen iterativ. I praksis bevæger vi os ofte frem og tilbage.
En brugertest kan hurtigt vise, at vi ikke har defineret problemet præcist nok i Trin 2. En prototype kan afsløre, at vi mangler vigtig information, hvilket sender os tilbage til researchen i Trin 1. Denne vilje til at justere undervejs på baggrund af observationer, brugerfeedback og testresultater er en central del af en iterativ designproces.
Research ➔ Define ➔ Design ➔ Test ➔ tilbage til Define ➔ nyt Design ➔ ny Test
Eksempel fra mit arbejde: Redesignet af Thy.dk
I mit arbejde med redesignet af Thy.dk anvendte jeg netop denne systematiske proces.
Problemet (Research & Define):
Thy forbindes med vild natur og stærke outdoor-oplevelser. Men vores research viste en tydelig uoverensstemmelse mellem websitets eksisterende indhold og turisternes behov. Hjemmesiden fremstod i høj grad som et administrativt og medlemsorienteret informationsarkiv, mens turister havde behov for hurtig inspiration og praktisk hjælp til planlægning. Desuden identificerede vi væsentlige tilgængelighedsbarrierer, blandt andet tekst placeret direkte på billeder uden tilstrækkelig kontrast og vigtig praktisk information i ikke-responsive PDF-filer.
Løsningen (Design & Test):
Vi designede en helt ny, behovsbaseret informationsarkitektur, hvor turistens brugerrejse blev sat i centrum. Hovedmenuen blev konsolideret til seks tydelige kategorier. Foreningsrelateret indhold blev nedprioriteret i hovednavigationen og placeret i en sekundær del af strukturen, blandt andet i footeren. Tekstkontrasterne blev justeret, så almindelig tekst som udgangspunkt havde et kontrastforhold på mindst 4,5:1 i overensstemmelse med WCAG 2.2, succeskriterium 1.4.3.
Under vores “Tænk højt”-test observerede vi, at brugerne kunne navigere gennem den nye struktur med færre problemer. Testen viste dog også, at enkelte tekster på mobil var vanskelige at læse i stærkt dagslys på grund af kombinationen af skriftstørrelse og kontrast. Desuden manglede billedkarrusellen på forsiden forklarende tekster.
Resultatet (Improve):
På baggrund af testfeedbacken justerede vi typografien og øgede skriftstørrelsen på mobil, tilføjede præcise beskrivelser under billedkort og sikrede, at klikbare områder var konsekvente og store nok til touchbetjening. Redesignet demonstrerede dermed, hvordan test og iteration kan skabe en løsning, der både er visuelt sammenhængende, teknisk mere robust og mere tilgængelig.
Hvad processen reducerer
Når vi følger denne menneskecentrerede model, opnår vi konkrete fordele:
Færre antagelser: Vi designer ud fra reel brugeradfærd, ikke gætterier.
Mindre spildtid: Vi opdager fejl i wireframe-stadiet, hvor det er nemt og billigt at rette.
Bedre tilgængelighed: Principper for universelt design og relevante WCAG-krav inddrages fra begyndelsen.
Større tillid og engagement: En klar og sammenhængende løsning kan gøre det lettere for brugerne at orientere sig og gennemføre deres opgaver.
Se, hvordan jeg anvender den menneskecentrerede designproces i mine casebeskrivelser, eller kontakt mig for at høre, hvordan jeg kan bidrage til at forbedre din digitale løsning.
Kilder og projektgrundlag
- Rold, M. (2024). Interfacedesign: Fra idé til digital prototype. 2. udgave. Samfundslitteratur.
- Design Council. The Double Diamond.
- D’Andrea, Maria, Jepsen, Sander (2026). Hovedeksamensrapport: Redesign af Thy.dk. Erhvervsakademi Dania.
- Erhvervsakademi Dania. Metodisk undervisningsmateriale inden for UX/UI, interfacedesign og brugertest.
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2.
- European Union. Directive (EU) 2019/882 on the accessibility requirements for products and services.
