Hur och varför prototyper är obligatoriska för bra design

Ingenting ger dig närmare slutproduktens funktionalitet än prototyper. Medan wireframes skissar ut ritningen och mockups visar känslan och strukturen i designen, är det prototypen som ger livet upplevelsen? bakom? användarupplevelse.? Den vackra call-till-action kan se bra ut på skärmen, men du vet inte om det fungerar på slutanvändare till den klickbara prototypen. Inte bara gör prototyperna ett bevis på konceptet, de visar ännu viktigare användbarhetsbrister bakom trådramar och mockups.

Så hur sätter vi faktiskt i praktiken denna skydd mot brådskande intressentmöten, oändliga revisioner och smärtsamma sena nätter i utvecklingsfasen? Medan vi tidigare berörde rätt prototyper i guiden till UX Design Process & Documentation, låt oss dyka djupare in hur prototyper kan göra eller bryta produktens framgång. I det här stycket börjar vi med att titta på de mest övertygande skälen att prototyper och hur prototyper förbättrar samarbete, design och användbarhetstestning.

Källa: Bill Buxton, via Donna Lichaw

5 skäl till varför du behöver prototypa

Medan hoppa över prototyper kan spara lite tid under design, kan det överskottet gå förlorat många gånger över i utvecklingen. Om folk försöker på jeans innan de köper dem och provkör bilar innan de signerar kontrollen, är det bara meningsfullt att testa dina mönster interaktivt innan de går in i utvecklingen. Samspelet är trots allt hur användarna får tillgång till designlösningarna för sina problem.

Källa: Produktledning Tree Swing

För att bättre förstå varför du borde prototyper, låt oss titta på Todd Zaki Warfel, designern som skrev boken om prototypning? bokstavligen. Warfel sammanfattar hans bokpoäng i en bildspelshow, där vi kan se alla relevanta skäl för att omfamna prototyper. Även om dessa varierar beroende på designers och deras behov, inkluderar några universella fördelar:

  • Kommunikation och samarbete - Det är en sak att diskutera kravdokumentation, men det är en helt annan nivå av fantasifullt samarbete när båda parter kan spela med en prototyp och utforska begränsningar och möjligheter. Dokumentation kan misstolkas, men erfarenheter delas.
  • Mätbarhet vid minskning av avfall - Wireframes, mockups och krav dokument lever i papper, inte verklighet. Prototypning tillåter team att experimentera, vilket ger dem friheten att misslyckas billigt medan de lär sig mer. Ta en titt på hur prototyper bidrog till att öka uppskattningsnoggrannheten med 50% samtidigt som begäran om förtydligande minskades med 80%.
  • Sälj din idé - Prototyper kan vara bra för pitching om du arbetar med skeptiska kunder. Uppleva den verkliga webbplatsen eller appen visar din vision mer än en ordlig beskrivning eller mockup försvagad med anteckningar.
  • Testa användbarheten tidigare - Genom att användarprovning en prototyp kan du hitta problem och fixa dem tidigare i processen, vilket sparar dig ett enormt problem att hantera dem när de är cementerade i kod. Samma fallstudie som nämnts ovan såg 25% minskning av buggar efter utlösning tack vare prototypning.
  • Ange dina designprioriteringar - Vi rekommenderar prototyper tidigt och ofta eftersom prioritering av interaktionsdesign kommer att hålla dig jordad i verkligheten när du gör statiska designbeslut. Visuella måste uppfylla upplevelsen, inte tvärtom.

Inte alla prototyper behöver vara utarbetade och konsumera - i själva verket tror vissa tankegångar på en snabb, låginvesteringsform av prototyper. Poängen är att det nästan alltid är fördelaktigt att ägna några resurser till prototyper, hur många beror på dina specifika behov.

Hur prototyper förbättrar samarbete och kommunikation

Att visa är alltid bättre än att berätta, och erfarenhet är kung. Om människor kan interagera med dina idéer kan de bättre förstå dem. Det fungerar både externt - pitching till kunder och intressenter - och internt - samarbetar djupare med ditt team eller samlar dem för att stödja en ny idé (eller åtminstone spela med den först innan den axes).

Prototyper klargör intern kommunikation på några sätt.

För det första skapar det en koppling mellan designers och utvecklare tidigare, vilket ger både samma mål att arbeta mot. Som diskuteras i Handboken till prototyper använder olika avdelningar olika lingo och jargong, men en prototyp splittrar alla hinder. Prototyper är leksaker av design, och när något är roligt, är folk mer angelägna om att släppa ned deras vakt och börja utforska de galna idéer som bara kan fungera. Som grundare och vd för Emmet Labs, David Yerba, sätter det, prototyper? Får rätt personer i rummet att kommunicera på rätt sätt.?

