Prototypframtagning jämfört med trådmodellering: Vad’s skillnaden?
Inom produktledning är en färdighet du gärna vill ha i din verktygslåda att kunna skapa en wireframe eller prototyper.
Att använda prototyper eller en wireframe är ett utmärkt sätt att visuellt förmedla en idé du kan ha för en mobilapp eller en webbplats, och ett sätt att få användarfeedback utan att det tar mycket tid.
Med det sagt råder det stor förvirring kring skillnaderna mellan prototyper och wireframes. De överlappar varandra i fråga om vad de omfattar, men det finns också många viktiga skillnader.
Continue Reading for Free
Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.
Have an account? Log In
Det är lätt att tänka att den främsta skillnaden mellan en wireframe och prototyper handlar om att den ena har låg detaljnivå (en wireframe), medan den andra har hög detaljnivå (wireframes med hög detaljnivå eller prototyper), men det finns mycket mer än så.
I den här artikeln ska vi titta på vad en wireframe är, tillsammans med prototyper, och skillnaderna mellan de två. Vi ska också diskutera mockuper, mellannivån mellan de två, och hur mycket du som produktchef bör känna till om designprocessen.
Vad är wireframing?
Låt oss först titta på vad en wireframe är.
En wireframe innebär att skala ner idén (till exempel en app eller en webbsida) till dess allra mest grundläggande delar. Det här är en överblick på 30 000 fots höjd över hur din app eller webbsida kan komma att se ut. Den innehåller en översikt över strukturen, användargränssnittet och hur informationen presenteras för användaren.
Fokus ligger här på enkelhet—att skapa en wireframe är inte en tidskrävande process. Fokus ligger inte på användarupplevelsen eller interaktiviteten.
En wireframe är utmärkt för att snabbt få feedback från viktiga intressenter och bekräfta att du är på rätt spår. Om inte är det enkelt att skapa iterationer med några få justeringar.
Hur ser en wireframe ut?
Några av de bästa metoderna för wireframing av produkter omfattar följande:
- En wireframe är vanligtvis svartvit eller i gråskala
- Lorem ipsum-text är vanligt som platshållare
- I stället för att visa bilder fungerar det bra att använda en enkel ruta (vanligtvis med ett ”x” i)
Kom ihåg att detta har låg detaljnivå: funktionaliteten och användarupplevelsen kommer senare.
Verktyg för att skapa en wireframe
Om du vill gå tillbaka till grunderna räcker det mer än väl att skapa en wireframe med penna och papper för att snabbt förmedla idén. Kanske är du ute och äter lunch eller sitter på ett kafé och allt du har till hands när inspirationen slår till är en servett och en penna.
Om inte är Balsamiq en populär programvarulösning för wireframing. Den här programvaran är strikt inriktad på att skapa wireframes och inget annat.
Om du förstås inte vill lära dig ännu ett program går det att skapa en wireframe med appar som du kanske redan är mer bekant med, till exempel Sketch och Invision.
Kom ihåg att en wireframe har låg detaljnivå och kan sättas ihop snabbt för att förmedla en idé. Du vill inte lägga massor av tid på att försöka lära dig ny programvara (även om Balsamiq är ganska lätt att lära sig).
Vad produktchefer bör veta om wireframes
Som produktchef vill du kunna förmedla dina insikter på ett visuellt sätt utan att det tar mycket tid.
Oavsett om du visar något för en mjukvaruutvecklare eller någon inom UX-design kommer kunskapen om att snabbt skapa en wireframe att göra underverk för din karriär inom produktledning.
Vad är prototyputveckling?
Prototyper är en version med hög detaljnivå som, beroende på användarfeedback, kanske inte ser ut eller fungerar särskilt annorlunda än din slutprodukt.
Prototyper är utmärkta för användartester. Du kan testa interaktionerna, användarupplevelsen, användbarheten och användargränssnittet.
Prototyper tar mycket längre tid att skapa eftersom de kan återspegla den slutliga produktdesignen ganska nära, men det sparar dig mycket tid om du går direkt till att skapa den slutliga produkten efter att ha testat den genom prototyper.
Hur ser en prototyp ut?
Beroende på vad din produkt är bör designen av din prototyp se ganska lik ut den slutliga designen av den färdiga produkten.
Detta bör omfatta de typsnitt, den profilering, de designelement och den användargränssnittsdesign som din organisation för närvarande använder för andra appar eller webbsidor.
Beroende på hur detaljerad du vill vara kan du skapa interaktiva prototyper för att få en bättre uppfattning om hur den färdiga produkten kommer att fungera. Detta kan omfatta klickbara länkar som tar dig till andra delar av prototypen.
Du kan också inkludera animeringar och övergångar för att skapa en prototyp som fungerar mycket mer som en färdig produkt skulle göra. I vissa fall – till exempel vid simulering av fysiska produkter, rumsliga layouter eller AR-gränssnitt – kan team vända sig till verktyg som stöder 3D-prototypframtagning för att fånga en mer verklighetstrogen känsla av interaktion och rörelse.
Verktyg för prototypframtagning
Några av de mest populära programmen för prototypframtagning är följande:
Många av dessa leverantörer erbjuder kostnadsfria verktyg för prototypframtagning eller freemium-versioner av sina program för att hjälpa dig att komma igång.
Vad produktchefer bör veta om prototyper
Detta kommer att bero på ett antal faktorer.
Om du arbetar på ett mindre företag kan du behöva bära många hattar och ha en uppfattning om hur man sätter ihop en prototyp med hög detaljgrad.
Om du arbetar på en större organisation är sannolikheten stor att du har teammedlemmar som är specialiserade på design av användarupplevelser. Det är dessa teammedlemmar som bör arbeta med prototypen, eftersom de har en mer specialiserad kompetens som passar bättre för uppgiften.
Om du som produktchef ska utveckla en färdighet bör du lägga mer tid på att skapa wireframes, eftersom det är något du kommer att göra oftare.
De viktigaste skillnaderna mellan prototypframtagning och wireframing
Låt oss sammanfatta de viktigaste skillnaderna mellan prototypframtagning och wireframing:
- En wireframe har låg detaljgrad och tar mindre tid att skapa, medan en prototyp har hög detaljgrad och tar längre tid.
- En wireframe är mer till för att förmedla en övergripande bild av produktidén. En prototyp ska likna hur den färdiga produkten fungerar och beter sig.
- En wireframe använder platshållare och fokuserar på den övergripande strukturen. En prototyp använder den faktiska designen.
- Wireframes är verktyg för att få godkännande från intressenter. Med en prototyp kan du testa användarupplevelsen och få användarfeedback genom användarnas interaktion.
More Articles
Mockups: mellantinget
Det finns ett visst mellanrum mellan en prototyp och en wireframe. För att överbrygga skillnaden mellan de två bör du också känna till mockups.
Wireframes går snabbt att sätta ihop, men ibland kan det vara svårt att föreställa sig hur den färdiga produkten ser ut när allt du har är gråskaleblock och lorem ipsum-text.
Med en mockup ligger fokus på att få den visuella designen helt rätt. Det handlar inte om användbarhetstester eller användarupplevelsen – det är prototypstadiet. Det handlar om den visuella aspekten av hur den färdiga produkten kan se ut – det är först när du går över till prototypen som du kan börja fokusera på användarflödet.
Samma sak gäller här när det handlar om vad en produktchef bör veta om mockups som om prototyper.
Om du arbetar på en större organisation har du utan tvekan teammedlemmar som är mycket bättre lämpade för designprocessen och kan sätta ihop en mockup för att få feedback. (Och för att vara tydlig: feedback är avgörande för att upptäcka problematiska produktdesigner.)
Kort sagt...
Nu har du en bättre förståelse för skillnaderna mellan mockuper och prototyper, samt mockuper som ett mellanting.
Du bör bedöma var du befinner dig just nu när det gäller dina färdigheter. Om penna och papper har fungerat för dig kan du fortsätta med det, eller så kan du prova de många utmärkta verktygen för UX-design som står till ditt förfogande.
Kom ihåg att dygnet bara har ett begränsat antal timmar och att arbetet med mockuper och prototyper i högre grad kommer att utföras av teammedlemmar som är specialiserade på designprocessen. Du bör arbeta nära tillsammans med dem för att skapa något med så få hinder som möjligt mellan prototypen och den slutliga produkten.
Om du är intresserad av att ta del av fler designinsikter kan du läsa vår sammanställning av webdesignkonferenser som äger rum i år.
Om du vill lära dig mer om hur du blir en bättre produktchef kan du prenumerera på nyhetsbrevet från The CPO Club.
