Lärdomar från en kodprototyp

Det finns många sätt att bygga prototyper för användartester. Själv har jag arbetat mycket med prototyper kodade i HTML, CSS och jQuery. Om man känner sig hemma i kod är detta ett bra sätt då man kan arbeta mer med dynamisk funktionalitet, som att få olika respons beroende på vilken text man anger i ett inmatningsfält.

Arbetssättet med en kodprototyp använder jag i ett pågående projekt hos en av landets större tidningar. Under arbetets gång har jag funnit några lärdomar med upplägget som jag vill dela med mig av.

Ska koden återanvändas?

Den givna reaktionen när man bygger sina prototyper i kod är ju att den här koden kan återanvändas i den skarpa versionen av produkten. Detta är ett bra sätt att arbeta som potentiellt sett skulle innebära att när man är helt nöjd med prototypen, så är man också färdig med frontend-utvecklingen.

Nyckeln här är att tidigt etablera syftet med prototypen. Ska koden återanvändas? Isåfall är det exempelvis viktigt att redan från början ha en bra struktur på koden. Det kan också innebära att justeringar tar längre tid eftersom man vill undvika ”fulkod” i så stor utsträckning som möjligt. Flagga isåfall för detta.

Alltså, förankra syftet med prototypen hos övriga parter i projektet. Det du vill undvika är att personer tror att man kan återanvända allt, när det i själva verket är dålig kod.

Bygg en boilerplate

Hitta de verktyg du tycker är bra  och sätt upp en ”tom struktur”. Spara de JavaScript-bibliotek du brukar använda, kör på samma SASS-struktur (och så vidare).

På så sätt kan du sätta upp en kodmiljö mycket fortare än om du hela tiden skulle börja från början.

I mitt senaste projekt använde jag tre jQuery-verktyg till min kodprototyp, som har fungerat väldigt bra:

  1. jQuery UI (http://jqueryui.com)
    Detta är ett stort och välkänt bibliotek, med bland annat kalenderfunktioner, tabs, autocomplet och progressbars.
  2. jQuery Cookies (https://github.com/carhartl/jquery-cookie)
    Detta verktyg låter dig sätta cookies, vilket kan vara ett smidigt sätt att spara variabler mellan olika vyer.
  3. jQuery Validation Plugin (http://jqueryvalidation.org)
    Detta verktyg validerar formulär, vilket också är en ganska vanligt förekommande funktion som man brukar vilja användartesta i prototyper

Håll koll på hur prototypen sprids

Det kan också vara värt att fundera på vilka som får se prototypen. I och med att den kommer att närma sig det slutgiltiga resultatet kan personer uppfatta det som att det är en slutgiltig version av en webbplats. I själva verket kanske det handlar om en idé eller ett koncept som ditt team jobbar på.

Ett alternativ är att du bara jobbar lokalt på den egna datorn. I annat fall kan det vara bra att inte skicka runt länken till din webbprototyp hur som helst. Den kan mistas för en verklig produkt, vilket kan leda till oönskade konsekvenser.