Användbara prototyper

Design är en iterativ process som bygger på användartester, reflektioner och åtgärder vid ritbordet. I seriösa projekt kan man inte längre låta en enskild konstnärs personliga smaksak styra processen, utan design är ett verktyg för att styra ett beteende. Därför jobbar vi med prototyper.

Varför ska man använda prototyper?

Om vi vill testa ett designkoncept på en grupp användare räcker det inte med wireframes. Syftet med wireframes är att förankra struktur och flöde – men det ska göras internt. Wireframes för sällan något gott med sig om de lämnar produktionen. De är ofta väldigt oklara och lämnar fler frågetecken än utropstecken hos de som inte är insatt i projektet.

Därför är de inte heller tillräckliga för att utföra användartester. Även om man kan få ut en del genom att låta personer klicka i wireframes kommer det aldrig att räcka. Den visuella aspekten påverkar användbarheten i större utsträckning än vad man kanske tror. Även om en webbplats är gudomligt strukturerad så kan en stökig visuell presentation förstöra detta. Därför behöver vi något som ligger närmare slutprodukten när vi utvärderar med användare.

Alltså, en prototyp.

Vad är en prototyp?

En prototyp kan sägas vara en simulering av en produkt eller en tjänst. Den klargör syftet med produkten, men också den känsla som ska förmedlas. Prototypen ska kunna visa hur det går till när man använder produkten i så stor utsträckning som möjligt.

En prototyp är dock inte en pixelperfekt version av slutresultatet. Därför måste man vara noggrann med att förklara detta. Av egen erfarenhet är det extra viktigt att detta förklaras internt i en organisation. Användare som utför tester bryr sig sällan om grafiska defekter, medan en ledningsgrupp har större benägenhet att fastna i just detta.

Bygg dina prototyper i kod

I mitt nuvarande projekt håller vi på att bygga en form av prenumerationslösning, som kräver en hel del interaktion med användarna. Innan jag kom in i projektet byggde man prototyper i verktyget InVision. Prototypverktyget låter dig ladda upp bilder och länka samman dem genom att markera ut klickbara ytor. Man kan alltså bygga en klickbar modell av sin produkt.

Men klickbar är inte samma sak som användbar.

Därför föredrar jag att man bygger prototyper i kod. I projektet måste vi kunna testa hur användare matar in uppgifter i formulär, något som är en omöjlighet i InVision. Interaktionen blir en allt större del i webbtjänster. Därför är det sånt som ska testas hos användarna. Och därför behöves prototyper med mer funktionalitet.

Alla ska koda

Saftig rubrik, eller hur? Men den har en poäng. Jag skulle faktiskt vilja sticka ut hakan och säga att en bra designer ska behärska programmering (eller åtminstone ha förståelse för det). Anledningen är att man måste förstå hur tekniken hänger ihop med den visuella delen.

Låt oss ta en hemsida som exempel. Att den är snabbladdad är tveklöst en del av användarupplevelsen. Prestandan hos en webbplats förankras redan i designfasen, där man kanske har valt bort onödiga bildelement till förmån för prestandan. Så kallad “flat desgin” är exempelvis en designtrend med prestanda i åtanke. Den rena och snygga visuella presentationen gör att färre grafiska element behövs, vilket ger ett positivt utslag på prestandan. Det är ingen slump att designspråket kom när mobilanvändandet var som störst.