Klikbar prototype: se og test jeres app, før den bliver bygget

Det korte svar: En klikbar prototype er en realistisk model af jeres app eller webapp, som brugerne kan klikke rundt i, selv om der endnu ikke er skrevet en linje kode. Vi tester den med rigtige brugere, retter det, der ikke virker, og omsætter den til et byg til fast pris.

0
Linjer kode før idéen er testet
24
Timer til skriftligt fast pris-tilbud
12–36
Features i pakkerne, når bygget starter

Den dyreste fejl i et softwareprojekt er at bygge det forkerte rigtigt godt. En prototype er den billigste måde at undgå det på. I stedet for at diskutere en kravspecifikation i ugevis kan I, jeres kollegaer og jeres kunder holde løsningen i hånden og mærke, om den giver mening. Skærmene ser færdige ud, knapperne virker, og flowet fra første klik til sidste bekræftelse kan gennemføres. Det eneste, der mangler, er maskinrummet bagved.

Hvorfor lave en prototype, før der skrives kode?

Prototype først

  • Misforståelser opdages på skærmen, ikke i koden
  • Rettelser tager timer, ikke sprints
  • Alle ser det samme, fra ledelse til udvikler
  • Tilbuddet bygger på noget konkret

Kode først

  • Fejl i flowet opdages, når brugerne får løsningen
  • Hver rettelse berører database, logik og tests
  • Kravspecifikationen læses forskelligt af hver part
  • Budgettet skrider, fordi scope først bliver klart undervejs
Det samme projekt, to startpunkter.

En prototype erstatter ikke en god kravspecifikation, men den gør den skarpere. Når skærmene er testet, kan hver feature beskrives præcist, og det er derfor, vi kan give en fast pris på bygget bagefter.

Hvilken slags prototype har I brug for?

Detaljeniveauet vælges efter, hvad I skal lære, ikke efter hvad der ser pænest ud.

NiveauHvad det erBedst til
Skitser og wireframesGrå kasser, der viser struktur og indholdTidlig afklaring af, hvad løsningen skal kunne
Klikbar lav-detaljeWireframes koblet sammen, så flowet kan gennemgåsTest af navigation og rækkefølge
Klikbar høj-detaljeFærdigt design med rigtige tekster, farver og tilstandeBrugertests, investorer, ledelse og fast pris-tilbud

Vi arbejder i Figma, så prototypen kan åbnes i browseren eller på en telefon via et link. I kan dele den med kollegaer og kunder uden at installere noget, og kommentarer kan skrives direkte på skærmene.

Hvordan tester vi prototypen med rigtige brugere?

Vi sætter en håndfuld personer fra målgruppen foran prototypen og giver dem realistiske opgaver: book en tid, find en faktura, opret en ny medarbejder. Vi forklarer ikke, hvordan løsningen virker, vi ser bare efter. Hvor tøver de? Hvad klikker de på, som ikke er et link? Hvilke ord forstår de ikke? Det tager typisk kort tid pr. person, og allerede efter få sessioner går de samme problemer igen. Så retter vi prototypen og tester igen. Metoderne kommer fra vores arbejde med brugerundersøgelser.

Hos Grundfos byggede vi kundeportaler til Grundfos iGRID inden for fjernvarme, fra feltstudier til UI, med klikbare prototyper som bindeled mellem research og design. Hos LEGO blev Service Portal formet af usability-tests, journey mapping og workshops med medarbejderne, før løsningen lå fast.

Hvad skal I have klar?

  • En kort beskrivelse af problemet, løsningen skal løse, og for hvem
  • De tre til fem opgaver, brugerne vigtigst skal kunne udføre
  • Eksempler på data, fx en ordre, en kunde eller en vagtplan, så skærmene ser realistiske ud
  • Adgang til et par personer fra målgruppen, som vil bruge en halv time på en test
  • Jeres logo og eventuelle farver, hvis prototypen skal ligne jeres brand

Mere skal der ikke til for at komme i gang. Har I allerede en kravspecifikation, skitser på papir eller et regneark, I arbejder i i dag, så tag det med. Det er ofte det bedste bevis på, hvordan arbejdet faktisk foregår. Regnearket viser, hvilke felter I reelt bruger, hvilke genveje medarbejderne har fundet, og hvor der i dag tastes det samme to gange.

Fra prototype til byg til fast pris

1

Uge 1: Afklaring

