Tot ce ai vrut să știi despre prototipuri (dar ți-a fost teamă să întrebi)

Publicat: 2022-03-10
Rezumat rapid ↬ Integrarea profundă a prototipurilor în procesul dvs. creativ poate fi transformatoare. Poate crea o cultură de echipă mai pozitivă și mai îmbogățită. Jamie ne împărtășește experiențele și sfaturile sale cu privire la modul în care prototipul vă poate ajuta să lucrați la o varietate mai mare de proiecte mult mai rapid.

Prototipurile sunt cadrul meu pentru a învăța noi instrumente, platforme și tehnici. Un prototip funcționează ca o dovadă solidă că o idee va funcționa sau nu. Este esențial pentru întregul meu proces creativ și este mijlocul pe care îl folosesc pentru a mă raporta la oamenii și afacerile cu care colaborez.

Sunt îndrăzneață în privința prototipurilor pentru că cred că pot face minuni , dar cred că nu înțeleg că sunt datorate. Prototiparea nu este, de obicei, încorporată în cronologia proiectului sau, dacă este, de obicei ca un livrabil tangențial la un proiect mai mare. Poate fi mai mult dacă vrei să fie!

Vreau să te conving să construiești prototipul mai profund în fluxul tău de lucru. Acest mod de abordare a proiectelor ar putea schimba modul în care colaborați, învățați și creșteți ca persoană creativă. Iată afacerea: voi încerca să obțin o definiție bună pe hârtie și apoi voi cerceta cum puteți face ca prototipurile să fie la fel de importantă pentru practica dvs., precum este pentru mine . Și pentru a îndulci vasul, voi oferi câteva prototipuri pe care le-am creat pentru un joc pe care l-am creat, Melody Jams, care a fost prezentat de Apple în 130 de țări și a fost aplicația numărul unu pentru copii din magazin pentru o scurtă perioadă.

Ce este un prototip?

Definiția clasică a unui prototip este că este o demonstrație la scară a unui lucru la scară largă pe care doriți să îl faceți. Un prototip poate fi construit sau proiectat parțial pentru a prezenta o anumită caracteristică a unui sistem mai mare. Aceasta este o definiție destul de bună, dar îmi place să mă gândesc la prototipuri ca la ceva și mai larg. Definiția mea a unui prototip? Este un artefact tangibil care explorează o idee .

Mai multe după săritură! Continuați să citiți mai jos ↓

Ar putea fi la fel de simplu ca niște schițe brute desenate pe hârtie. Poate că este conceput pur, ca o prezentare animată a modului în care funcționează o interfață în After Effects. Poate că este un demo brut aruncat pe Codepen. Sau ar putea fi ceva mult mai mare în fidelitate. Când cineva vede un prototip, nu ar trebui să existe nicio ambiguitate în răspunsul său. Cu alte cuvinte, dacă persoana ar întreba „Dacă aplicația ar fi albastră?”, atunci acesta nu este un prototip. Dacă arătați cum ar arăta aplicația dacă ar fi albastră, atunci este.

Există, de asemenea, diferite tipuri de prototipuri, fiecare cu un scop diferit: intern, extern și public .

Prototip intern

Un prototip intern nu transmite neapărat valoare imediată nimănui din afara mea sau a echipei mele. Poate fi la fel de dur și rapid pe cât vreau să o fac. În lumea site-urilor web, aș putea construi o componentă simplă folosind vanilla CSS, HTML și JavaScript, React, Angular sau Vue, doar pentru a înțelege cum funcționează și pentru a cântări argumentele pro și contra. Aceste tipuri de prototipuri tind să apară foarte devreme în procesul meu - de fapt, în prima zi a începerii unui proiect. Cu aceste prototipuri, nu trebuie să-mi fie teamă că cineva nu va „prinde” sau că va provoca mai mult rău decât bine. Pot alege să arăt prototipuri interne unui client sau unei părți interesate pentru a consolida valoarea procesului de prototipare la discreția mea, dar acesta nu este încă ideea – acum vreau să arăt idei rapid, rapid, rapid.

