av Niklas Sidhu Koskela

INLEDNING

 

Ofta används ordet wireframe för att beskriva prototyper, mock-ups och wireframes.

Denna missuppfattning orsakar en del missförstånd när man t.ex. presenterar en wireframe för en kund och denne undrar varför inget händer när de klickar på olika objekt.

Dessa 3 processer kommunicerar olika saker. Samtliga är av lika stor vikt men platsar vid olika tillfällen i designprocessen.

För att räta ut de missförstånd som ofta uppstår kring detta har jag fördjupat mig i samtliga av de tre samt undersökt olika verktyg som kan komma till användning.

 

WIREFRAMES

 

Ofta när man arbetar mot kund är de inte så insatta i vad wireframes är för något  (Haas, 2011). Men man kan säga att wireframing är det första skapande steget i design-processen när man skapar en app eller en hemsida (Chapman, 2010).

Innan man wireframar har man oftast sidans infrastruktur någorlunda färdigställd.

Det finns tre enkla sätt att förklara vad wireframing innebär:

  • Wireframes är enkla, svartvita layouter som beskriver storlekar och placeringar av olika element, navigation och vissa funktioner.
  • Man bortser från färgval, typsnitt, logotyper osv. Man fokuserar istället på produktens struktur.
  • Man säger ofta att de är som hus-ritningar där man presenterar husets uppbyggnad, utan interiör.

Att bortse från detta steg i design-processen och gå rakt på utseendet av applikationen eller sidan är som att strunta i att göra ritningar till ett hus.

Innan man börjar har man ofta ett ganska abstrakt flödesschema. Med hjälp av wireframes konkretiserar man det någorlunda.

Kunder vet sällan vad t.ex. nav, header eller Google Maps-implementering är och i den här processen kan man visualisera dessa saker.

Vidare understryker man användbarheten i en struktur, man kan enkelt och ofiltrerat se vad som antagligen inte fungerar, vad som inte bör vara placerat var.

Genom att ha med detta steget innan man börjar visualisera i färg och med typsnitt ger man också eventuella kunder möjlighet att komma med input vilka man enkelt kan ta i hänsyn samt göra ändringar utefter.

Skulle man gå rakt på t.ex. prototyp, skulle dessutom ändringarna med största sannolikhet både vara större och svårare att genomföra. Man sparar tid genom att designen kommer vara mer genomtänkt samt att alla är med på vad som ska byggas; utvecklare, kund, designers (Haas, 2011).

Wireframing gör utvecklingen av en app eller hemsida markant mycket enklare genom att man skalar av produkten och tillåter alla inblandade parter att fokusera enbart på funktion, användbarhet och interaktion.

Verktyg

Balsamiq Mockups

balsamiq1
Balsamiq Mockups är ett verktyg vars namn är något missledande. Det är helt klart ett wireframe-verktyg.

Jag har tidigare läst diskussioner kring skillnaden mellan att göra wireframes för hand respektive i datorn (enklare vs. mer komplext). Kontentan av diskussionen är att fördelen med att göra det för hand är när det kommer till ”kill your darlings”; det är lättare att göra sig av med något som gått snabbt att göra (James, 2013). Fördelen med att göra det digitalt är att man kan få det mer exakt och det blir ofta tydligare.

Balsamiq har lagt sig mellan de båda. För att det inte ska gå att göra vackra och välutvecklade visuella designer har de behållit känslan av att det är handgjort.

Man kan heller inte skapa någon interaktion. Anledningen till detta klargörs i tydlighet av en av skaparna på Balsmiq´s blogg ) där de förklarar att Balsamiq´s huvudsyfte är att presentera interaktioner med statiska bilder. Det är ämnat för att vara en del av idé-fasen (Angeles, 2011).

Med hjälp av dess simplifierade uttryck känns det lättare med ”kill your darlings”. Något som också underlättar detta är att man arbetar med enkla, färdiga element. Man slipper alltså lägga tid på att skapa egna element.

Personligen tycker jag att det man behöver finns med, i alla fall för enklare wireframes.

Axure

allmant

Detta program skulle också kunna ses som ett prototyp-program. I jämförelse med Balsamiq så är det mycket mer avancerat vilket resulterar att man också har fler möjligheter.

Man kan exempelvis bygga upp en infrastruktur med hjälp av länkar mellan sidor, man kan skapa effekter som uppstår när man för muspekaren över ett objekt, man kan göra dropdown-menyer.

Begränsningen kommer dock till de olika element man har att välja mellan. Man har det viktigaste så som rektanglar, textrutor, knappar m.m. I det avseendet är Balsamiq mer välutvecklat.

Man skulle kunna säga att det är ett wireframe-verktyg med prototyp-egenskaper. Det som gör att det inte är till för att göra mock-ups eller prototyper är just det faktum att det finns en visuell begränsning.

MOCK-UPS

En mock-up är en välutvecklad designpresentation. I en mock-up inkluderar man, utöver wireframens attribut, det visuella. Det råder dock delade meningar kring detta och på interactiondesign.org menar de att man fokuserar mer på innehåll och funktion och bortser från det grafiska (Soegaard, 2010).

