Hvad er en wireframe?

Hvad er en wireframe?

Nielsen Norman Group definerer en wireframe som »et skeletagtigt omrids af et designlayout, der bruges til at vise en brugerflades struktur og funktionalitet, før det visuelle design overvejes«. NN/g skriver også, at wireframes kan vise en brugers vej gennem et flow, sidelayout, informationshierarki og endda interaktioner, og at detaljeniveauet går fra hurtige skitser til detaljerede gengivelser af det endelige design.¹²

IxDF beskriver wireframen som en plantegning, der hjælper designere, udviklere og andre interessenter med at forstå, hvor elementer som overskrifter, knapper, navigation og indholdsblokke skal placeres. En typisk wireframe har en ramme for browservinduet eller enheden, navigation og søgning, de store elementer som overskrifter, bannere, billeder og brødtekst, og de mindre komponenter som knapper, dropdowns, afkrydsningsfelter, dialoger og fremskridtsindikatorer.⁷²

Farver, skrifttyper og billedmateriale holdes ude, og billeder og tekst står som pladsholdere. IxDF kalder for mange visuelle detaljer en stor faldgrube, fordi farver, billeder og branding trækker fokus væk fra struktur og funktion. Wireframen hører ifølge IxDF til i starten af et projekt, hvor den gør løse idéer konkrete og giver tidlig feedback, før detaljerne bliver lagt fast.⁷²

Low-fidelity vs. high-fidelity wireframes

Fidelity er ifølge NN/g et udtryk for, hvor tæt et design ligger på det færdige systems udseende og fornemmelse. Det kan variere på tre områder, nemlig interaktivitet, det visuelle samt indhold og kommandoer, og et design kan være detaljeret på ét område og groft på et andet. En low-fidelity wireframe er ifølge IxDF et groft, forenklet layout, der kun handler om sidens grundlæggende struktur. Den bruger pladsholdere til billeder, tekst og interaktive elementer og er som regel sort-hvid eller i gråtoner.³⁷

Mid-fidelity ligger imellem og er ifølge IxDF den mest udbredte af de tre typer. Komponenterne er mere præcise, og gråtoner og forskellige tekstvægte viser, hvad der er vigtigst, men billeder og specifik typografi er stadig udeladt. En high-fidelity wireframe er en mere detaljeret og realistisk gengivelse af det færdige produkt med præcise størrelser på knapper og tekst, rigtige billeder og konkret indhold. Nogle har begrænset interaktivitet, fx klikbare elementer.⁸⁷

IxDF anbefaler low-fidelity, når hastighed og samarbejde betyder mest, og high-fidelity, når designet skal være mere præcist eller have opbakning. Ifølge NN/g kan interessenter se på et groft design, at arbejdet ikke er færdigt, og alle på holdet forventer ændringer. Et meget poleret design gør det derimod let for en leder at falde i fælden og sige »det ser godt ud, lad os gå live nu«.⁷³

Wireframe vs. mockup vs. prototype

NN/g definerer en mockup som »en statisk high-fidelity-simulering af et foreslået UI-design, der inkluderer visuelle detaljer som farver og billeder«. En prototype er ifølge samme ordliste »en tidlig version af et design, der bruges til at teste og validere idéer, interaktioner og funktionalitet«. IxDF sammenfatter arbejdsdelingen sådan, at wireframes bruges til struktur, mockups til det visuelle og prototyper til at teste oplevelsen.¹⁷

Grænserne er flydende. En prototype kan ifølge IxDF være alt fra en klikbar low-fidelity-model til noget, der ligner det færdige produkt, og NN/g nævner en sort-hvid skitse eller wireframe som eksempel på det visuelle niveau i en low-fidelity-prototype. En klikbar wireframe er derfor en low-fidelity-prototype. I den anden ende skriver IxDF, at high-fidelity wireframes ofte afspejler brandets stil, så de nærmer sig en mockup.⁷³

Du behøver ikke altid en wireframe. GOV.UK's Service Manual beskriver prototyper fra en hurtig skitse med papir og blyant til en kodet prototype, der virker som et fuldt interaktivt website, og siger, at du skal bruge den type, der passer bedst til dit behov på det tidspunkt. Skitser er gode til at udforske og diskutere idéer med kolleger, mens kodede prototyper ifølge GOV.UK er bedre til brugerresearch, fordi de er mere realistiske. Handler opgaven om dynamisk interaktion, som statiske wireframes ifølge NN/g er dårlige til at beskrive, eller har du færdige komponenter at bygge med, kan det give mening at gå direkte til en prototype.⁹⁴

