Design bättre och snabbare med Rapid Prototyping

• Om författaren
• Ytterligare läsning på SmashingMag:
• Processen för snabba prototyper
• Skopeing A Prototype
• Vad behöver prototyperas?
• Hur mycket bör prototyperas?
• Find the Story
• Planera dina iterationer
• Välj lämplig trovärdighet
• The Prototyping Spectrum
• Low Fidelity
• Medium Fidelity
• Hög fidelitet
• Välja en fidelitetsnivå
• Väljande av verktyg
• Dos And Don’ts
• Gör…
• Du ska inte…
• Framtida resurser

Om författaren

Lyndon Cerejo är en certifierad strateg för användarupplevelser i Capgeminis Rapid Design & Visualiseringsverksamhet, med en framgångsrik meritlista med …Mer omLyndon↬

Det gamla talesättet ”en bild säger mer än tusen ord” beskriver vad användargränssnittsprototyper handlar om: att använda visuella bilder för att beskriva tusentals ord av design- och utvecklingsspecifikationer som beskriver i detalj hur ett system ska bete sig och se ut. I ett iterativt tillvägagångssätt för utformning av användargränssnitt är rapid prototyping processen där man snabbt simulerar det framtida tillståndet för ett system, oavsett om det är en webbplats eller en applikation, och validerar det med ett bredare team av användare, intressenter, utvecklare och designers.

Det faktum att man gör detta snabbt och iterativt genererar återkoppling tidigt och ofta i processen, vilket förbättrar den slutgiltiga utformningen och minskar behovet av ändringar under utvecklingen.

Ytterligare läsning på SmashingMag:

• Optimera din design för snabb prototyptestning
• Välja rätt prototypverktyg
• Innehållsprototyper i responsiv webbdesign
• Restaurera användargränssnittsprototyper (utan att skapa zombier)

Prototyper sträcker sig från grova skisser på papper till interaktiva simuleringar som ser ut och fungerar som den slutliga produkten. Nycklarna till framgångsrik snabb prototypframställning är att snabbt revidera utifrån feedback och att använda lämplig prototypframställningsteknik. Snabba prototyper hjälper teamet att experimentera med flera tillvägagångssätt och idéer, det underlättar diskussionen med hjälp av visuella bilder i stället för ord, det säkerställer att alla delar en gemensam förståelse och det minskar risken och undviker missade krav, vilket leder till en bättre design snabbare.

Processen för snabba prototyper

Snabba prototyper innebär flera iterationer av en trestegsprocess:

1. Prototyp Konvertera användarnas beskrivning av lösningen till modeller, med hänsyn tagen till standarder för användarupplevelser och bästa praxis.
2. Granska Dela prototypen med användarna och utvärdera om den uppfyller deras behov och förväntningar.
3. Förfina Baserat på återkoppling, identifiera områden som behöver förfinas eller definieras och förtydligas ytterligare.

Prototypen startar vanligen i liten skala, med några få nyckelområden som modelleras, och växer i bredd och djup under flera iterationer allteftersom nödvändiga områden byggs ut, tills prototypen är färdigställd och lämnas över för utveckling av den slutliga produkten. Processens snabbhet är tydligast i iterationerna, som sträcker sig från ändringar i realtid till iterationscykler på några dagar, beroende på prototypens omfattning.

Skopeing A Prototype

Ordet prototyp framkallar ofta bilder av en kodad, fullt fungerande version av en applikation eller ett gränssnitt. Snabba prototyper är inte avsedda att utvecklas till fullt fungerande lösningar, utan är avsedda att hjälpa användarna att visualisera och utforma användarupplevelsen av slutprodukten. Med detta i åtanke bör du bestämma dig för några viktiga frågor när du planerar en prototyp innan du påbörjar prototyparbetet.

Vad behöver prototyperas?

Goda kandidater för prototypering är bland annat komplexa interaktioner, ny funktionalitet och förändringar i arbetsflöde, teknik eller design. Det är till exempel lämpligt att ta fram prototyper för sökresultat när man vill göra stora avsteg från den vanliga sökupplevelsen, t.ex. för att införa facetterad sökning eller möjligheten att förhandsgranska ett dokument utan att lämna sökresultatet.

Hur mycket bör prototyperas?

En bra tumregel är att fokusera på de 20 % av funktionaliteten som kommer att användas 80 % av tiden, dvs. den nyckelfunktionalitet som kommer att användas mest frekvent. Kom ihåg att poängen med snabba prototyper är att visa hur något kommer att fungera eller, i senare skeden, hur designen kommer att se ut, utan att prototypera hela produkten.