Personligen ifrågasätter jag denna uppfattning då den del i processen där man tar fram den visuella utformningen inte finns med om man inte gör det i samband med att man gör prototypen vilket saknar logik då prototypen är det sista steget innan slutgiltig produkt och den grafiska gestaltningen bör vara relativt färdigställd och fokus bör ligga på funktion och interaktion.

De bör innehålla informationsstrukturen, visualisera innehållet samt demonstrera de grundläggande funktionerna. Detta har för syfte att få berörda parter att bedöma den visuella delen av projektet.

Man använder ofta mock-ups som ett medium för kritik och diskussion.

Mock-ups förknippas ofta med wireframes bland annat med anledning av namnen på digitala verktyg samt företagen som tillverkar dem (Soegaard, 2010).

Man kan använda mock-ups för att få feedback från intressenter. Tack vare dess visuella natur har de inte samma potentiella motstånd som en enkel svartvit wireframe och det går snabbare att utveckla eller ändra än vad det gör i en prototyp (se “Prototyp” längre ner) (Treder, 2012).

Det är svårt att hitta rätt program när man söker efter verktyg för att skapa mock-ups. Anledningen är, som tidigare nämnt, namnen på programmen samt delade uppfattningar av vad skillnaden egentligen är.

Verktyg

Mockingbird

mockingbird

Det här programmet framstår, enligt mig, som mer av ett wireframe-verktyg, precis som Axure. Man kan inte skapa ett visuellt uttryck utan fokus ligger på informationsarkitektur och infrastruktur. Mockingbird är nätbaserat.

Man kan enkelt skapa länkar mellan sidor genom att enkelt skapa sidor i vänster-kolumnen och sedan dra en sida till det objekt vilket man önskar länka till den aktuella sidan.

Precis som föregående program är man begränsad i och med de förbestämda objekten man har att välja på. Anledningen till att de har förbestämda objekt är för att det ska gå snabbt att skapa ”mock-ups”.

Man kan också kollaborera med andra människor på samma skiss samt att det är enkelt att dela. Man ändrar text på de olika elementen genom att dubbelklicka på dem.

Adobe Photoshop/InDesign

test_fallensdagar

Dessa två program från Adobe har båda oerhörda styrkor när det gäller att skapa mock-ups. Man har en del av de färdiga element som funnits i de program jag tagit upp hittills men utöver det kan man dessutom visualisera dessa element friare och därför skapa det visuella uttryck som egentligen ska finnas i en mock-up.

Svagheten kommer till när man antingen ska göra wireframes eller prototyper med anledningen att de tidigare nämnda mjukvarorna är snabbare om man endast ska skapa en enkel skiss samt att det är enklare att skapa interaktionen för prototyper i exempelvis Fireworks.

Hur enkelt och snabbt, samt hur invecklade mock-ups man kan göra i endera av dessa program beror på den individuella kompetensen men att ha kunskap i dessa program efterfrågas i hög grad på marknaden (Editors, 2012).

Dessutom samarbetar de väl med programmen Adobe Fireworks och Adobe Dreamweaver. Behärskar man samtliga av dessa program kan man skapa en färdig hemsida från grunden.

PROTOTYPER

En prototyp, precis som en mock-up, är en välutvecklad presentation. I denna process lägger man dock till interaktionen.

I en prototyp ska man kunna interagera med gränssnittet så som det mer eller mindre är tänkt att man ska kunna i den slutgiltiga produkten. Det behöver inte nödvändigtvis se ut som man vill att den färdiga produkten ska se ut, men näst intill (Treder, 2012).

Man använder sig av prototyper när man utför användartester för att se hur ens potentiella användare interagerar med sidan eller applikationen och får på så sätt en god insikt i funktionaliteten och användbarheten innan själva utvecklandet påbörjas. Detta kan göras på olika sätt och på olika nivåer, något som tas upp bra i boken Rocket Surgery Made Easy av Steve Krug om mer information kring detta önskas.

Prototyper konsumerar en hel del tid (och pengar) och om man kan, bör man utveckla prototyper på ett sätt som kan återanvändas när den riktiga utvecklingen sätts igång, t.ex. HTML och CSS.

Genom att lära sig ett bra och snabbt sätt att skapa relevanta prototyper kan man bli en värdefull tillgång för ett företag eller en kund.

Verktyg

 HTML/CSS

Att göra sina prototyper i HTML och CSS har väldigt många fördelar, speciellt om man arbetar med att ta fram en hemsida.

Det är logiskt att bygga prototypen i en så nära miljö som möjligt i förhållande till vart den slutgiltiga produkten kommer att byggas. På så vis minskar man klyftan mellan prototyp och färdig produkt och det blir enklare för de som utvecklar produkten att återanvända delar (Treder, 2012).

Det blir även mer uppenbart vilka begränsningar och tillgångar man har innan man kommit för långt i processen.