Un prototip intern testează rapid o idee și este de obicei pentru uz intern.
Acest prototip arată când un cerc este tras aproape de un alt cerc pe iOS. Acesta a fost un prototip timpuriu pentru Melody Jams, împărtășit cu echipa internă pentru a arăta progresul dezvoltării. (Vezi versiunea mare)

Prototip extern

Un prototip extern justifică direcția în care încercați să mergeți, pentru a arăta progresul sau pentru a demonstra cum funcționează ceva. Când un client are nevoie de un instrument de administrare, aș putea crea un blog rapid în Craft, WordPress și Contentful (da, toate trei!) pentru a-i oferi o idee despre cum funcționează fiecare instrument, astfel încât să poată lua o decizie mai informată despre ceea ce este cel mai bun pentru ei. Aceste prototipuri sunt grozave în etapele mijlocii și ulterioare ale unui proiect. Îmi amintesc un proiect în care un client avea în vedere o modificare pentru a include API-ul unui nou furnizor de servicii. Combinarea unui prototip a demonstrat clientului ce ar putea face furnizorul, cât de repede l-am putea integra și care ar fi impactul asupra restului proiectului.

Un prototip extern justifică direcția în care doriți să mergeți.
Această aplicație rapidă pentru iPhone care arată modul în care Contentful încarcă conținutul este un exemplu excelent de prototip extern. Un prototip ca acesta ar putea fi folosit simultan pentru a evalua un CMS și pentru a demonstra dacă ar fi viabil să fie utilizat pentru a alimenta o aplicație pentru iPhone. (Vezi versiunea mare)

Prototip public

Un prototip public este acolo în întreaga lume. Este vorba, practic, de trimiterea procesului de proiectare real în sălbăticie, de a afla ce fac utilizatorii și de a repeta de acolo. Ar putea fi un produs pilot cu drepturi depline sau ceva accesibil unui mic subset de utilizatori. Este cel mai rafinat tip de prototip și se apropie cel mai mult de acea definiție tradițională la care m-am referit mai devreme. Tinde să se încadreze într-un proiect mai mare, ca parte a unei faze de testare de o anumită natură.

Prototipurile publice sunt disponibile în întreaga lume.
Clienții și clienții pot face cu ușurință clic pe acest prototip public InVision și pot oferi feedback despre acesta. (Vezi versiunea mare)

Sunt prototipurile rapide prototipuri bune?

Răspunsul scurt este da. Prototipați rapid și cât mai curând posibil într-un proiect. Pentru a-ți da o idee de ce, hai să încercăm un exercițiu.

Imaginează-ți în minte cum arată un scaun. Ai o idee bună despre asta? A fost acest scaun?

Un scaun.
Un scaun (Vezi versiunea mare)

Probabil că nu, nu? Poate te-ai fi gândit la un scaun de exterior, un fotoliu, un scaun de birou sau un taburet. Poate că nici nu te-ai gândit la un scaun fotorealist! Acum că aveți o poză cu acest scaun, nu există nicio ambiguitate. Acesta este scaunul despre care vorbesc și, de acum înainte, știm cu toții asta. Acum avem un cadru comun de referință.

Când clientul tău spune „Am nevoie ca site-ul meu să se simtă modern”, de unde știi ce înseamnă asta? Fără un artefact tangibil, cum ar fi un moodboard, toată lumea va avea o definiție diferită a „modernului” în minte, la fel ca în cazul scaunului de deasupra. Problema nu este specifică designului. Este vorba despre modul în care funcționează un flux de conectare sau despre alegerea dintre mediile de găzduire. A face lucrurile rapid forțează conversațiile și reacțiile. Toate lucrurile nebuloase se descoperă mai repede.

