Vi har benyttet en rekke verktøy for å lage prototyper før man programmerer (og designer) nettløsninger.

Så langt har jeg benyttet følgende:

• Powerpoint
• Visio
• Word
• Dreamweaver
• Illustrator
• Axure
• Papir-skisser

Andre kollegaer har også jobbet med:

• Pdf prototype
• Photoshop
• Flash

Alle disse ulike variantene har styrker og svakheter, men for å komme med konklusjonen først: Axure Pro (4.6) er pr. i dag det beste verktøyet for å prototype nettløsninger i min mening.

Axure Pro

Fordelene er at man kan lage forholdsvis interaktive prototyper uten å måtte være en racer på verken design eller html. Det er som å tegne i photoshop eller illustrator med den fordelen at man i større grad kan lage “masters” (maler) eller “widgets” (kompnenter) som man kan gjenbruke hvor man vil og så ofte man vil på alle sider. Hvis man endrer på en widget eller en master så vil endringen gjenspeiles på alle sidene denne er brukt. Man kan også flette flere masters sammen til å danne en ny master. Dette gjør at man bygger opp ett sett av byggeklosser (”moduler”) som man kan benytte en eller flere ganger i prototypen. Når jeg ønsker å teste ut et flyt så kan jeg eksportere sidene til en interaktiv html prototype og klikke meg rundt i løsningen.

Prototypen kan være nær opp til den relle løsningen eller kun som kjedelige trådskisser uten design. Begge deler er det mulig å lage med Axure. Men så fort man trekker inn designet så blir det selvfølgelig mer å tenke på og det er lett for at man blir sittende i timesvis å fikse på småting for at det skal se bra ut.

Eksempel på en trådskisse (med klikkbart nettkart til venstre):

Et eksempel på en “low fidelity” prototype av forsiden til Aschehoug.no.

Når vi hadde jobbet en stund med innhold, struktur og design så lagde vi en klikkbar prototype som kunne brukertestes. Denne så slik ut:

Et eksempel på en “high fidelity” prototype av forsiden til Aschehoug.no. Alle linker og bilder er klikkbare og fører til innhold, selv om ikke all tekst er riktig.

OK, flott! Tenker du - da er det jo bare å rulle ut og vi sparer penger på å utvikle frontend og html - dette ser jo flott ut! Ja, det ser flott ut, men koden er søppel! Dette er gjort med hensikt. Axure er et flott verktøy til å prototype og det betyr at når prototypen er ferdig så må jobben med å etablere teknisk rammeverk og visningsrammeverk gjøres fra bunnen av, men man har et godt utgangspunkt som er litt mer matnyttig (?) enn å lese en tørr dokumentasjon laget i word eller visio. OG man kan fint brukerteste prototypen for å få vekk en del feil før man setter i gang. Jeg synes det er god ting at jeg slipper å måtte kvalitetssikre html kode eller annet for å kunne sette opp en prototype raskt og uten å tenke på gjenbruk. Jeg har brukt Dreamweaver før, men det som skjer er at hvis man lager noe interaktivt ved å bruke predefinerte funksjoner (klipp og lim) så lager det såpass mye dårlig kode at front-end utvikleren river seg i håret i frustrasjon og må som regel begynne på nytt allikevel.

En siste fordel med Axure er at størrelsen på nettstedet (antall sider) gjør det ikke så veldig mer komplisert. Jeg har laget prototyper med hundre sider og med ti sider, begge deler fungerer fint. Hvis man prøver å lage en 100 siders protoype med powerpoint så har man garantert en kjempejobb med å kvalitetssikre lenker før en eventuell brukertest.

Jeg har imidlertid lyst til å høre hva du mener er et godt verktøy for prototyping. Men la meg slippe å høre “jeg koder alt i notepad” varianten - alle vet at det tar lengre tid