Find the Story

När du har identifierat de områden som ska prototyperas, väver du ihop dem till ett eller flera scenarier: identifiera de sammanhängande vägarna genom användarupplevelsen som prototypen simulerar. För en webbplats som säljer skor kan ett scenario vara ”Boring Joe” som köper exakt samma Nike löparskor som han köpte för sex månader sedan, medan ett annat scenario kan vara ”Exploring Sam” som bläddrar igenom storlek 10 för att hitta ett par Oxfords och ett par loafers som intresserar honom.

Planera dina iterationer

Helheten av prototypen byggs vanligen inte i en enda iteration utan snarare bit för bit. Ett bra tillvägagångssätt är att börja skapa prototyper på ett brett och omfattande sätt och sedan dyka djupt ner i utvalda delar av lösningen. För en webbplats skulle detta innebära att man bygger upp startsidan och landningssidorna för de viktigaste avsnitten i den första iterationen (ibland kallad en horisontell prototyp) och sedan granskar och reviderar detta ramverk. Efterföljande iterationer skulle kunna gå in på en eller flera delar av webbplatsen (en vertikal prototyp); för en webbplats för nedladdning av media skulle detta kunna vara de steg som en användare skulle ta för att hitta en video och ladda ner den, eller hur de skulle hantera media i sitt onlinebibliotek.

Välj lämplig trovärdighet

Trovärdighet hänvisar till hur nära en prototyp liknar den slutgiltiga lösningen. Det finns flera dimensioner av trovärdighet, och prototyper kan ligga var som helst på spektrumet för var och en av dessa dimensioner. Beroende på designprocessens skede och målen med prototypen, välj lämplig fidelity för vart och ett av följande:

• Visuell fidelity (skissad ↔ stiliserad) Utseende och känsla är den mest märkbara dimensionen av en prototyps fidelity och om den inte väljs på rätt sätt, kan den leda till att prototypsgranskningar hamnar i skymundan. Om man går in på hi-fi för tidigt kommer användarna att fokusera på den visuella designen, vilket inte är lämpligt i tidiga skeden. Ur visuell synvinkel behöver prototyperna inte vara pixelperfekta utan bör vara proportionerliga. Om det vänstra navigeringsområdet till exempel ska uppta en femtedel av en skärm med 1024 pixlar behöver det inte vara exakt 204 pixlar brett, så länge som det är proportionerligt i prototypen. När prototyperna utvecklas under designcykeln kan du öka den visuella trovärdigheten vid behov genom att införa stil-, färg-, varumärkes- och grafikelement.
• Funktionell trovärdighet (statisk ↔ interaktiv) Visar prototypen hur lösningen kommer att fungera (statisk) eller ser den ut att vara fullt funktionell och reagera på användarens inmatning (interaktiv)? Denna dimension distraherar användarna mindre, men genom att lägga till interaktivitet i efterföljande iterationer ökar den funktionella fideliteten och gör det möjligt att använda prototypen för användbarhetstester, utbildning och kommunikation.
• Innehållstrohet (lorem ipsum ↔ verkligt innehåll) En annan dimension som ofta distraherar användarna är det innehåll som visas i prototypen. Snirkliga linjer och blindtext som lorem ipsum är bra att undvika i tidiga skeden av prototypframställningen. Men när prototypen förfinas, utvärdera behovet av att ersätta dummy-text med verkligt innehåll för att få en känsla för hur det påverkar den övergripande designen.

The Prototyping Spectrum

Low Fidelity

Det snabbaste sättet att börja prototyperna är också det enklaste: att sätta penna(cil) på papper. Att skissa på papper är ett tillvägagångssätt med låg tillförlitlighet som vem som helst kan göra; inga särskilda verktyg eller erfarenhet krävs. Skisser används oftast under de tidiga skedena av en designcykel och är ett snabbt sätt att skapa grova mock-ups av designstrategier och koncept och att få feedback från användarna. Pappersprototyper är idealiska under brainstorming och konceptualisering och kan göras ensamma i ett bås med en skissbok eller i en grupp med ett blädderblock (eller whiteboard) och markörer.

Pappersprototyper, som ligger i slutet av prototypningsspektrumet med låg trovärdighet, är statiska och har vanligen låg visuell trovärdighet och innehållstrohet. Detta tvingar användarna att fokusera på hur de kommer att använda systemet i stället för hur det kommer att se ut, och det gör konstruktörerna mer öppna för ändringar som baseras på användarfeedback.

Prototyper med låg trovärdighet lämpar sig för snabb prototypframställning. Den har ingen inlärningskurva utan låter dig göra ändringar enkelt och snabbt.

