Prototyper kontra trådrammer: Hvad er forskellen?

I produktledelsesverdenen er en færdighed, du gerne vil have i din værktøjskasse, at kunne lave wireframes eller prototyper.

At bruge prototyper eller en wireframe er en fantastisk visuel måde at formidle en idé, du måtte have til en mobilapp eller et websted, samt en måde at få brugerfeedback på, som ikke er tidskrævende.

Der er dog stor forvirring omkring forskellene mellem prototyper og wireframes. Der er betydeligt overlap mellem de to i forhold til, hvad de dækker, men der er også mange vigtige forskelle. 

Det er let at tro, at den primære forskel mellem en wireframe og prototyper handler om, at den ene har lav detaljeringsgrad (en wireframe), mens den anden har høj detaljeringsgrad (wireframes med høj detaljeringsgrad eller prototyper), men der er meget mere i det end det. 

I denne artikel ser vi på, hvad en wireframe er, sammen med prototyper, og forskellene mellem de to. Vi diskuterer også mockups, mellemstadiet mellem de to, og hvor meget du som produktchef bør vide om designprocessen. 

Hvad er wireframing?

Lad os først se på, hvad en wireframe er. 

En wireframe reducerer idéen (f.eks. en app eller en webside) til dens absolutte kerne. Det er fugleperspektivet på, hvordan din app eller webside kan komme til at se ud. Den omfatter en skitse af strukturen, brugergrænsefladen og hvordan informationen er placeret foran brugeren. 

Fokus er her på enkelhed—at lave en wireframe er ikke en tidskrævende proces. Dit fokus er ikke på brugeroplevelsen eller interaktiviteten. 

En wireframe er fantastisk til hurtigt at få feedback fra vigtige interessenter om, at du er på rette spor. Hvis ikke, er det nemt at lave iterationer med nogle få justeringer. 

Hvordan ser en wireframe ud?

Nogle af de bedste praksisser for produkt-wireframing omfatter følgende: 

• En wireframe er normalt sort-hvid eller i gråtoner
• Lorem ipsum-tekst bruges ofte som pladsholder
• I stedet for at vise billeder kan en simpel boks (som regel med et “x” i) gøre arbejdet

Husk, at dette har lav detaljeringsgrad: funktionaliteten og brugeroplevelsen kommer senere. 

Værktøjer til at lave en wireframe

Hvis du vil gøre det på den gammeldags måde, er det mere end nok at lave en wireframe med pen og papir for hurtigt at få idéen frem. Måske er du ude at spise frokost eller sidder på en café, og alt, du har, er en serviet og en pen, når inspirationen rammer. 

Hvis ikke, er en populær softwareløsning til wireframing Balsamiq. Denne software handler udelukkende om at lave wireframes og ikke andet. 

Hvis du ikke ønsker at lære endnu et softwareværktøj, er det naturligvis muligt at lave en wireframe med apps, du måske allerede kender bedre, såsom Sketch og Invision. 

Husk, at en wireframe har lav detaljeringsgrad og hurtigt kan sættes sammen for at formidle en idé. Du ønsker ikke at bruge masser af tid på at lære ny software (selvom Balsamiq er forholdsvis nemt at lære). 

Hvad produktchefer bør vide om wireframes

Som produktchef vil du gerne kunne formidle din indsigt på en visuel måde, der ikke tager lang tid. 

Uanset om du viser noget til en softwareudvikler eller en person, der arbejder med UX-design, vil viden om at lave en hurtig wireframe gøre underværker for din karriere inden for produktledelse. 

Hvad er prototyping?

En prototype er en version med høj detaljeringsgrad, som afhængigt af brugerfeedback måske ikke ser så anderledes ud end dit endelige produkt eller fungerer så anderledes. 

Prototyper er fantastiske til brugertest. Du kan teste interaktionerne, brugeroplevelsen, brugervenligheden og brugergrænsefladen. 

Prototyper er langt mere tidskrævende at skabe, da de kan repræsentere det endelige produktdesign meget nøjagtigt, men det vil spare dig masser af tid, hvis du går direkte i gang med at skabe det endelige produkt efter at have testet det gennem prototyper. 

Hvordan ser en prototype ud? 

Afhængigt af hvad dit produkt er, bør designet af din prototype se forholdsvis ens ud med det, som det endelige design af det færdige produkt kommer til at ligne. 

Dette bør omfatte skrifttyper, branding, designelementer og brugergrænsefladedesign, som din organisation i øjeblikket bruger til andre apps eller websider. 

