Jakten på det perfekte prototypingsverktøyet: En gjennomgang av Adobe Flex Builder 3 13

I den evige jakten på det perfekte prototypingsverktøyet, har vi brukt programmer som Denim, Axure, Fireworks, Photoshop, Powerpoint og Visio. Sistnevnte er det vi bruker mest per i dag, men det har klart sine begrensninger, spesielt med tanke på interaktive prototyper. I den siste tiden har vi sett på Adobe Flex Builder 3 som et alternativ, og konklusjonen så langt er at det egner seg bra til enkelte typer nettsteder, spesielt nettsteder med høy grad av dynamikk og interaksjon.

Når vi tar de papirbaserte skissene våre over i digitalt format for brukertesting, er det flere kriterier som avgjør hvorvidt et prototypingsverktøy egner seg.

Verktøyet i seg selv bør være brukervennlig, det må kunne produsere interaktive og testbare prototyper, det bør være lett å gjenbruke elementer mellom prototyper og det bør gi god oversikt over informasjonsstrukturen som ligger bak.

Arbeidsverktøyene
Flex har en god WYSIWYG-editor og et rikt sett av standard html-elementer som gjør at man på kort tid kan komme i gang med å lage en skisse av et nettsted.

Brukergrensesnittet er ryddig og strukturert, og man får oversikt over alle sine prosjekter, tilgjengelige html-elementer og deres egenskaper. Den største flaten er satt av til å visuelt designe selve nettstedet.

Selve plasseringen av elementer i ulike layout-bokser fører til en strukturert oppbygning av prototypen. Dette er en litt annen tilnærming enn man finner i tegneprogrammer, men når man først forstår denne logikken, er det lettere å sette seg inn i prototyper som andre har laget.

Designprosessen

Pikselflikking er et velkjent begrep for prototypere, og her kommer Flex til unnsetning med en velutviklet ”snap-to-grid”- funksjon som letter arbeidet med plassering og omstrukturering av elementer. Dette gjør at ting legger seg i linje og i jevn avstand uten utstrakt flytting av piksler.

En tidlig prototype skal legge mer vekt på funksjonalitet enn grafisk profil. Standardutseende for nettsider utviklet i Flex har et proft men uferdig preg som egner seg sådan. Standard innstillinger for utseende gir et resultat som man ikke trenger å skamme seg over. De gråblå fargene gir et noe tungt visuelt uttrykk, men Flex har støtte for CSS, som gjør at man kan lage maler og avstemme fonter, former og farger på elementene.

Interaksjon og testbarhet

Den virkelige styrken til Flex ligger i dens egenskap som fullblods utviklerverktøy for rike webapplikasjoner. I verktøy som Visio, som i utgangspunktet er et vektorbasert tegneprogram for diagrammer, begrenser interaksjon seg stort sett til lenking mellom ulike bilder. Med lenking kan man simulere at en bruker klikker seg mellom ulike sider på nettstedet. Ofte kan enkle, klikkbare prototyper være nok for at nytteverdien skal være stor, men det er vanskelig å få testet input fra brukeren som for eksempel utfylling av skjemaer.

Med Flex kan man praktisk talt lage hva man vil, men ulempen er at stort sett all interaksjon må gjøres programmatisk. Dette blir for mange en svært høy terskel, og er dermed en av Flex’ større svakheter som prototypingsverktøy.

En prototype utviklet i Flex kjører i vanlige nettlesere med Flash installert, og vil dermed lett kunne benyttes i brukertester. Ved at mye av funksjonaliteten er på plass allerede i prototypen, slipper man å forklare brukeren og kunden at ”her skulle det skjedd det og det..”, og brukertesten blir mer realistisk.

Informasjonsarkitektur

Et godt prototypingsverktøy bør ha god støtte for den bakenforliggende informasjonsarkitekturen til nettstedet. Dette får man ikke gratis i Flex, og på større nettsteder kan det være vanskelig å få oversikt over strukturen. En svært nyttig funksjon i et prototypingsverktøy ville være å kunne bygge en informasjonsstruktur som automatisk ble gjenspeilet i selve prototypen – og omvendt. Dette hadde også vært verdifullt i forhold til dokumentasjon.

Gjenbruk

I og med at Flex er et utviklingsverktøy for nettsider, finnes det en rekke standard html-elementer klare til bruk. Knapper, nedtrekkslister, avkrysningsbokser, tekstfelter og kalendere kan enkelt dras og slippes inn i prototypen, og man får hjelp til å plassere elementene riktig i forhold til hverandre.
I tillegg er det mulig å bygge egne elementer, sammensatt av basiselementer, som kan deles mellom ulike prototyper. Dette gjør at verdien over tid øker, ettersom man i fellesskap kan bygge et bibliotek av ofte brukte elementer.

Samarbeid

Som regel er flere involvert i digitaliseringen av prototyper, og det er en fordel å kunne jobbe på samme prototype uten å måtte sende filer fram og tilbake. Flex er bygget på Eclipse, og støtter dermed versjonshåndteringsmekanismer som CVS og Subversion. Flere kan jobbe på en prototype samtidig og man får historikk på filene man produserer.

Livet etter prototypen

Ved å lage en prototype som funksjonalitetsmessig er så nær opp til det endelige resultatet som mulig, unngår man en rekke potensielle misforståelser senere i utviklingsløpet. De som skal implementere løsningen kan unngå å gjøre feilaktig antagelser siden de kan se hvordan nettstedet er ment å fungere. Det vil heller ikke være nødvendig å dokumentere prototypen i så stor grad, siden prototypen i seg selv demonstrerer ønsket funksjonalitet og oppbygning. Med Flex er det mulig å tilnærme seg et ”ekte” nettsted på en helt annen måte enn hva som lar seg gjøre i et tradisjonelt tegneprogram.

Er Flex det perfekte prototypingsverktøyet?

Nei, ikke til alle prototyper, men for noen løsninger kan det være det. Svaret er like mye at det perfekte prototypingsverktøyet er avhengig av hva man skal prototype.

Etter å ha brukt Flex i noen prosjekter, ser vi klart dets potensial som prototypingsverktøy. Det er forholdsvis enkelt å vise fram både innhold og interaksjon, og verktøyet egner seg spesielt godt i mer avanserte prototyper med mye interaksjon. Prototypene lar seg teste i en helt vanlig nettleser, og det er også god støtte for å kunne jobbe flere samtidig på samme prototype. Ulempene er at man ikke uten videre får oversikt over strukturen som ligger bak, og at selv enkel interaksjon krever noe programmeringskunnskap.

Hva er dine erfaringer med ulike prototypingsverktøyer?

Lenker
Last ned 30-dagers prøveversjon av Flex – Finnes for både Windows og Mac OS X
Flex 3 Component Explorer – oversikt over standardelementer i Flex
Flex 3 Style Explorer – få hjelp til å lage stilsett