Medium Fidelity

När vi börjar använda datorbaserade verktyg som Visio och Omnigraffle för att ta fram prototyper ökar fideliteten på de flesta fronter, vilket ger medium-fidelity-prototyper. Wireframes, arbetsflöden och scenarier som skapas med dessa verktyg tar mer tid och ansträngning men ser mer formella och raffinerade ut. Även om visuella element som varumärke, färger och stil kan införas, håller sig prototyperna ofta borta från dem och fokuserar istället på att demonstrera applikationens beteende. Interaktivitet kan simuleras genom att länka sidor eller skärmar, men den funktionella trovärdigheten är i bästa fall medelhög. Dessa prototyper lämpar sig bäst för att avgöra om användarnas behov uppfylls och om användarupplevelsen är optimal.

Det finns två anledningar till varför man avsiktligt kan få en prototyp med medelhög fidelitet att inte se ut som en prototyp med medelhög fidelitet:

• Det första är att man genom att använda Balsamiq eller skissartade Visio-stencils för att få prototypen att se ut som en låg fidelitet tvingar man användarna att betrakta den som ett utkast eller ett pågående arbete, snarare än en polerad och färdig produkt.
• Det andra är att man genom att ge prototypen en hög visuell fidelitet (t.ex. i en omfattande layout gjord i Photoshop) får användaren att fokusera på den visuella designen och utseendet, inklusive färger, typsnitt, layout, logotyp och bilder.

Den snabba prototypframställningen av prototyper med medelhög fidelitet uppnås med hjälp av mallar, schabloner och återanvändbara widgets och element. Den blir snabbare när du blir bättre på att använda de verktyg du väljer.

Hög fidelitet

Hög fidelitetsprototyper är de mest realistiska och förväxlas ofta med den slutliga produkten, men de är vanligtvis tidskrävande. För några år sedan var det enda sättet att skapa prototyper med hög trovärdighet att faktiskt koda med hjälp av ett programmeringsspråk, vilket ofta krävde att formgivaren och utvecklaren arbetade tillsammans. Numera kan dock icke-tekniska användare med hjälp av verktyg för applikationssimulering dra och släppa gränssnittswidgetar för att skapa trovärdiga prototyper som simulerar slutproduktens funktionalitet, till och med när det gäller affärslogik och databasinteraktioner. Axure och iRise är några exempel på verktyg för tillämpningssimulering som kan användas för att skapa prototyper av hög kvalitet.

Dessa prototyper är lämpliga när det krävs hög visuell och funktionell kvalitet, t.ex. när man inför en ny teknik (t.ex. när man går över från en stordatorapplikation – ja, de finns fortfarande – till en webbaserad lösning). De flesta av dessa prototyper kan inte omvandlas till användbar kod, men de fungerar som en utmärkt referens för utvecklare. De är också användbara för att genomföra användbarhetstester och utbilda användare.

Hög-fidelitets-prototyper är relativt snabba, med tanke på den interaktivitets- och fidelitetsnivå som krävs, och de kan påskyndas genom att man använder verktyg för dra-och-släpp-simulering. Dessutom underlättar vissa av dessa verktyg insamling av användarfeedback och dokumentation av krav, vilket ytterligare påskyndar designprocessen. Även om du inte behöver lära dig ett nytt programmeringsspråk har dessa verktyg en inlärningskurva.

Välja en fidelitetsnivå

Vid val av prototypens fidelitet finns det inte ett enda korrekt tillvägagångssätt. De flesta konstruktioner av nya produkter börjar bäst med skisser för att sedan övergå till prototyper med antingen medelhög eller hög fidelitet, beroende på systemets komplexitet och kraven på fidelitetsdimensionerna.

I arbetet med en viss klient inom läkemedelsindustrin gick vi från whiteboards till interaktiva prototyper som hade hög funktionell och innehållslig fidelitet men låg visuell fidelitet. De brydde sig mindre om utseendet och känslan än om att följa företagets riktlinjer.

För en annan kund, denna gång inom detaljhandeln, var vår interaktiva prototyp tvungen att ha hög visuell och funktionell trovärdighet. Innehållstillhörigheten spelade ingen roll eftersom de skulle återanvända innehållet och redan var bekanta med det. För dem var utseendet, känslan och den interaktiva upplevelsen viktigare eftersom detta var deras första implementering av SharePoint och de ville att portalen skulle se ”icke-SharePointy” ut!

Väljande av verktyg