Wireflows: wireframes med flow

En wireflow kombinerer wireframe-lignende sidelayouts med en forenklet, flowchart-agtig måde at vise interaktioner på. NN/g skriver, at wireframes er gode til at vise layout, men beskriver interaktion dårligt og er særligt dårlige til produkter med meget dynamisk indhold, fx mobilapps og webapps. Flowcharts kan beskrive brugerens opgaveforløb, men mangler sidekonteksten, som har stor betydning for brugeroplevelsen.¹⁴

Hvert trin i en wireflow er en wireframe eller et færdigt skærmbillede. En pil går fra den præcise komponent, brugeren handler på, fx en knap eller et link, til resultatet af handlingen. Resultatet kan også være den samme skærm i en ny tilstand, fx med ændret indhold eller med feedback som en bekræftelse, en farveændring eller en fejlbesked. NN/g lægger vægt på, at pilene tydeligt viser, hvilket klikområde der fører videre, især på skærme med flere mulige handlinger.⁴

Wireflows opstod i teams, der designede mobilapps, hvor hvert trin i flowet er en hel mobilskærm. De egner sig også til webapps og dynamiske sider, hvor indhold eller layout ændrer sig efter brugerens handlinger. NN/g advarer mod at bruge dem til statiske desktop-sites, fordi hvert wireframe-billede kan blive så stort, at overblikket over processen forsvinder. I en workshop må de gerne være hurtige skitser på whiteboard eller papir.⁴

Sådan laver du en wireframe

Hos IxDF begynder arbejdet før skitsen, i et forløb med seks trin: forstå målgruppen og forretningen gennem research, definér og prioritér kravene sammen med interessenterne, kortlæg brugerens flow, skitsér layout og funktioner med informationsarkitekturen i tankerne, få feedback fra interessenter og brugere, og byg videre med mockups og interaktive prototyper. IxDF's eksempel på et brugerflow i en webshop går fra forsiden over søgning og produktvalg til betaling og ordrebekræftelse.⁸

NN/g har en tegneguide i fire trin til folk, der ikke kan tegne. Tegn rammen for browservinduet eller enheden (forholdet behøver ikke være præcist i hånden), og tag browserens værktøjslinje eller enhedens knapper med som kontekst. Tegn derefter navigation og søgning, så de største elementer med tykke streger for overskrifter, tynde streger for brødtekst og en kasse med et kryds for billeder, og til sidst detaljer som knapper, dropdowns og afkrydsningsfelter. Vis call to action og valgte tilstande, og skriv teksten på den primære knap. NN/g skriver, at det gerne må være rodet, og at tykke tusser, en fast tidsramme og begrænset plads holder dig fra at pille ved detaljer.²

Papir og blyant kræver ingen opsætning, og Jakob Nielsen kalder papirprototyper en af de hurtigste og billigste teknikker i en designproces. Digitalt nævner IxDF blandt andet Figma, Balsamiq og Sketch, og Miro og Figma til mid-fidelity wireframes. Balsamiq er bygget til grove wireframes og beskriver selv resultatet som »intentionally low-fi«, så teamet diskuterer idéen frem for pixels. Værktøjet kan også gøre skærmene til en klikbar prototype.⁵⁷⁸¹¹

Sådan tester du en wireframe med brugere

NN/g kalder en prototype en hypotese, et bud på en løsning på et konkret designproblem, og den mest direkte måde at teste den på er at se brugere arbejde med den. Med en statisk prototype, på papir eller på skærm, spiller en person, der kender designet godt, »computeren« og lægger den næste skærm frem, når deltageren trykker. Jakob Nielsen skriver, at tidlig test slår sen test med så meget, at det opvejer forskellen i prototypens kvalitet, og at det mest udbredte estimat er, at en ændring er 100 gange billigere at lave, før der er skrevet kode, end efter implementeringen.³⁵

Ifølge NN/g lægger low-fidelity-prototyper mindre pres på deltagerne. Når designet ser ufærdigt ud, forstår de lettere, at det er designet og ikke dem, der bliver testet, de føler sig mindre forpligtede til at lykkes, og de udtrykker lettere negative reaktioner. Ulempen er den menneskelige »computer«. Går der for lang tid mellem klik og svar, kan deltageren miste tråden, og pausen giver tid til at studere siden mere, end de ellers ville.³

