En begyndervejledning til hurtig prototyping

Alt hvad du behøver at vide om hurtig prototyping på 7 minutter (eller mindre)

Processen med at gå fra en idé til et produkt er en rodet proces. At lære at prototype din idé, få feedback og gentage den er den mest kritiske færdighed, som enhver, der ønsker at opbygge deres egne produkter, skal have. Dette er også en af ​​de mest betydningsfulde dele af en UX Designer's job.

Prototyper findes i mange former, fra en grov skitse på papir til en interaktiv simulation, der ligner det endelige produkt. Denne guide er til komplette begyndere, der ønsker at forstå, hvad prototyping handler om.

Vi dækker betydningen af ​​et par udtryk relateret til hurtig prototyping samt følgende:

Hvad er hurtig prototyping?

Hurtig prototyping er en iterativ proces, der bruges til at visualisere, hvordan et websted eller en applikation vil se ud for at få feedback og validering fra brugere, interessenter, udviklere og designere.

Når det bruges godt, forbedrer hurtig prototyping kvaliteten på dine designs ved at forbedre kommunikationen mellem de forskellige parter og reducere risikoen for at opbygge noget, som ingen ønsker.

Hvad har du brug for for at prototype?

En prototype er ikke designet til at være en fuldt funktionel version af et system, men er kun beregnet til at hjælpe med at visualisere brugeroplevelsen af ​​det endelige produkt. Som Google Ventures designpartner Daniel Burka siger:

Den ideelle prototype skal være "Goldilocks-kvalitet." Hvis kvaliteten er for lav, vil folk ikke tro, at prototypen er et ægte produkt. Hvis kvaliteten er for høj, arbejder du hele natten, og du slutter ikke. Du har brug for Goldilocks-kvalitet. Ikke for højt, ikke for lavt, men lige rigtigt.

Du kan ikke bare prototype skærmbilleder, apps eller websteder, men næsten hvad som helst. Prototyping er en glimrende metode til at teste følgende (eksempler leveret):

  • Nye funktioner: Prototype Instagram Stories i Instagram-appen (før de blev lanceret)
  • Ændringer i en workflow: Prototype Medium's nye publiceringsflow efter introduktionen af ​​betalte medlemskaber
  • Ny teknologi: Prototype på en selvkørende bilrejse!
  • Ny grænseflade: Prototype Apple Watch-grænseflade (da den første gang blev lanceret)

Så nu forstår du, hvad hurtig prototyping er til. Men hvordan gør man det? Vi dækker det næste.

Den hurtige prototypeproces

Hurtig prototyping involverer en tretrins proces, gentaget så mange gange som nødvendigt:

  1. Prototype: Opret en visuel mock-up af din løsning eller interface.
  2. Gennemgang: Del prototypen med brugerne og vurder, om den opfylder deres behov og forventninger.
  3. Forbedr: Baseret på denne feedback, identificer områder, der skal forbedres eller afklares.

En prototype starter normalt med en meget simpel mock-up af nøgleområder og bliver mere kompleks med hver iteration, når du indsamler flere data fra brugerfeedback.

Hvor meget skal du medtage i din prototype?

Fokuser på de kritiske funktioner, der ofte bruges. Pointen med hurtig prototyping er at vise, hvordan en funktion vil fungere, eller hvordan designet vil se ud uden at prototype hele produktet i detaljer. Husk, vi sigter mod Goldilocks-kvaliteten !

Prototype en brugerstrøm ad gangen. I stedet for at gå skærm for skærm, skal du basere din prototype på en historie, der fører brugeren gennem de områder, du vil prototype. På denne måde får du mere præcis feedback, fordi din prototype afspejler virkelige livsscenarier. For eksempel flyder prototypen "tilmeldings / login / nulstillingsadgangskode" sammen.

Husk også at have en iterationsplan i tankerne. En god tommelfingerregel ved planlægning af iterationer er at starte bredt og derefter arbejde dig hen imod en mere detaljeret version af løsningen. Når du gentager, vil troværdigheden af dine prototyper såvel som hvor meget du inkluderer i dem stige.

Men vent, hvad er denne troskab?

Hvad menes med troskab af en prototype?

Fidelity refererer til, hvor tæt en prototype matcher det endelige produkt eller den endelige opløsning. Du kan vælge mellem mange forskellige muligheder og nøjagtighedsniveauer, afhængigt af procesfasen og prototypens mål.

Visual (skitseret vs. stylet)

Layout og design er de mest bemærkelsesværdige aspekter af en prototypes troskab. Hvis en prototype er produceret med et højt niveau af visuel troskab fra starten, vil brugerne have tendens til at fokusere på visuelle snarere end funktionelle detaljer, som ville distrahere fra det primære mål for de tidlige stadier af prototyping.

Funktionel (statisk vs. interaktiv)

Skal prototypen være statisk, eller skal den se fuldt funktionel ud (interaktiv)? Begge versioner har fordele og ulemper: statiske prototyper er enklere og hurtigere at implementere, mens interaktive dem kan bruges senere til brugervenlighedstest og brugeruddannelse.