Workshop om mål, brugere og de vigtigste opgaver. Skitser af flowet.

2

Uge 2–3: Prototype

Klikbar prototype i Figma med rigtige tekster og de vigtigste tilstande.

3

Uge 3–4: Test og ret

Sessioner med brugere, rettelser og en ny runde, hvis det er nødvendigt.

4

Derefter: Byg

Fast pris på bygget i en af vores pakker, med prototypen som tegning.

Et typisk forløb fra idé til færdig løsning.

Når prototypen er testet, tæller vi features og integrationer og placerer bygget i en af vores pakker. En webapp starter ved 18.000 kr plus 600 kr/md, og en mobilapp ved 28.000 kr plus 1.200 kr/md. Selve prototypen prissættes som en fast pris i det skriftlige tilbud, og I får tilbuddet inden for 24 timer. Til en første version er næste skridt ofte MVP-udvikling. Se alle pakker på priser.

Udvalgte cases

Bygget af os, i drift i dag

Legetøj · LEGO, Billund

LEGO Service Portal, bygget omkring medarbejderen.

Det siger vores kunder

Vi har arbejdet sammen med Ceptiv om flere af vores digitale løsninger, og de er blevet en naturlig del af teamet. De arbejder hurtigt og omsætter idéer til nye designs og klikbare prototyper på kort tid, så vi kan teste med kunderne tidligt i stedet for at diskutere på papir.
Szabolcs Nagy · Lead Global Product Manager, GrundfosLæs casen

FAQ

FAQ om klikbare prototyper

Hvad er en klikbar prototype?
En klikbar prototype er en interaktiv model af en app eller webapp, lavet i et designværktøj som Figma. Skærmene ser ud som den færdige løsning, og brugeren kan klikke sig gennem flowet, men der er ingen database eller logik bagved. Den bruges til at teste idéen, afklare krav og vise løsningen til ledelse, kunder eller investorer, før der bygges.
Hvad koster en prototype af en app?
Prisen afhænger af antal skærme og flows, og om brugertests er med. Vi skriver den som en fast pris i et skriftligt tilbud inden for 24 timer efter jeres brief. Når prototypen er testet, prissættes bygget i vores pakker: webapps fra 18.000 kr plus 600 kr/md og mobilapps fra 28.000 kr plus 1.200 kr/md.
Hvor mange brugere skal prototypen testes med?
Færre, end de fleste tror. En håndfuld personer fra den rigtige målgruppe afslører typisk de største problemer, fordi de samme fejl går igen. Det er bedre at teste med få, rette og teste igen end at samle mange til én stor runde. Er der flere meget forskellige brugertyper, fx kunder og medarbejdere, tester vi hver gruppe for sig.
Kan prototypen genbruges, når løsningen skal bygges?
Ja, som tegning. Designet, teksterne, komponenterne og flowet bliver grundlaget for udviklingen, så intet skal opfindes igen. Selve prototypen er ikke kode, så den skal stadig bygges i React, Next.js eller React Native. Fordelen er, at udviklerne ved præcis, hvad der skal laves, og det gør både tidsplan og fast pris mere præcis.
Kan vi bruge prototypen over for investorer?
Ja, og det er en af de mest almindelige grunde til at lave en. En klikbar prototype i høj detalje viser idéen langt bedre end et slide, og den kan åbnes på en telefon under mødet. Kombineret med resultater fra brugertests giver den et konkret argument for, at der er et reelt behov, før I har brugt penge på udvikling.
Hvor lang tid tager det at lave en prototype?
For en afgrænset app eller webapp typisk nogle få uger fra første workshop til testet prototype. Tiden afhænger mest af, hvor mange flows der skal med, og hvor hurtigt vi kan finde testpersoner. Tidsplanen står i tilbuddet. Når prototypen er godkendt, kan bygget ofte starte med det samme, fordi kravene allerede er afklaret.

Fortæl os, hvad der skal bygges

I får et skriftligt fastpristilbud inden for 24 timer. Intet salgsmøde nødvendigt.

Dennis Nielsen

Dennis Nielsen

Head of Operations, Ceptiv

Gratis konsultation

En gratis time med gode råd, før I går i gang.

Beskriv jeres projekt, så kontakter jeg jer hurtigst muligt, og vi aftaler et uforpligtende møde. I går derfra med gode råd til, hvordan projektet kommer godt fra start.

  • Gratis
  • 1 time
  • Uforpligtende