Important este că prototipul nu trebuie să rezolve problema pe care vă așteptați să o rezolve . Simpla creare și partajare a acestuia va debloca uneori idei, inspirație, provocări sau preocupări de care oamenii nu erau conștienți. Cu cât prototipați mai rapid și mai des, cu atât mai devreme vor apărea toate acele lucruri bune.

Aceasta este cheia. Prototiparea vă deblochează capacitatea de a experimenta, eșua, învăța și crește într-un sandbox. Te îmbunătățești simultan și pe tine și pe produsul la care lucrezi.

Cine ar trebui să prototipeze?

Toata lumea! Prototiparea este o oportunitate de a sparge zidurile dintre discipline. Designerii ar trebui să prototipeze astfel încât să poată învăța limitările, complexitățile și posibilitățile proiectului. Codificatorii pot prototipa pentru a testa fezabilitatea, desigur, dar și pentru a se implica mai mult în procesul creativ. Se pot implica manageri de proiect, producatori, copywriteri, oricine are o idee.

Din nou, prototiparea nu este neapărat despre codificarea ceva nebunesc - sau chiar codificarea deloc! Este vorba despre generarea și testarea ideilor cu lucruri reale cu care să te joci și să le explorezi.

Deoarece prototiparea poate fi atât de simplă sau complexă pe cât doriți să fie, veți obține o mulțime de valoare din adoptarea acesteia ca parte a practicii dumneavoastră. Să trecem prin câteva dintre beneficii.

Zgârie o mâncărime creativă

Uneori vrei doar să încerci să construiești ceva ce nu ai mai văzut până acum sau să emulezi ceva ce crezi că este cool. Ar putea fi o idee obosită sau următoarea tendință a UI – cine știe? Cel puțin, a afla cum funcționează lucrurile este una dintre cele mai satisfăcătoare părți ale unui designer, iar prototiparea oferă un teren fertil.

Adaugă loc pentru curaj și idei radicale

Este greu să încerci simultan să trimiți ceva ce utilizatorii vor înțelege și vor fi inventivi. Chiar dacă doar începeți un proiect cu „săptămâna de prototipare”, aceasta este o săptămână în care cerul este limita.

Crește expertiza în materie

Fiecare magazin de dezvoltare pe care îl cunosc pare să aibă o experiență profundă într-o singură platformă și își dorește în secret să lucreze dincolo de ea (sunt sigur că este același lucru pentru designeri). Construiți totul în PHP și doriți să intrați în Rails? Construiți câteva prototipuri în timp ce începeți un proiect, chiar dacă acestea sunt irelevante pentru obiectivul de afaceri.

Atenuează riscul

E înfricoșător să faci ceva ce nu ai mai făcut până acum. Înțelegerea în mod aproximativ și rapid înlătură barierele psihologice. Dintr-o dată, imposibilul durează doar o zi sau două.

Construiește un catalog de idei

Pe măsură ce biblioteca dvs. de prototipuri crește de la proiect la proiect, ideile sunt revizuite. Uneori, gunoiul dintr-un proiect devine o comoară pentru următorul.

Dă putere pe toată lumea

Când abia începi să-ți dai seama, titlurile, anii de experiență și seturile de abilități nu ar trebui să conteze. Ideile bune pot veni de la oricine, dar acest lucru este greu de făcut atunci când creativul senior vine de sus pentru a dirija gândirea. Începând cu un proces pur de creație, se topește titlurile și se ridică idei bune de jos.

Îți personalizează procesul

Am lucrat cu o serie de designeri și agenții și un lucru de care par în mod constant uimiți este cât de repede încep să lucrez. Nu aștept ca cerințele să fie completate, direcția artistică să fie aprobată sau orice altceva. Lovind terenul, pot avansa proiectul mult mai repede.

Cum să începeți

Modul greșit de a prototipuri este să vă faceți griji că faceți prototipuri în mod greșit. După cum spunea Bruce Lee, „Străduiește-te să nu te străduiești”. Având în vedere acest lucru, iată câteva îndrumări care vă vor ajuta să promovați o practică rapidă de prototipare.