Indhold (Lorem ipsum vs. ægte indhold)

I de tidlige stadier af prototyping kan standard "lorem ipsum" -indhold være nyttigt for at undgå at distrahere brugeren, så de kan fokusere på at give funktionel feedback i stedet for at kommentere ændringer i teksten.

Når prototypeprocessen fortsætter, skal du dog vurdere behovet for at erstatte dummy-tekst med ægte indhold, så brugerne kan få en fornemmelse for, hvordan det påvirker det overordnede design.

Brug af ægte etiketter er også en glimrende mulighed for at teste, om din “kopi” fungerer godt eller ej. "Kopi" er bare et smukt udtryk for tekstetiketter og information, du ser på skærmen, som at kalde "Publicer" -knappen "Publish", "Post", "Send", "Done" eller noget andet.

Hvilke troværdighedsniveauer findes?

  • Low-Fidelity: Low-Fi-metoder som blyant-og-papir- skitser producerer statiske prototyper med lav visuel og indholdsfrihed, der giver mulighed for hurtige og lette ændringer. Dette tvinger brugeren til at fokusere på funktionalitet og på hvordan de vil bruge systemet i stedet for hvordan det ser ud.
  • Medium-Fidelity: Computerbaserede værktøjer som Visio producerer det, vi kan kalde medium-fidelity-prototyper i form af trådrammer og arbejdsgange . Dette niveau af troskab bruges til at demonstrere et systems adfærd, til at bestemme, om brugernes behov bliver opfyldt, og til at evaluere brugeroplevelsen.
  • High-Fidelity: High-fidelity-prototyper kan undertiden være så realistiske, at de ofte forveksles med det rigtige produkt. De er også meget mere tidskrævende at producere. Værktøjer som InVision, Sketch, Figma, Adobe XD, Framer og så videre tillader ikke-tekniske brugere at oprette high-fidelity-prototyper. Selvom disse ikke kan konverteres til brugbar kode, kan de være meget nyttige senere til brugervenlighedstest eller brugeruddannelsesformål.

Hvordan vælger du hvilket troværdighedsniveau du vil prototype på?

Det meste af tiden evalueres design bedst ved at starte med en grov skitse og derefter gå videre til højere troværdighedsniveauer afhængigt af systemets kompleksitet og krav.

Nogle gange kan dit valg styres af kundens krav eller fokusområder. For eksempel, hvis du vil evaluere den visuelle effekt af en grænsefladesændring, vil du måske gå med et stylet design i stedet for en grov skitse. Eller hvis din løsning er beskedfokuseret, kan du beslutte at bruge ægte indhold i stedet for standard ”lorem ipsum” pladsholdertekst.

Hvordan vælger du et prototypeværktøj?

Der er en bred vifte af værktøjer til rådighed til prototyping afhængigt af dine behov og tilgang. Før du vælger et værktøj, er der et par spørgsmål at stille:

  • Hvor lang tid ville det tage at lære at bruge værktøjet?
  • Er det støtter prototyper til brug for mit produkt (web, software-applikationer, mobile apps, nogle nye teknologi, og så videre)?
  • Tillader værktøjet mig at dele mine prototyper med andre og indsamle deres feedback?
  • Hvor let er det at foretage ændringer i prototypen?
  • Kan jeg bruge foruddefinerede skabeloner og stencils med dette værktøj?

Prototyping af bedste praksis: gør og ikke-gør

Gør:

  • Arbejd med brugere og interessenter for at få mest mulig feedback og engagere dem i ejerskabet af det endelige produkt
  • Sæt forventningerne tidligt ved at sikre, at brugerne og interessenterne ved, at prototyper er en måde at få svar på specifikke spørgsmål og ikke repræsenterer det færdige produkt.
  • Gør din high-fidelity realistisk (inklusive reaktionsforsinkelser), så brugere og interessenter ikke skuffes, når de sammenligner det med det endelige produkt.
  • Gem skabeloner og stencils til genbrug på fremtidige projekter.

Don'ts:

  • Prototype ikke funktioner, der ikke findes i det endelige produkt
  • Vær ikke en perfektionist. God nok er din ven. Målet med hurtig prototyping er at give alle en fælles grund.
  • Prototype ikke alt!

Hvis du undrer dig over, hvordan du skal gå til at teste dine prototyper, skal du læse mit indlæg om Usability Testing her:

Den velbevarede hemmelighed bag den store UX: Usability Testing

Uanset om du kun har en prototype eller et fuldgyldigt produkt, er det en rigtig god idé at køre månedlige brugertest medium.freecodecamp.org

Tak, fordi du læste denne hurtige guide. Dette blev oprindeligt udgivet som en del af UX-designkurset på Commonlounge, en platform, der har kurser med små bittesmå lektioner som disse om emner der spænder fra Django til Machine Learning, der giver mest værdi for den tid, du lægger i.

Du lærer ved at arbejde på virkelige projekter og få feedback fra branchens mentorer. Du burde tjekke det her!