I UXPin är samarbete på prototyper naturligt tack vare live presentation och samarbetsfunktioner. Med iterationsspårning och live kommentarer kan trådramar och prototyper diskuteras och presenteras i realtid utan att behöva mail.

För det andra, i samma artikel beskriver Yerba också fördelarna med prototyper för formella presentationer. Kunder och intressenter kan enkelt feltolka en beskrivning, även om de levereras med viss övertygande forskning eller pixel-perfekt mockups. En interaktiv prototyp kräver å andra sidan liten beskrivning. Prototyper hjälper intressenterna att tänka på erfarenheten, i stället för att falla på kryckan av att kritisera visuella element bara för att de är precis framför ögonen. På en sidoanteckning lägger prototyper också till känsla för presentationer - människor kan bokstavligen uppleva "magiken" av design: det är skillnaden mellan att se ritningen kontra utforska modellhuset.

En prototyp är ett kraftfullt vapen att ta med till en presentation.David och Tom Kelley, grundare och partner vid IDEO, tillskriva vad de kallar? Boyle's Law? (uppkallad efter en av IDEO: s huvudprototyper, Dennis Boyle). Boyle's Law är enkel men effektiv: Gå aldrig till ett möte utan prototyp. Vad gäller dess kommunikativa och övertygande förmågor gör detta presentationshjälp ofta skillnaden mellan ett? Ja? eller ett? nej?

Hur prototyper lägger till balans i design

Prototypning är den fas i vilken begreppsmässigt blir verkligt, så det kräver både kreativitet med praktiska, rationella med intuition.

Källa: Användarflöde för sökfunktionen på Kickstarter

Philip van Allen, professor och designer på Konstcentrum Design College, anser att prototyper bidrar till att fatta beslut som inte kan beskrivas av parametrar. För formgivaren finns det tre huvudsakliga fördelar med prototyper:

  • Beslutsfattande - Viktiga designalternativ avseende ergonomi, form, funktion, produktion - ibland allt på en gång - slutförs i prototypfasen. En fungerande prototyp ger dig omedelbar feedback så att du kan göra ett utbildat beslut (inte bara en heuristisk).
  • Fokus - Med konkret återkoppling för alla sinnen (istället för att bara gissa? Vad den slutliga produkten kommer att bli), prototyper markerade dig i användarverkligheten. UX-prioriteringar blir tydliga när du kan uppleva dem precis framför dig.
  • parallel~~POS=TRUNC - Designprocessen behöver inte vara sekventiell. Samla feedback, inställningskrav och brainstorming nya koncept och interaktioner kan alla hända samtidigt som prototyper, och när de är färdiga kompletterar varandra varandra (vi diskuterar processerna i detalj senare i denna e-bok).

Hur vet vi det här? När vi arbetade för att förbättra Yelp-webbplatsen, byggde vi först en lo-fi och sedan en hi-fi-prototyp. Ursprungligen var interaktiviteten enkel, men vid konstruktionen konfronterades vi med beslut och hinder som inte skulle ligga i en statisk design. Genom prototyper identifierade och löste vi UX-problem som hur man övergår från hemsidan till sökresultaten utan att plötsligt överväldiga användaren med för mycket information.

Lång historia kort, prototypfasen var när vi kunde sammanfoga våra konceptuella mål med vår praktiska verklighet. Det var när visuell design och interaktionsdesign kom i balans.

Hur prototyper gör användbarhetsprovning enklare

Anledningen till att vi delar upp uppgifterna i wireframes, mockups och prototyper är att varje har ett annat syfte.

Genom att bara fokusera på strukturering i trådframställning kan vi till exempel skapa en solid struktur utan att distrahera oss just nu med mockup-visuella eller prototypfunktioner. Medan wireframing och mockups lutar mer mot kreativ och abstrakt, handlar prototyper om att knockla ner och få idéer till liv - och det kräver att användbarhetsprovning ska bli rätt.

Källa: Användbarhetstestning för prototyper

För att göra en analogi är prototyper till slutprodukten vilka skisser är till wireframes / mockups. Prototypning är ett sätt att? Skissera med interaktioner? för att skapa en grov modell av användbarhet, sedan förfina och perfekt.