Scrieți enunțuri de problemă

Având în vedere lucrul pe care încerci să-l înveți sau să rezolvi, descompuneți-l în unități atomice și tratați-le pe fiecare ca pe prototipuri distincte. „Cum încarc o hartă în iOS?” „Cum poziționez harta într-o anumită locație?” „Cum desenez o formă pe hartă?” „Cum plasez un indicator pe hartă?” Patru afirmații, patru prototipuri, patru lucruri învățate rapid.

Începe cu ceva ce știi cum să faci

Ca și întinderea înainte de antrenament, nu poți intra într-un ritm pornind cu viteză maximă. Dacă ești un programator care creează prototipuri pentru un site web, poate vrei să începi prin a-ți construi propriul boilerplate: un fișier HTML static, o configurație Gulp, așa ceva. Acest lucru vă va face să curgă sucuri creative, astfel încât până când vă aflați pe un teritoriu neexplorat, mojo-ul dvs. este deja funcțional.

Construiește Ugly

Folosiți Comics Sans MS și verde lime strălucitor pentru fonturile dvs. Nu vă numiți straturile. Încalcă toate regulile. Acum nu este momentul pentru perfecțiunea pixelilor; este momentul să punem ideile jos pe hârtie.

Păstrați prototipurile inițiale la maximum 60 de minute

Prototiparea și complexitatea sunt dușmani de moarte. Când o faci corect, ar trebui să poți produce cel puțin patru prototipuri până la sfârșitul primei zile de proiect.

Prioritizează prin sentiment, nu prin urgență

Ce ai chef să faci azi? Nu are nimic de-a face cu proiectul? Nu te lupta. Fă-o. Cine știe? Poate că are valoare încă nedescoperită!

Furculiţă

Nu suprascrie niciodată un prototip. În schimb, faceți o copie și repetați de acolo. În acest fel, prototipurile dvs. vor fi întotdeauna cele mai simple, vor putea fi bifurcate în direcții diferite și vor fi ușor de învățat.

Overshare

Arată tuturor ce faci! Fii mândru de asta! Energia pozitivă pe care o construiți în jurul practicii va alimenta întregul ciclu de viață al proiectului. Numai acest pas poate îmbunătăți în mod dramatic cultura unui proiect.

Documentați ceea ce prototipați și rezultatele

Acest lucru ar putea fi la fel de simplu ca un fișier README într-un director sau un mesaj pe Slack. Întoarce-te întotdeauna să înveți din ceea ce ai făcut.

Notează-ți temerile pe măsură ce mergi și transformă-le în declarații de problemă

Deci, tocmai ați împins primul dvs. site web la Heroku, dar vă faceți griji cum să configurați un certificat SSL? Nici o problema. Puneți-l în coadă pentru prototipare mai târziu.

Declarațiile de problemă care descriu o versiune de bază three.js sunt afișate aici în formatul unui card Trello.
Declarațiile de problemă care descriu o versiune de bază three.js sunt afișate aici în formatul unui card Trello. (Vezi versiunea mare)

Cum să bugetați acest lucru în proiectul dvs

Iată chestia: tu nu. Acesta nu este un fel de upsell. Acesta este modul în care o fac. Acest articol are cuvântul „proces” în titlu pentru un motiv: nu este vorba doar despre cum să creați un prototip. Este un principiu călăuzitor despre cum să construiești lucruri.

Veți începe să creați prototipuri în ziua în care începeți un proiect. Nu te-ai opri până nu mai rămâne nimic de prototipat. Un prototip nu este același cu codul principal sau cu fișierele de proiectare. De la început, prototipurile dvs. ar trebui să fie prea aspre pentru a fi gata de producție. Mai târziu, dacă găsirea unei modalități de tranziție pare că are sens, este în regulă. Este o decizie proiect cu proiect. Prototiparea este întotdeauna o constantă. Când este configurat astfel, nu există un prototip eșuat sau o greșeală.