Avhängigt av ditt tillvägagångssätt har du ett brett utbud av verktyg att välja mellan. Dan Harrelson har sammanställt en lista över populära prototypverktyg på bloggen Adaptive Path.

Varje verktyg har sina egna funktioner och styrkor. Utifrån dina behov och kraven i de projekt du arbetar med kan du utvärdera vilket verktyg som är lämpligast. Här är några frågor att tänka på när du utvärderar verktyg:

• Hur lätt är det att lära sig och använda verktyget?
• Är det flexibelt så att det kan stödja prototyper för webb-, paketerade och skräddarsydda programvarutillämpningar samt skrivbords- och mobiltillämpningar?
• Är det möjligt att få tillgång till ett arkiv med återanvändbara stencils, mallar eller widgetar?
• Hur lätt är det att dela prototypen med andra för granskning? Kan deras feedback fångas upp med hjälp av verktyget?
• Hur lätt är det att göra ändringar i farten eller att införliva feedback?
• Har verktyget några samarbetsfunktioner, t.ex. att flera personer kan arbeta med det samtidigt?
• Vad är licensvillkoren och kostnaderna?

Dos And Don’ts

När du kommer igång är här några punkter om effektiv snabb prototypframställning som du bör ha i åtanke:

Gör…

• Arbeta i samarbete med användare, affärs- och IT-intressenter vid snabb prototypframställning. Förutom att ge värdefull återkoppling får de också en känsla av äganderätt till slutprodukten.
• Undervik ”prototypernas krypning” genom att ställa upp förväntningar på processen, bland annat förväntningar som påverkar syfte, trohet, omfattning och varaktighet. Påminn alla, inklusive dig själv, om att snabba prototyper är ett medel för att uppnå ett mål, inte ett mål i sig.
• När du skapar interaktiva prototyper och simuleringar med hög trovärdighet bör du bygga in realistiska fördröjningar (t.ex. för att uppdatera skärmen eller för att gå igenom stegen i en transaktion), så att användarna inte förväntar sig omedelbara svarstider från slutprodukten.
• Använd, återanvänd, återanvänd. För datorbaserade prototyper innebär detta att man sparar återanvändbara mallar, stenciler, mönster och widgets för framtida projekt.
• Det viktigaste är att börja varje prototypgranskningssession med att säga att detta bara är en prototyp, en mock-up, inte den verkliga lösningen. Detta påminner användarna om att detta är ett pågående arbete, uppmuntrar till återkoppling och, när det gäller prototyper med hög trovärdighet, förhindrar det användarna från att misstänka att det rör sig om en fungerande lösning.

Du ska inte…

• Du ska inte skapa prototyper av egenskaper eller funktionalitet som inte kan implementeras, vilket ofta är ett problem när det gäller implementeringar av programvarupaket. När du är osäker, bekräfta med utvecklarna innan du börjar.
• Ta inte varje ändring eller begäran som kommer från en prototypgranskning som ett nytt krav. Rapid prototyping hjälper till att fånga upp missade krav, men dessa nya krav bör utvärderas noggrant. Vissa kan implementeras, medan andra skjuts till en framtida version.
• Börja inte prototypgranskningsmöten utan tydliga riktlinjer för återkoppling. Var mycket specifik när det gäller vilken typ av återkoppling du vill ha. (Är stegen logiskt ordnade? Är navigeringen tydlig och intuitiv?) Om inte, var beredd på: ”Jag gillar inte det blåa i rubriken” eller ”Kan vi inte använda det här typsnittet i stället?” eller ”Kan du göra det här större, djärvare, med rött och blinkande?”
• Var inte perfektionist. I de flesta fall behöver snabba prototyper inte vara 100 % perfekta, bara tillräckligt bra för att ge alla en gemensam förståelse.
• Förstör inte allt med prototyper. För det mesta ska du inte behöva göra det.

Framtida resurser

• Om du behöver en knuff för att börja skissa kan du prova Dan Roams bok The Back of the Napkin.
• Lär dig mer om pappersprototypering i Carolyn Snyders bok Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, en teknik för att utforska och förfina koncept.
• Behöver du innehåll med låg trovärdighet? Generera Lorem Ipsum-text för din prototyp.
• Vill du få din pappersskiss att se högkvalitativ ut? Prova de här stencilerna för webb, iPad och iPhone.
• Skiss- och prototypverktyg för iPhone-appar
• Enkla skisser och prototyper i Firefox med tillägget Pencil.
• Gratis utskrivbara PDF-mallar för skissning, wireframing och anteckningar
• 50 kostnadsfria kit för wireframing av användargränssnitt och webbdesign, resurser och källfiler

(al)