Prototyping i Xcode
Av Andreas Schjønhaug, 24. april 2012
For første gang har vi prototypet iPad-app i utviklerverktøyet Xcode, og det ga mersmak. I siste versjon av Xcode kan du gjøre mer designarbeid uten å programmere.
Læringskurven er bratt om du ikke har noen forkunnskap om objektorientert programmering, men fordelene ved å ha en prototype som faktisk ser ut som og fungerer som en app er store. Den lar seg også lett distribuere til testbrukere, og med litt planlegging kan arbeidet tas videre til utviklingsfasen.
Tidsskriftet på iPad
Vi fikk tidligere i år i oppdrag av Legeforeningen å lage iPad-app av Tidsskriftet.
Målgrupper og bruksoppgaver var det første som måtte avdekkes. Da vi hadde skissene klare og godkjent, så vi på ulike måter å prototype på. Dette var noen av verktøyene vi vurderte:
Når vi designer nettsider, lager vi ofte prototyper i HTML, CSS og JavaScript. Dette har klare fordeler i forhold til wireframes. En prototype laget i HTML er en fungerende nettside og ikke bare flate bilder, og utviklerne kan ta prototypen videre og slipper dermed å begynne helt forfra. En HTML-prototype er dessuten dokumentasjon i seg selv, og fører til færre misforståelser om hva som er tenkt i designprosessen.
Med dette i bakhodet, var det derfor naturlig å se på Apples eget utviklerverktøy for Mac og iOS, Xcode. Dette ville være det verktøyet utviklerene selv kom til å bruke når vår del av jobben var gjort. Tidlig i arbeidet med prototyping møtte vi teknisk underleverandør og ble enige om hvordan vi kunne jobbe sammen. Git er i vinden om dagen, og ble brukt både internt når vi jobbet sammen på prototypen, og for å kunne samarbeide med underleverandør.
Storyboards og segues
Fra og med versjon 4, kommer Xcode med Storyboard, noe som skal gjøre jobben for designere lettere. Der man tidligere måtte lage hvert enkelt skjermbilde som egen fil Interface Builder, kan man med Storyboard få oversikten over alle skjermbildene, og relasjonene mellom disse (segues).
Men er det nok til at du slipper å kunne noe om programmering?
Cocoa og Objective-C
Du kommer helt klart mye lengre enn før uten programmering. En app inneholder gjerne en eller flere tabeller, der innholdet tidligere måtte fylles ut programmatisk. Med Xcode 4 er det nå mulig å lage innhold i tabeller direkte i Interface Builder, noe som passer godt i prototypingsøyemed der dataene ikke nødvendigvis trenger å være reelle. Hvis man kun bruker standardkomponenter, kan man lage ganske mye uten å programmere.
Men uten noen forkunnskap om objektorientert programmering eller Objective-C kommer man dessverre fremdeles kort, man må i vert fall regne med en svært bratt læringskurve.
Interaksjon og animasjoner
En av de største fordelene med å prototype i Xcode (og tilsvarende å prototype nettsider i HTML) er at det man lager føles riktig, fordi det lages i samme medium som sluttproduktet. Interaksjonen i appen vil være så responsiv som man forventer av en native app, noe som ofte er problemet med webapper på iPad laget i HTML. Man kan også detektere gestures og definere animasjoner og bruke disse i interaksjonsdesignet, så prototypen blir langt rikere og nærmere sluttproduktet enn om man skulle bruke et annet verktøy.
Testing og distribusjon
Vi foretok en brukertest av prototypen, der vi brukte Noldus mobilkamera og speiling av skjermbildet på iPad til observatørrommet. Prototyper i Xcode kan lett distribueres både til test-iPader og til kundenes iPader. Testflight ble brukt for å organisere testbrukerne, og verktøyet gir deg oversikt over hvilke testbrukere som har hvilken versjon av prototypen.

Andreas er stor tilhenger av gjøre ting enklere. Oppgaver kan alltid bli enklere og mer intuitive. Han mener at nettsteder bør lære av og tilpasse seg brukerne, ikke omvendt. Spesielt på mobiltelefoner er det å gjøre det enkelt ekstremt viktig for å lykkes.
Skriv en kommentar
Pingback: → Slik blir Tidsskriftets nettbrettversjon