Când vorbesc cu un potențial client, îi explic că acest proces tinde să genereze mult mai mult output mult mai rapid decât s-ar aștepta de la concurenții mei (citiți: dvs.). Acea ieșire ar putea ajuta la definirea unui API sau la dovedirea fezabilității tehnice sau la verificarea unei sarcini înfricoșătoare. Acolo unde are un impact deosebit este cu designerii și echipele interne de proiectare - le place să lucreze în acest fel, pentru că sunt foarte repede în nebunia cu ei, înțeleg lucruri. Produc lucrări de calitate superioară, mai personalizate, mai puțin predispuse la erori. Deoarece toată lumea se obișnuiește să vadă munca grea, nu există niciun risc ca un prototip care eșuează să alarmeze un client - unele lucruri care nu funcționează sunt doar o parte așteptată a procesului.

De asemenea, mă poziționează bine pe termen lung, pentru că sunt capabil să înțeleg noi tehnologii foarte rapid. Clienții mei știu că pot lua legătura cu mine pentru o instalare, un proiect de calcul fizic, o aplicație sau un site web de orice scară, deoarece știu că abordarea garantează rezultate de succes.

Pentru mine, nu este vorba despre maximizarea profitului. Este vorba despre a-ți câștiga existența făcând ceea ce vreau să-l fac. Nu mi-am propus niciodată să fiu bun la site-uri sau aplicații – de fapt, acele lucruri nu existau când am început! Mi-am propus să învăț lucruri interesante și interesante cu ajutorul codului. Vreau ca cariera mea să fie lungă, împlinitoare și incitantă și mereu plină de lucruri noi de învățat. Un proces condus de prototip este perfect pentru asta.

Instrumente

În zilele noastre, se pare că nu poți rosti cuvântul „prototip” fără să te gândești la InVision – este ca Kleenex-ul prototipului. În cazul în care nu ați mai folosit InVision înainte, este un instrument excelent pentru designeri pentru a face clicuri pe proiecte fără a necesita un codificator. Este adevărata afacere: rapidă, intuitivă și ușor de luat.

Cu Sketch câștigând popularitate pe scară largă, o mulțime de plugin-uri apar pentru a facilita prototipurile care îl folosesc. Framer este un exemplu fantastic; importă fișiere Sketch și, cu puține cunoștințe de codare, puteți crea demonstrații personalizate, cum ar fi animații de atingere. InVision are și un plugin Sketch. Altele, inclusiv Marvel și Craft, merită explorate. Există o mulțime de instrumente de încercat.

Nu trebuie să fii un programator sau chiar să folosești software pentru a face prototipuri. Prototiparea pe hârtie este o modalitate excelentă de a experimenta designul UI fără a avea nevoie de un computer. Puteți și tablă albă. Aceste tehnici funcționează chiar și pentru proiectarea jocurilor.

Nu știi cu ce să începi? Luați în considerare un sprint de prototipare folosind fiecare dintre aceste instrumente!

Înapoi în lumea dezvoltării web și software, un lucru pe care îmi place să îl fac este să înființez un depozit GitHub special pentru prototipuri. Am inclus un fișier README care descrie unele dintre regulile la care țin atunci când creez prototipuri, pe care le poți folosi sau bifurca pentru a încerca.

Studiu de caz: Melody Jams

Acum aproximativ un an, am construit și lansat un joc iOS pentru copii cu niște prieteni, numit Melody Jams (și am scris un articol pentru Smashing Magazine despre asta!). Acel joc a fost codificat ciorbă în nuci în aproximativ trei luni. Au existat câteva provocări: designerul nu a creat niciodată o aplicație până acum, locuia la 3000 de mile distanță de mine și nu ne întâlnisem niciodată. De asemenea, nu codisem o aplicație iOS de un an, așa că cotletele mele se atrofiaseră considerabil.

