Dette må være obligatorisk lesing for alle som bidrar til utvikling av programvare – enten man er produkteier, kunde, bruker, kravstiller, leder, interaksjonsdesigner, systemarkitekt, programmerer eller tester. Og for en gangs skyld er jeg ganske overbevist om at alle kan enes om en felles referanseramme. Istedet for å starte en ny debatt om hva som er det ene, korrekte svaret.

Nyt bildene, nyt innsikten – dette er nesten magisk:

http://www.cooper.com/journal/agile2008/

Nokia – Explore: Sharing Discoveries

Nokia – Achieve: Achieving Together

Nokia – Connect: Connecting Simply

Nokia – Live: Inspiring Senses

Det er mange interessante poengs å trekke ut av detaljene i disse filmene – alle telefonene har for eksempel følelsesladd berøringsfølsom skjerm, ikke ulikt våre venner i Cupertinos nyeste produkter. Så da er ihvertfall den brukergrensesnittfunksjonen ferdig prata – det er bare å begynne å trene seg på kunstferdige, men “halsbrekkende” tofingerstunts for å få utført de vanligste funksjonene på telefonen sin. Jeg ser for meg navngiving à la hine dagers jojo-triks for å skille alle “gestures” fra hverandre (”8-tall”, “vogga”, “tur med hunden” mv).
I tillegg reklamerer de med at alle bilder som mottas på ÆmÆmÆss™ kan projiseres rett på kjøleskapsdøren, alle sanger og coverbilder som er kjøpt og/eller lastet ned, kan sendes rett til stereoen. Man kan ta tak i to av vennene sine (begge single thirty-somethings som trenger et velrettet spark bak for å innse at de elsker hverandre), dra dem inn i kalenderen sin og vips; så kommer de på lammecarrè og sjokoladefondant halv åtte på onsdag. Alt mens man diskuterer og finpusser de siste 3D-skissene av de nye kontorlokalene med entreprenøren direkte på telefonen.

Hvorom allting er, noe (mye?) av dette kommer faktisk til å slå til, og da er det best du ikke står der med skjegget i innboksen. Tvert imot er det nok veldig lurt å skaffe seg erfaring med rike brukerinteraksjoner så snart som mulig. Det kan godt hende at det ikke blir iPhone som leder an i denne utviklingen, men andre som klarer å surfe den samme bølgen, rette opp de åpenbare svakhetene ved iPhone og fremstå som et varigere alternativ der iPhone kan risikere å bli en kortlivet spydspiss for en Telefon2.0-revolusjon.

For å oppsummere en smule (så du kan gå tilbake til å se videoene en gang til), så vil jeg si at jeg som utvikler av rike, interaktive brukergrensesnitt, ser nokså entusiastisk på fremtiden, selv om den altså mest sannsynlig er like rundt hjørnet.

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