En vanlig wireframe är inte responsiv men det kan en kodad prototyp vara vilket underlättar när man ska sälja in ett koncept till kunder; man slipper vara orolig för deras skärmupplösning om man t.ex. skickar en fil till dem för att testa.

Det finns dessutom färdiga uppsättningar med gränssnitts-objekt skrivna i CSS som man enkelt kan ladda ner och använda sig av.

Här är tre länkar med färdiga CSS-element som kan vara användbara:

http://getuikit.com/

http://www.icondeposit.com/design:100

http://designmodo.com/flat-free/

Nackdelen är att man behöver vara relativt kunnig i att skriva kod, något som är långt ifrån en allmän kunskap samt att det med största sannolikhet kommer ta längre tid (Kay, 2012).

Adobe Fireworks

För att kunna skapa relevanta prototyper krävs det att man arbetar i ett program med ytterst lite begränsningar, något som Adobe har tagit vara på i Fireworks.

Adobe har i sin Creative Suite skapat mjukvaror som går att använda från det allra första steget i design-processen till det absolut sista. Fireworks uppgift hamnar i den näst sista delen, protypen.

Det här programmet tillhandahåller möjligheter att utifrån element utformade i Photoshop eller annan mjukvara efter preferens skapa en infrastruktur.

Vidare kan man dessutom skapa interaktiva PDF-dokument vilket jag provat, i exemplet nedan kan man klicka på länkarna i överkant för att byta sida: fw_wf

Man kan också exportera dokumenten som HTML-filer med bilder vilket kan underlätta övergången från prototyp till hemsida.

Adobe Fireworks är ett relativt komplext program, något som en mjukvara med väldigt lite begränsningar oftast resulterar i.

Det finns så mycket möjligheter att det tar ett tag att sätta sig in i men när man behärskar det kan man göra väldigt välutvecklade prototyper.

SLUTSATS

Efter att ha undersökt de 3 huvudsakliga designprocesserna vid framtagningen av en digital produkt står det ganska klart vad dessa tre innebär, när de bör initieras samt vilka verktyg som kan vara mest passande för ändamålet.

För att skapa sig en uppfattning av vad som efterfrågas eller behöver göras skapar man en enklare wireframe för att få en överblick över informationsarkitekturen samt infrastrukturen.

När man känner att man har en klar uppfattning om vad som behövs går man över i mock-up-fasen. I den här fasen visualiserar man de element man kommit fram till i första fasen, man försöker skapa något som ska likna den tänkta slutprodukten. Efter det går man över i prototyp-fasen där man tillsammans med det man visualiserat i mock-up-fasen implementerar interaktion.

Personligen, efter att ha fått en inblick i möjligheterna med Adobe Fireworks anser jag att en grundläggande kunskap i Adobe´s Creative Suite (framförallt Photoshop, Fireworks och Dreamweaver) är något som kan leda till en oerhört utveklande och marknadskraftig kompetens.

Med hjälp av en inblick i dessa olika mjukvaror som jag tagit upp kan man lättare vinna en kunds förtroende. Genom att snabbt och enkelt kunna skapa en interaktiv modell ger man kund och andra inblandade parter möjligheten att sätta sig in i designprocessen. Lyckas man bemästra ett verktyg som kan ta fram en prototyp som enkelt kan överföras till kod i den slutgiltiga produkten kan man spara tid för sig själv samt spara pengar för sina kunder.

KÄLLFÖRTECKNING

Angeles, Michael (2011) Why We Aren´t Doing Deep Interaction in Mockups, Balsamiq UX Blog [Elektronisk] Tillgänglig: http://blogs.balsamiq.com/ux/2011/06/17/why-we-arent-doing-interaction/

Chapman, Cameron (2010) Ultimate Guide to Website Wireframing, 
Six Revisions [Elektronisk] Tillgänglig:
 http://sixrevisions.com/user-interface/website-wireframing/

Editors, Crisp360 (2012) Four Adobe Software Skills In High Demand, Crisp360 [Elektronisk] Tillgänglig: http://www.crisp360.com/news/four-adobe-software-skills-high-demand

Haas, Nick (2011) 7 Reasons Why Wireframing Is Important in Web Design, Orbit Media Studios [Elektronisk] Tillgänglig: http://www.orbitmedia.com/blog/7-reasons-to-wireframe/

James, Ryan (2013) 6 Tips for Fast, Effective User Testing, Channel Seven [Elektronisk] Tillgänglig: http://domain7.com/blog/6-tips-fast-effective-user-testing

Kay, Trevor (2012) Interactive Prototypes And Time-Savers With Adobe Fireworks, Smashing Magazine [Elektronisk] Tillgänglig: http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/

Soegaard, Mads (2010) Mock-Ups, Interaction Design Foundation [Elektronisk] Tillgänglig: http://www.interaction-design.org/encyclopedia/mock-ups.html

Treder, Marcin (2012) Wireframing, Prototyping, Mockuping – What´s the Difference?, Designmodo [Elektronisk] Tillgänglig: http://designmodo.com/wireframing-prototyping-mockuping/