Prototipurile de animație în curs sunt afișate din Melody Jams.
Prototipurile de animație în curs sunt afișate din Melody Jams. (Vezi versiunea mare)

Jocul implică tragerea monștrilor din partea de jos a ecranului în punctele hotspot desemnate de pe scenă. Numai din acel design, mi-au trecut prin cap o serie de afirmații de problemă:

  • Cum creez o aplicație iOS?
  • Cum creez un joc iOS?
  • Cum creez un lucru în joc?
  • Cum pot atinge chestia aia?
  • Cum trag chestia?
  • Cum am mai multe lucruri care pot fi trase?
  • Cum detectez când un lucru este aproape de altul?

Și așa mai departe. Fiecare dintre acestea a devenit prototipuri individuale la comandă - o aplicație iOS pentru fiecare - până când toate au fost rezolvate. Fiecare a rezolvat o problemă, iar unele au ridicat probleme noi — de exemplu, cum animez un lucru când termin să-l trag?

Am recreat aceste prototipuri în Swift 3, astfel încât să puteți vedea cum ar arăta depozitul de prototipuri dacă ar fi construit astăzi. Un lucru pe care îl veți observa este că documentația despre acestea este destul de ușoară - un fișier README și o captură de ecran sau GIF în fiecare director, dar nu o mulțime de documentație detaliată. Dacă vă ajută să imprimați comentariile noastre, faceți-o prin toate mijloacele. Pentru mine, este vorba despre a vedea o progresie. Nu există nicio teorie aici, nici o postare pe blog sau tutorial. Prototipul 3 curge de la prototipul 2, care decurge de la prototipul 1. Având suficientă practică, puteți prelua rapid nuanțele limbajului de programare, chiar dacă nu l-ați mai văzut până acum.

Vedeți procesul prototipului în acțiune pe GitHub!
Vedeți procesul prototipului în acțiune pe GitHub. (Vezi versiunea mare)

Am urmat acest flux în primele câteva săptămâni ale proiectului, dezvoltând în mare parte prototipuri fără a lucra la aplicația de bază. Până la sfârșitul proiectului, aveam peste 50 de prototipuri distincte care testau diferite tipuri de animație, scheme de încărcare, stocare în cache, teste de sunet și mecanică UI.

În timp ce se întâmpla asta, designerul crea prototipuri de logo-uri, teste de mișcare, pictograme pentru aplicații și așa mai departe. Designerul de sunet a oferit exemple de melodii la care se gândea. Și toată lumea a iubit ceea ce făceam în tot timpul în care îl făceam.

Acest prototip al cântecului din „Mars Disco”, de la unul dintre nivelurile jocului, a fost compus de Nate, designerul nostru de sunet, înainte ca orice design sau animație să fi fost produs.

Concluzie

Urmând definiția mea largă, probabil că faci deja niște prototipuri fără să te gândești la asta ca atare. Poate că următorul pas pentru tine este să împărtășești cu colegii tăi mai des sau să afirmi că prototiparea va fi modul în care vei demara următorul tău proiect.

Integrarea profundă a prototipurilor în procesul dvs. creativ poate fi transformatoare . Poate crea o cultură de echipă mai pozitivă și mai îmbogățită. Poate fi un mecanism pentru dezvoltatori de a învăța noi limbi sau pentru designeri pentru a învăța noi instrumente. Proiectele sunt realizate mai rapid și la o calitate mai bună și sunt mai distractive. Clienții tăi vor avea o mai mare vizibilitate asupra procesului și vor fi pregătiți să vadă lucrurile la o fidelitate mai scăzută, ceea ce face ca împărtășirea lucrurilor cu ei să fie mai frecventă și mai puțin dureroasă. De asemenea, vei arăta că lucrezi mult mai repede decât concurenții tăi și că poți lucra la o varietate mai largă de proiecte.

Cu toate aceste beneficii, ce nu-ți place? Deci, spune-mi, ești convins? Inspirat? Cum arată următorul tău pas?