Klickbara mobil­prototyper

Här på Kodamera är vår arbetsprocess något som ständigt ändras och utvecklas, mycket beroende på utformningen av det aktuella uppdraget. Något som dock fortsätter vara en konstant oavsett omfattningen av den aktuella projektet är behovet från teamen (och kunden!) av att få en helhetsbild av vad som skall produceras innan man grottar ned sig i produktionsgruvan. Vi vet av erfarenhet att ju tidigare i processen man kan hitta logiska luckor, konstiga användarflöden eller konceptuella frågetecken, desto lättare är det att slipa bort ojämnheterna och få ett bra slutresultat.

Sätten att räta ut frågetecknen är många, och vilket man använder sig av styrs i mångt och mycket (igen) av utformningen av uppdraget.

• Pappersskisser: Utmärkta att snabbt testa idéer och få feedback från övriga i teamet. Fördelen här är att man inte grottar in sig i designdetaljer utan kan diskutera konceptuella lösningar på en hög nivå. Detta är också ett smidigt sätt att snabbt skapa en något så när homogen bild av en lösning bland teammedlemmar och kunder, och minskar risken för att det senare i processen visar sig att man hade helt olika ingångsvärden om hur en given del av webbplatsen skulle fungera.

• Wireframes: Vi använder oftast wireframes för att ”skriva rent” idéer som först har plitats ned på papper. Oftast har beställaren inga problem med att sitta ned och delta vid bordet när papper och penna åker fram, men i många fall finns det ytterligare intressenter på beställarsidan som vill säga sitt. I de fallen är det bättre att leverera ett renskrivet digitalt dokument i form av wireframes än en samling papper med nedkluddade figurer på. Wireframen säkerställer också att ”rätt” diskussion förs vid projektmötet (dvs att konceptet och inte utseendet diskuteras). Dessa blir sedan en leverabel som efterkommande steg i processen utgår ifrån.

• Photoshop-skisser: För några år sedan var detta de facto standard i många projekt. Leverabeln från den konceptuella fasen var en samling .psd-filer där alla vyer på webbplatsen var utdesignade i detalj, och det var upp till utvecklaren att se till att det blev så i verkligheten också. I dagens multiskärm- och multigadget-värld är detta inte praktiskt möjligt av flera skäl. Oftast designar vi ut ett fåtal vyer för diskussion kring formspråket, men låter sedan dessa vyer tillsammans med wireframen (som skall beskriva alla andra vyer) utgöra referensmaterialet för det fortsatta utvecklingen.

• HTML-skisser: Används med fördel när det är någon typ av interaktion eller animation som är kritisk för upplevelsen.

I arbetet med Garantera Ebeco insåg vi tidigt behovet av att testa vår lösning både internt hos oss men även ute hos användarna för att säkerställa att vi var på rätt väg. Eftersom webbtjänsten först och främst skulle vara användbar på mobilen behövde vi ett sätt att snabbt kunna känna på innehållsflöden och funktioner direkt i mobilen.

Omnigraffle Actions

Verktyget som vi idag använder för att bygga wireframes heter Omnigraffle, och är egentligen först och främst ett graf- och diagramverktyg. Det har dock en mängd intressanta funktioner som även gör det intressant när man är i wireframes-branchen. I den här reflektionen ska jag snabbt visa hur man kan använda Action-funktionaliteten för att länka samman flera wireframe-vyer och sedan exportera ut det hela som en HTML imagemap som vi kan presentera i mobilen.

Förarbetet

Först behöver vi se till att alla vyer i vår wireframe finns samlade i ett och samma Omnigraffle-projekt, definerade som lika ”canvases”. Markera sedan ett objekt i någon av vyerna som du vill länka till en annan vy (exempelvis en menylänk i webbplatsens sidhuvud) och klicka på cmd+2 för att få upp Actions-paletten. Som standard är alla objekt satta till att inte reagera vid klick, men om man här ändrar till ”Jump Elsewhere” så får man upp möjligheten att definera vilken canvas som objektet skall peka mot. Sedan handlar det om att gå igenom sitt projekt och länka upp allt som skall vara länkat. Ett tips är att göra detta redan när man skapar objekten från början, då actions följer med när man kopierar in exempelvis sidhuvudet på en ny canvas.