För detta är användbarhetsprovning avgörande. Som vi rekommenderar i guiden till prototypning, försök att köra användbarhetstest på varje steg i prototypen så att dess trovärdighet och funktionalitet rör sig i rätt riktning. Medan användbarhetstestning är ett tätt ämne helt eget (täckt i en annan e-bok), här är några grundläggande saker att tänka på:

  • Känn produkten - Känn din produkt bra och vad du vill testa innan du börjar. Om du går in i användbarhetstestning med en produkt som uppträder orättvist, eller om du inte är säker på vad som behöver testas, blir resultaten ogiltiga.
  • Rekrytera rätt provtagare - Chansen är att din produkt riktar sig till en målgrupp, så se till att dina testtagare representerar den gruppen. Kvalitativa tester kan köras med så få som 5 personer, kvantitativa tester kräver minst 20 personer för statistisk signifikans. För en fullständig lista över användarrekryteringstips, kolla in Jakob Nielsens lista med 234 tips och tricks för att rekrytera människor för användbarhetsprov.
  • Ställ in rätt test - Det finns många olika typer av användbarhetsprov och många olika sätt att utföra dem. Välj den som matchar din budget, timing och projektbehov.
  • Analysera resultat - Det här är när användbarhetsdata blir till designinsikt. Inkorporera dina fynd i dina iterationer så snart som möjligt.

Källa: Varför behöver du bara testa med 5 användare

För mer information om vilka typer av användbarhetstest som skulle fungera för dig och hur man utför dem, ladda ner gratis ebook Guide till användbarhetstestning.

Varför Prototyping är obligatorisk för mobil

Medan prototyper för stationära produkter endast rekommenderas, är det obligatoriskt för mobilen. Mobila enheter används i fler miljöer än stationära enheter, vilket leder till långt fler användarscenarier och användning av fall. Vad det här betyder är självklart att medan du kanske kan komma undan med inte prototyper på skrivbordet, har du ingen sådan tur med mobilen.

Rachel Hinman, Nokia Research Centers Senior UX Researcher, håller med om att behovet av mobila prototyper överväger det redan viktiga behovet inom skrivbordsfältet. Titta på tabellen nedan, baserat på Hinmans bildspel, för att se en jämförelse mellan stabiliteten hos de två:

Donna Lichaw, produktspecialist hos Greatnorthelectric, håller också med och jämför allmänna skäl till prototyp jämfört med mobilspecifika skäl. Gester lägger till en helt ny dimension av interaktivitet som inte ens finns för skrivbordet, så prototypning är det enda sättet att testa de oändliga kombinationerna av gester och animeringar.

Vi har funnit följande för att vara de mest övertygande skälen till mobil prototyper:

  • Flöde gör eller bryter mobilupplevelsen - Eftersom mobila upplevelser spänner över flera sidor bör användarflödet vara framför och centrerat på listan över designprioriteringar. Besök bara UXArchive för att se hur några av de bästa företagen som Snapchat, Google Maps och andra arkitektar deras mobilflöden.
  • Animationer gör upplevelsen rolig och önskvärd - Animationer är kärnelementet i mobila mikro-interaktioner, med gest-utlösande effekter som timing, hastighet och spontanitet som lägger till ett element av roligt samtidigt som visuell feedback och rådgivning ges. Kolla in det här stycket för att se de kontrasterande vyerna på animationer från Google Material Design och Apple iOS, och se 20 exempel på de här bästa metoderna.
  • UX-misstag är dyrare - Mobilappskostnaderna varierar från 6 000 USD till upp till 200 000 USD, med en genomsnittlig kostnad som överstiger 6 400 USD. Att hantera App Store kan också vara en huvudvärk, så vissa prototyper kan göra långa sätt att spara tid, pengar och sanity.

UXPin möjliggör responsiva animerade prototyper och inbyggd användbarhetstestning. Skapa dina uppgifter, följ sedan användarens skärm och ansiktsreaktioner när de interagerar med din design. Efter varje test kan du skapa ett videoklipp som fångar varje ord, reaktion och klick.

Hämtmat

Vi prototyp alltid, och råder andra att göra detsamma. Medan vi förstår att vissa begränsningar kan göra prototyper hårdare för vissa företag, rekommenderar vi starkt att det fungerar, även om det bara är en begränsad prototyp. Fördelarna är mycket större än kostnaderna: bättre samarbete mellan teamet, att hitta / fixa problem tidigt, förbättra befintliga mönster och kommunicera genom åtgärder snarare än ord. Dessa fördelar är väl värda extra tid och ansträngning.

För mer praktiska råd om prototyper med låg eller hög fidelity, ladda ner den gratis guiden till prototyper. Lär dig hur och när du ska använda olika prototyper verktyg och taktik, med bästa praxis från Zurb, Google Ventures, IDEO och många fler. Tips ingår också från experter som Jeff Gothelf, Todd Zaki Warfel och andra.