Brug realistisk indhold frem for lorem ipsum. Evan Sunwall fra NN/g skriver, at pladsholderindhold, især lorem ipsum, kan stå i vejen for brugbar feedback fra brugere og interessenter, og at hans egne tests er blevet afsporet, fordi pladsholdere skabte forvirring hos deltagerne. Skal du teste visuelle detaljer, læsbarhed eller specifikke komponenter som megamenuer og accordions, kræver det høj fidelity, og NN/g bemærker, at deltagere opfører sig mere realistisk over for noget, der ligner rigtig software. Af samme grund foretrækker GOV.UK kodede prototyper til brugerresearch.⁶³⁹

Typiske fejl i wireframes

IxDF advarer mod at springe brugerflowet over og skriver, at en wireframe også bør vise, hvordan brugeren bevæger sig gennem brugerfladen. Udelader du interaktive elementer som knapper og navigation, kan det bryde brugerens vej senere, og inkonsekvente symboler eller manglende labels gør wireframen uklar. Bliver wireframes ikke testet tidligt med brugere eller interessenter, kan det ifølge IxDF føre til dyre redesigns senere.⁷

En grov wireframe er det forkerte format til en ledelsesgennemgang. NN/g skriver, at wireframes ikke egner sig til gennemgange med direktører, fordi folk, der står langt fra projektet, typisk har brug for høj visuel og indholdsmæssig fidelity for at forstå et design. Den modsatte fejl er at polere wireframen så meget, at du selv bliver bundet til den. Ifølge NN/g vil designere hellere ændre en skitse end et design med fuld interaktion og æstetik, fordi det er sværere at opgive noget, man har lagt meget tid i.⁶³

Manglende annoteringer går ud over tilgængeligheden. IxDF anbefaler et klart visuelt sprog med annoteringer, hvor det er nødvendigt. W3C WAI's udkast til Accessibility Roles and Responsibilities Mapping beskriver, at UX-designeren annoterer designs, wireframes og prototyper, så komponenternes funktion og den forventede læserækkefølge er tydelig, og en tastaturbruger kan nå sidens indhold.⁷¹⁰

Ofte stillede spørgsmål

Kilder

1. UX Deliverables GlossaryNielsen Norman Group (Huei-Hsin Wang, 2024) · Definitioner af wireframe (»a skeletal outline of a design layout … before visual design is considered«), mockup, prototype og wireflow.
2. How to Draw a Wireframe (Even if You Can't Draw)Nielsen Norman Group (Kelley Gordon, 2021) · Hvad wireframes viser, tegnekonventioner (tykke/tynde streger, kasse med kryds) og fire trin fra ramme til detaljer. »Messy is completely fine«.
3. UX Prototypes: Low Fidelity vs. High FidelityNielsen Norman Group (Kara Pernice, 2016) · Fidelity i interaktivitet, visuelt og indhold; prototypen som hypotese; »computeren« i statiske tests; fordele og ulemper ved low- og high-fidelity i test.
4. Wireflows: A UX Deliverable for Workflows and AppsNielsen Norman Group (Page Laubheimer, 2016) · Wireframes beskriver interaktion dårligt; wireflows til mobilapps og dynamiske sider, pile fra den konkrete komponent, forsigtighed ved statiske desktop-sites.
5. Paper Prototyping: Getting User Data Before You CodeNielsen Norman Group (Jakob Nielsen, 2003) · Papirprototyper som en af de hurtigste og billigste teknikker; »early beats late«; estimatet om 100 gange billigere ændringer før kode.
6. Promptframes: Evolving the Wireframe for the Age of AINielsen Norman Group (Evan Sunwall, 2024) · Pladsholderindhold og lorem ipsum som barriere for feedback; wireframes egner sig ikke til gennemgange med direktører.
7. What is Wireframing?Interaction Design Foundation (IxDF) · Definition, low- vs. high-fidelity, wireframe vs. mockup vs. prototype, hvornår man bruger wireframes, typiske fejl og værktøjer.
8. How to Create Wireframes: An Expert's GuideInteraction Design Foundation (Mads Soegaard) · Lo-, mid- og hi-fi wireframes (mid-fi »the most prevalent«) og forløbet i seks trin fra research til mockups og prototyper.
9. Making prototypesGOV.UK Service Manual · Prototyper fra papirskitse til kodet prototype; brug den type, der passer til behovet; kodede prototyper er bedre til brugerresearch; GOV.UK Prototype Kit.
10. [Draft] Front-End Developer Responsibilities (ARRM)W3C Web Accessibility Initiative · Udkast (opdateret juli 2025): UX-designeren annoterer designs, wireframes og prototyper med komponenters funktion og forventet læserækkefølge.
11. Balsamiq: The wireframing tool for lean product teamsBalsamiq · Producentens egen beskrivelse af værktøjet: »intentionally low-fi« wireframes og klikbare prototyper.