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.

Papirskisse

Eksempel på papirskisse

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.

Adobe Flex Builder 3

Adobe Flex Builder 3

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.

Controls

Eksempel på standardelementer i Flex

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

13 kommentarer

  1. Takk for godt tips. jeg jakter for tiden på et bra wireframing-verktøy og finner ikke det ultimate. Mange av programmene er gode til mye, men ingen til alt. Til nå har jeg prøvd iRise (too much), Visio (for lite interaksjon) og Powerpoint (ja..).

    Må nok teste ut Adobe Flex Builder.

  2. Ja, Flex Builder 3 er absolutt blitt et komplett prosjektverktøy for rike webapplikasjoner (RIA), hvor prosjekter nå kan kjøres helt fra prototype til ferdig applikasjon. Men brukerterskelen er, som det påpekes, noe høy for ikke-programmerere.

    Imidlertid: Adobe jobber for tiden med et nytt spennede verktøy (med kodenavn Thermo), som nok vil kunne bli et enda bedre verktøy for prototyping og konseptualisering av applikasjoner, og spesielt rettet mot ikke-programmerere:

    Thermo Sneak Peek, Part I
    Thermo Sneak Peek, Part II
    Thermo Sneak Peek, Part III

  3. @Øystein – dette ser utrolig spennende ut. Som Martin kommenterer over, er det en hvit flekk på kartet for interaksjonsdesignere og informasjonsarkitekter.

  4. Jeg har brukt Powerpoint, Visio og Axure for prototyping, og laget flere RIA’er i Flex. I det siste har jeg også snust litt på Microsofts Expression Blend. For rask wireframing, og for å lage prototyper med interaksjon er det ingen som slår Axure av de verktøy jeg har brukt. Flex Builder har mer funksjonalitet, men det er langt vanskeligere å bruke, selv for en utvikler. Sammen med et grafikkverktøy kan Axure brukes til å lage alt fra grovskisser til ferdig design. Det kom nettopp en ny versjon, finnes på http://www.axure.com.

    For øvrig virker Expression Blend veldig spennende som et design-verktøy. Blant annet kan det lage kode som utviklerne kan bruke når de skal lage det designeren har tegnet.

  5. Jeg har i den senere tid benyttet Serena Prototype Composer. Den fungerer meget godt, spesielt i forhold til å lage prototyper av bestillingsfunksjoner. Det er meget enkelt å lage skjemaer og det er enkelt å få dataen til å flyte gjennom løsningen.

    Dessuten er den gratis.

    http://www.serena.com/products/prototype-composer/home.html

  6. @Øystein

    Det så utrolig bra ut som et prototyping verktøy. Dette skal jeg følge med på!

  7. Har dere prøvd OmniGraffle til OS X?

  8. Legger ved et skjermskudd av slik programmet er, med Stencils for web-arbeid: http://bildr.no/view/188801

  9. Hei

    Vil bare takke for tipset om Axure, det var kongebra :)

  10. Bækker mr Løvskogen. Jeg er ingen reser i dette spillet, men må si at OmniGraffle anbefales, i hertfall på det nivået jeg opererer.

  11. Adobe Catalyst er nå tilgjengelig som public beta fra http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashcatalyst

  12. Har dere testet Justinmind Prototyper? Hvordan er denne i forhold til Adobe Flex?

  13. Hei alle,

    først, beklager eventuelle grammatikalske feil, jeg skriver på engelsk og auto-oversette.

    Hvis noen er interessert i å teste Justinmind Prototyper, og kanskje skrive en anmeldelse, bare snakke med meg, og jeg kan få deg informasjon, hjelp og kanskje en korrekturleser lisens.

    Jeg har lest artikkelen gjennom, og kan oppdage noen forskjeller mellom Flex og Justinmind prototyper:

    - med Justinmind prototyper, kan du generere sitemaps, og få det forbundet med de respektive sidene, slik at du får bot IA og wireframe design sammen i den samme programvaren.
    -Justinmind prototyper genererer HTML, som er nyttig for deling prosjekter. Også disse kan deles og kommenteres nettet med OnDemand tjenesten.
    - De fleste interaksjoner kan bygge enkelt med dra og slipp, ikke krever kunnskaper om programmering.
    - Som skjer med Flex, kan det skape tilpassede elementer (vi kaller widgets), og disse kan deles. vi har noen eksempler på våre nettsider.

    Hvis noen av dere er interessert i å teste, bare slippe en linje.

    Takk for at du tid,

    Alex Luna
    justinmind.com
    @just_in_mind

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>