Då vi i fallet med Garantera Ebeco arbetade med mobilvyer var jag noga med att sätta rätt dokument-storlek på mina canvases (cmd+2) för att  försäkra mig om att det skulle se bra ut på mobilen sedan. Ett tips är att se till att canvas-måtten mappar mot skärmstorleken på enheten som du skall testa på. En nackdel med denna teknik är att vi inte kan få fram en lösning som fungerar på flera skärmstorlekar, så välj dina mått väl. I detta fall valde jag att arbeta i ”dubbel upplösning” för iPhones med en skärmstorlek på 3,5 tum, dvs en canvasstorlek på 640x960px.

Exportera ut dina canvas som HTML

Vid det här laget sitter du förhoppningsvis med en utarbetad wireframe-version av din mobila webbplats/webbapp/applikation, med alla canvases sammanlänkade via länk-object med actions på sig. Nästa steg är att använda sig av Omnigraffles export-funktion. Om du trycker cmd+alt+E får du upp export-rutan, där du kan välja att få ut ditt arbete i en mängd format. För nu är vi intresserade av formatet ”HTML image map”. Lämna alla val som de är definerade, välj en plats för din export och klicka på ”Save”. Omnigraffle sparar nu ut alla dina canvases som varsin html-fil med en image-map i sig, där en renderad version av din wireframe är inlagd – komplett med klickbara ytor från dina action-objekt. Öppnar du en av html-filerna i din webbläsare skall du kunna klicka dig runt i projektet med musen.

Att klicka sig runt i webbläsaren kan i många fall räcka gott och väl för att skapa sig en uppfattning om känsla och flöden. I fallet med Garantera Ebeco ville vi dock komma ännu lite närmare känslan av ett applikation, och behövde därmed skruva ännu något mer på lösningen.

Stöd för touch och fullskärm i mobilen

Öppnar du en sida från vår export i Safari i iOS så fungerar den att navigera runt i. Skulle du dock försöka att spara ned den på hemskärmen för att få appkänslan så kommer du märka att den fortfarande öppnas i Safari när du klickar på ikonen. Jag snubblade för något år sedan över en post av Petter Silfver (@psilfver) där han beskrev en teknik han hade för lösa problemet dels genom att slå på fullskärmsläge, men även att ”rama” in sin export i en iframe, för att bibehålla fullskärmsläget när man klickar på länkarna.

Jag utgick från Petters lösning, men valde att skriva om lösningen i ren Javascript för att slippa beroendet av jQuery. Min version tar även retina-anpassade bilder och skalar ned dem 50% för att kunna visas på högupplösta skärmar likt den som återfinns i iPhonen (detta är anledningen till att jag valde att arbeta i dubbel upplösning i Omnigraffle). Sist men inte minst så använder jag Modernizr för att få touch-stöd på länkarna, för att ytterligare få till app-känslan. Det enda man behöver göra för att det skall fungera är att lägga index-filen i samma mapp som de utexporterade vyerna, och definera en startsida i scriptet. Hela scriptet finns tillgängligt på Github för den intresserade.

Inte en universallösning

I fallet Garantera Ebeco gjorde prototypen att både vi själva och intressenter på beställarsidan snabbt kunde få känna på lösningen och avgöra om den var något att ha. När vi längre fram i projektet hade utdesignade vyer i Photoshop var det en enkel sak att byta ut de utexporterade bilderna mot ”riktiga” bilder och därmed kunna demonstrera hur slutresultatet var tänkt att se ut, i rätt kontext.

I detta specifika fall passade lösningen som handen i handsken, men lösningen hade säkerligen sett annorlunda ut om vi exempelvis hade varit tvungna att testa upplevelsen på en mängd olika skärmstorlekar samtidigt. Som alltid bör man försöka definera vad det är man vill ha svar på innan man börjar skruva på en lösning.