Spørgsmålet er ikke, hvilket materiale der ser mest færdigt ud. Det er, hvad teamet har brug for at lære, og hvor lidt der skal bygges for at undersøge det.
Start med det spørgsmål, materialet skal besvare
En wireframe kan hjælpe med at diskutere rækkefølge og placering: Hvad skal brugeren se først, og hvilke oplysninger hører sammen? Den er ofte enkel, men behøver ikke være helt uden detaljer. Det afgørende er dens formål, ikke om den er tegnet i grå nuancer.
En prototype lader jer undersøge, hvordan en idé fungerer. Den kan vise overgangen mellem trin, reaktioner på valg eller forståelsen af et helt forløb. Hvis I bruger ordene forskelligt i teamet, så aftal, hvad det konkrete materiale skal kunne vise.
| Behov | Wireframe | Prototype |
|---|---|---|
| Diskutere struktur | Viser indhold, hierarki og placering | Kan sætte strukturen ind i et forløb |
| Undersøge en handling | Kan forklare tilstanden før og efter | Kan lade en deltager prøve handlingen |
| Typisk materiale | Skitse eller skærmoversigt | Papir, klikbar model eller kode |
| Klar til lancering? | Dokumenterer et forslag | Er ikke automatisk et færdigt produkt |
Detaljer og interaktion er to forskellige valg
Et gennemtegnet billede kan være helt statisk. En grov papirskitse kan omvendt bruges til at afprøve et forløb, hvis en person skifter ark efter deltagerens valg. Visuel detaljegrad fortæller derfor ikke alene, hvor meget man kan undersøge.
Vælg det, der er nødvendigt for spørgsmålet. Skal I afklare navne og rækkefølge, kan enkle skærme være nok. Skal I undersøge brug af tastatur eller en dynamisk formular i browseren, er en kodet prototype ofte mere egnet end billeder med klikpunkter.
Et fiktivt bookingflow kan udvikles i små trin
Begynd med en wireframe, der viser valg af ydelse, dato og kontaktoplysninger. Sæt realistiske overskrifter og lidt eksempelindhold ind. Det kan afsløre, at kunden bliver bedt om at vælge noget, som endnu ikke er forklaret, eller at et nødvendigt trin mangler.
Forbind derefter de relevante skærme, så en deltager kan forsøge at ændre en tid. Tilføj en situation uden ledige tider, hvis det er den, I undersøger. Resten af produktet behøver ikke være bygget. Fortæl tydeligt, hvad der er simuleret, så modellen ikke bliver forvekslet med en rigtig booking.
Brug prototypen til at træffe en konkret beslutning
Skriv først, hvad I er usikre på. Giv derefter relevante deltagere en troværdig opgave uden at forklare, hvor de skal klikke. Observer, hvad de gør og misforstår. At vise modellen og spørge, om den ser fin ud, undersøger noget andet end at se en opgave blive udført.
Saml fundene med deres begrænsninger: hvem deltog, hvad blev afprøvet, og hvad var ikke muligt i modellen? Vælg derefter, hvad der ændres eller undersøges videre. Et gennemført prototypemøde er ikke automatisk dokumentation for, at produktet er valideret.
Aftal, hvad der skal ske efter prototypen
En prototype kan springe over adgangskontrol, datalagring og robust fejlhåndtering. Den kan bruge opdigtede oplysninger og faste svar for at holde fokus på et spørgsmål. De genveje kan være passende til afprøvning, men skal ikke ukritisk følge med til produktion.
Beskriv derfor leverancen tydeligt: designfil, afprøvbar model, dokumenterede indsigter eller implementeret funktion. Aftal også, hvilke beslutninger der er afklaret, og hvad udviklingen stadig skal løse. Det giver en mere brugbar overdragelse end blot at sende et link til nogle skærme.
Tag med videre
Det vigtigste
at huske.
- Vælg materialet efter det spørgsmål, I vil besvare.
- Visuel detaljegrad og interaktion er forskellige egenskaber.
- Skeln mellem en afprøvbar model og et færdigt produkt.
Lad os gøre det klart
Spørgsmål & svar
Skal jeg altid lave wireframes først?
Nej. Brug dem, når de hjælper med at afklare struktur. Et lille projekt eller en kendt komponent kan kræve en anden vej.
Er en klikbar Figma-fil en prototype?
Den kan være det, hvis den bruges til at afprøve en idé eller et forløb. Dens begrænsninger skal passe til det, I vil undersøge.
Kan prototypekode genbruges?
Måske, men det kræver en vurdering af kvalitet, sikkerhed, tilgængelighed og drift. At koden kan demonstrere en idé gør den ikke produktionsklar.
Hvad er forskellen på en wireframe og et mockup?
En wireframe fremhæver typisk struktur og prioritering. Et mockup viser ofte et mere detaljeret visuelt forslag. Begge kan være statiske; betegnelsen siger ikke alene, om man kan afprøve interaktioner.
Hvad betyder low fidelity og high fidelity?
Det beskriver, hvor detaljeret en model gengiver bestemte sider af løsningen. Detaljegraden kan være forskellig for udtryk, indhold og funktion. Vælg den præcision, der er nødvendig for det spørgsmål, du vil undersøge.
Kan man brugerteste en papirprototype?
Ja. Papir kan være egnet til at undersøge eksempelvis navne, rækkefølge og forståelse. En facilitator kan vise nye ark efter deltagerens handlinger. Metoden kan derimod ikke i sig selv vise, hvordan en rigtig browser eller hjælpemidler fungerer.
Hvornår giver en kodet prototype mening?
Når spørgsmålet kræver realistisk adfærd, dynamisk indhold, tastaturbetjening eller andre browserfunktioner. Afgræns det, modellen skal kunne, så arbejdet stadig står mål med den usikkerhed, den skal afklare.
Hvad skal en prototype vise ud over den pæne hovedvej?
Medtag relevante tomme tilstande, ventetid, ugyldigt input og muligheder for at gå tilbage. Vælg de situationer, som har betydning for undersøgelsen. Gør det tydeligt, hvilke handlinger og data der er simulerede.
Hvordan overdrager man en prototype til en udvikler?
Forklar flow, komponenter, indhold, tilstande og de beslutninger, afprøvningen har givet anledning til. Angiv også åbne spørgsmål. Et klikbart link bliver mere brugbart, når udvikleren kan skelne mellem aftalte regler og genveje i modellen.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
