Wireframe eller prototype?
En wireframe er en forenklet skisse som viser struktur og flyt, altså hva som finnes hvor, uten farger og form. En prototype er en klikkbar versjon som viser interaksjon og opplevelse: hvordan det faktisk er å bruke tjenesten. Wireframen hører hjemme tidlig, når strukturen skal på plass, og prototypen senere, når opplevelsen skal testes.
Når du bestiller design, dukker ordene wireframe og prototype opp i tilbudet, ofte som separate poster. De er ikke det samme, og de svarer på ulike spørsmål i ulike faser. Forstår du forskjellen, blir det lettere å lese et tilbud og å forstå hvorfor den som hopper rett til det pene, ofte må betale to ganger.
Hva de to er, og hvilke spørsmål de svarer på
En wireframe er en forenklet skisse av et grensesnitt. Grå bokser, plassholdertekst, ingen farger eller bilder. Det høres magert ut, men det er hele poenget: Wireframen fjerner alt unntatt det viktigste og tvinger frem spørsmålet hva skal være her, og hvor? Den svarer på struktur og flyt: hvilke deler en side har, hvordan de forholder seg til hverandre, og hvordan man kommer seg fra ett steg til det neste.
En prototype er en klikkbar versjon som etterligner den ferdige tjenesten. Man kan trykke på knapper, navigere mellom skjermbilder og se overganger. Prototypen svarer på et annet spørsmål: Hvordan føles det å bruke dette? Den handler om interaksjon og opplevelse: om flyten er smidig, om det er tydelig hva som skjer når man klikker, og om opplevelsen henger sammen.
Enklest blir det med en sammenligning fra byggebransjen: Wireframen er plantegningen, prototypen er en visningsleilighet du kan gå rundt i. Plantegningen viser at rommene ligger riktig, mens visningsleiligheten viser hvordan det er å bevege seg gjennom dem.
Kostnad og hvor i prosessen de hører hjemme
De to leveransene skiller seg kraftig i pris, og det forklarer hvorfor rekkefølgen mellom dem betyr noe.
| Leveranse | Innsats og fase |
|---|---|
| Wireframe | Lav: tidlig fase, skal kunne kastes og lages på nytt raskt |
| Prototype | Høyere: senere fase, når strukturen allerede sitter |
En wireframe er billig nettopp fordi den er forenklet. Den er laget for å endres, kastes og tegnes på nytt til strukturen føles riktig, og i den fasen ønsker du å kunne forkaste ideer uten at det koster mye. Prototypen krever mer arbeid fordi interaksjoner, tilstander og noen ganger realistisk innhold må på plass. Derfor hører wireframen hjemme tidlig, når grunnlaget skal legges, og prototypen senere, når det som allerede sitter, skal vekkes til live og testes for alvor.
Et konkret eksempel: For en ny bestillingstjeneste begynner man med wireframes av de fem eller seks skjermbildene flyten krever (velg tjeneste, velg tidspunkt, logg inn, betal, bekreft). Når den rekkefølgen føles logisk, bygges en klikkbar prototype av den samme flyten, som virkelige brukere får teste før én eneste kodelinje er skrevet.
Feilen med å hoppe til pikselperfekt design for tidlig
Den vanligste og dyreste feilen er å hoppe over wireframe-steget og gå rett på et pikselperfekt, klikkbart design.
Det føles produktivt å se noe pent raskt, men risikoen er at man finpusser en flyt som aldri er grundig testet. Når den detaljerte prototypen så møter brukerne og det viser seg at selve strukturen er tenkt feil, må ikke bare flyten gjøres om, men også alt det kostbare arbeidet som er lagt ned i overflaten. Du betaler to ganger: én gang for det som ble kastet, og én gang for det som erstattet det.
Å teste strukturen billig med en wireframe først lønner seg nesten alltid bedre enn å detaljere for tidlig. Struktur før overflate er det samme prinsippet som skiller god UX fra en pen fasade.
Trenger prosjektet ditt begge deler?
Ikke alle prosjekter krever hele kjeden. En liten, velkjent flyt, for eksempel en kontaktside eller en enkel påmelding, kan gå rett til en rask prototype uten formelle wireframes fordi det knapt er noen usikkerhet i strukturen. Risikoen for å bygge feil er rett og slett for liten til å forsvare det ekstra steget.
Jo større og mer usikkert prosjektet er, desto mer gir wireframe-steget igjen. En ny tjeneste med mange skjermbilder, flere brukertyper og avhengigheter mellom stegene har mye å vinne på at strukturen avklares og testes billig før noen bruker tid på det visuelle. Tommelfingerregelen er enkel: La usikkerheten avgjøre. Er du trygg på hva som skal bygges, kan du gå raskere over til hvordan det skal se ut. Er du ikke det, er wireframen den billigste forsikringen du kan kjøpe. Det er akkurat denne typen avveiing som inngår i måten vi i Weapp jobber med tjenestene våre på. Vil du finne ut hvilke steg akkurat prosjektet ditt trenger? Ta kontakt, så skisserer vi en fornuftig vei videre.
Ofte stilte spørsmål
Hva er forskjellen på en wireframe og en prototype?
En wireframe er en statisk, forenklet skisse som svarer på hva som skal finnes hvor: struktur og flyt, uten farger, bilder eller detaljert form. En prototype er en klikkbar versjon som svarer på hvordan det føles å bruke tjenesten: interaksjon, overganger og oppførsel. Wireframen handler om strukturen, prototypen om opplevelsen av å bevege seg gjennom den.
Hva kommer først, wireframe eller prototype?
Wireframen. Man finner ut av strukturen og flyten før man bruker tid på hvordan noe ser ut og oppfører seg. Prototypen bygger videre på en struktur som allerede virker fornuftig. Å lage en prototype før wireframen sitter, er å detaljere noe som kanskje skal forkastes. Rekkefølgen sparer altså tid og penger.
Koster en prototype mer enn en wireframe?
Ja, som regel betydelig mer. En wireframe er rask å lage nettopp fordi den er forenklet: Den skal kunne kastes og lages på nytt. En prototype krever mer arbeid fordi interaksjoner, tilstander og noen ganger realistisk innhold må på plass. Derfor er det lurt å la wireframen gjøre jobben sin først og lage prototype av det som allerede sitter.
Kan man hoppe over wireframe og gå rett på prototype?
Det er mulig, men sjelden lurt. Hopper man rett til en detaljert, klikkbar prototype, risikerer man å finpusse en flyt som ikke er gjennomtenkt. Når strukturproblemet så oppdages, må både strukturen og detaljene gjøres om. Å teste strukturen billig først er nesten alltid en bedre investering enn å detaljere for tidlig.
Trenger alle prosjekter både wireframe og prototype?
Ikke alltid. En liten, velkjent flyt kan gå rett til en enkel prototype, mens et stort og usikkert prosjekt har mye å vinne på å lage wireframes først. Tommelfingerregelen er at jo mer usikker eller kompleks strukturen er, desto mer er det billige wireframe-steget verdt før man låser seg til detaljer.