Afhængigt af hvor detaljeret du ønsker at gå til værks, kan du skabe interaktive prototyper for at få en bedre idé om, hvordan det færdige produkt kommer til at være. Dette kan omfatte klikbare links, der fører dig til andre dele af prototypen. 

Du kan også inkludere animationer og overgange for at skabe en prototype, der opfører sig meget mere som et færdigt produkt. I nogle tilfælde – såsom simulering af fysiske produkter, rumlige layout eller AR-grænseflader – kan teams benytte sig af værktøjer, der understøtter 3D-prototypefremstilling, for at skabe en mere naturtro fornemmelse af interaktion og bevægelse.

Værktøjer til prototypefremstilling

Nogle af de mest populære programmer til prototypefremstilling er følgende:

• Adobe XD
• InVision
• Sketch
• Figma
• Photoshop

Mange af disse leverandører tilbyder gratis værktøjer til prototypefremstilling eller gratis basisversioner af deres software, så du kan komme i gang.

Hvad produktchefer bør vide om prototyper

Det afhænger af en række faktorer. 

Hvis du arbejder i en mindre virksomhed, kan du være nødt til at varetage mange forskellige roller og have en idé om, hvordan man sammensætter en prototype med høj detaljegrad. 

Hvis du arbejder i en større organisation, er der stor sandsynlighed for, at du har teammedlemmer, der er specialiserede i design af brugeroplevelser. Det er disse teammedlemmer, der bør arbejde på prototypen, da de har et mere specialiseret kompetencesæt, som er bedre egnet til opgaven. 

Hvis du som produktchef vil arbejde på én færdighed, bør du bruge mere tid på at lave strukturmodeller, da det er noget, du kommer til at gøre oftere. 

De vigtigste forskelle mellem prototypefremstilling og strukturmodeller

Lad os opsummere de vigtigste forskelle mellem prototypefremstilling og strukturmodeller:

• En strukturmodel har lav detaljegrad og tager kortere tid at skabe, mens en prototype har høj detaljegrad og tager længere tid at skabe.
• En strukturmodel bruges i højere grad til at formidle et overordnet perspektiv på produktidéen. En prototype er noget, der vil ligne den måde, det endelige produkt fungerer og opfører sig på.
• En strukturmodel gør brug af pladsholdere og fokuserer på den overordnede struktur. En prototype gør brug af det faktiske design.
• Strukturmodeller er værktøjer til at få godkendelse fra interessenter. En prototype giver dig mulighed for at teste brugeroplevelsen og få brugerfeedback gennem brugerinteraktion. 

Visuelle modeller: Mellemstadiet

Der er en vis afstand mellem en prototype og en strukturmodel. For at udfylde afstanden mellem de to bør du også kende til visuelle modeller. 

Selvom strukturmodeller er hurtige at sammensætte, kan det nogle gange være svært at forestille sig, hvordan det færdige produkt ser ud, når alt, man har, er gråtonede bokse og lorem ipsum-tekst. 

Med en visuel model er dit fokus at få det visuelle design helt rigtigt. Det handler ikke om brugervenlighedstest eller brugeroplevelsen – det er prototypefasen. Det handler om det visuelle aspekt af, hvordan det færdige produkt måske kommer til at se ud – det er, når du går videre til prototypen, at du kan begynde at fokusere på brugerflowet.

Det samme gælder her med hensyn til, hvad en produktchef bør vide om visuelle modeller som om prototyper.

Hvis du arbejder i en større organisation, har du uden tvivl teammedlemmer, der er langt bedre egnet til designprocessen og kan sammensætte en mockup for at få feedback. (Og lad mig understrege, at feedback er afgørende for at opdage problematisk produktdesign.)

Kort fortalt... 

Nu har du en bedre forståelse af forskellene mellem mockups og prototyper samt mellemstadiet med mockups. 

Du bør vurdere, hvor du befinder dig i forhold til dine færdigheder på dette område. Hvis pen og papir har fungeret for dig, kan du fortsætte med det, eller du kan prøve kræfter med de mange fremragende UX-designværktøjer, du har til rådighed. 

Husk, at der kun er et begrænset antal timer i døgnet, og arbejdet med mockups og prototyper i højere grad vil blive varetaget af teammedlemmer, der specialiserer sig i designprocessen. Du bør arbejde tæt sammen med dem for at skabe noget, der har den mindst mulige barriere mellem prototypen og det endelige produkt. 

Hvis du er interesseret i at tilegne dig mere viden om design, kan du se vores oversigt over webdesignkonferencer, der afholdes i år. 

Hvis du gerne vil lære mere om, hvordan du bliver en bedre produktchef, kan du tilmelde dig nyhedsbrevet fra The CPO Club.