Design Better And Faster With Rapid Prototyping

• 12 min read
• Design,Web Design,Wireframing,Prototyping
• Salvate pentru citire offline
• Share on Twitter, LinkedIn

Vechiul adagiu, „o imagine vorbește cât o mie de cuvinte” surprinde ceea ce înseamnă prototiparea interfeței cu utilizatorul: utilizarea elementelor vizuale pentru a descrie specificațiile de proiectare și dezvoltare în valoare de mii de cuvinte, care detaliază modul în care un sistem ar trebui să se comporte și să arate. Într-o abordare iterativă a proiectării interfeței cu utilizatorul, prototiparea rapidă este procesul de machetare rapidă a viitoarei stări a unui sistem, fie că este vorba de un site web sau de o aplicație, și validarea acesteia cu o echipă mai largă de utilizatori, părți interesate, dezvoltatori și proiectanți.

Facerea acestui lucru rapid și iterativ generează feedback la începutul și de multe ori în cadrul procesului, îmbunătățind proiectarea finală și reducând nevoia de modificări în timpul dezvoltării.

Lecturi suplimentare pe SmashingMag:

• Optimizarea designului dvs. pentru testarea rapidă a prototipurilor
• Choosing The Right Prototyping Tool
• Content Prototyping In Responsive Web Design
• Resuscitarea prototipurilor de interfață cu utilizatorul (fără a crea zombi)

Prototipurile variază de la schițe brute pe hârtie la simulări interactive care arată și funcționează ca produsul final. Cheile succesului prototipării rapide sunt revizuirea rapidă pe baza feedback-ului și utilizarea unei abordări de prototipare adecvate. Prototiparea rapidă ajută echipele să experimenteze mai multe abordări și idei, facilitează discuțiile prin imagini în loc de cuvinte, se asigură că toată lumea împărtășește o înțelegere comună și reduce riscurile și evită cerințele ratate, ceea ce duce mai repede la un design mai bun.

Procesul de prototipare rapidă

Prototiparea rapidă implică mai multe iterații ale unui proces în trei pași:

1. Prototip Conversia descrierii soluției de către utilizatori în machete, ținând cont de standardele de experiență a utilizatorului și de cele mai bune practici.
2. Revizuire Împărtășiți prototipul cu utilizatorii și evaluați dacă le satisface nevoile și așteptările.
3. Rafinare Pe baza feedback-ului, identificați zonele care trebuie să fie rafinate sau definite și clarificate mai mult.

Prototipul începe de obicei la scară mică, cu câteva zone cheie machetate, și crește în amploare și profunzime pe parcursul mai multor iterații, pe măsură ce zonele necesare sunt dezvoltate, până când prototipul este finalizat și predat pentru dezvoltarea produsului final. Rapiditatea procesului este cel mai evident în iterații, care variază de la modificări în timp real până la cicluri de iterații de câteva zile, în funcție de domeniul de aplicare al prototipului.

Scoping A Prototype

Cuvântul prototip evocă adesea imagini ale unei versiuni codificate, complet funcționale a unei aplicații sau interfețe. Prototipurile rapide nu sunt destinate să evolueze în soluții complet funcționale, ci sunt menite să ajute utilizatorii să vizualizeze și să creeze experiența de utilizare a produsului final. Ținând cont de acest lucru, atunci când stabiliți domeniul de aplicare al unui prototip, decideți asupra câtorva aspecte cheie înainte de a începe orice activitate de prototipare.

Ce trebuie să fie prototipat?

Bunii candidați pentru prototipare includ interacțiuni complexe, funcționalități noi și schimbări în fluxul de lucru, tehnologie sau design. De exemplu, prototiparea rezultatelor căutării este utilă atunci când doriți să vă abateți în mod semnificativ de la experiența standard de căutare; de exemplu, pentru a introduce căutarea cu fațete sau posibilitatea de a previzualiza un document fără a părăsi rezultatele căutării.

Cât de mult ar trebui să fie prototipat?

O bună regulă de bază este să vă concentrați asupra a 20% din funcționalitate care va fi utilizată 80% din timp; adică funcționalitatea cheie care va fi utilizată cel mai des. Nu uitați, scopul prototipării rapide este de a arăta cum va funcționa ceva sau, în etapele ulterioare, cum va arăta designul, fără a prototipiza întregul produs.

Găsește povestea

După ce ați identificat zonele care urmează să fie prototipate, împletiți-le într-unul sau mai multe scenarii: identificați căile coerente prin experiența utilizatorului pe care prototipul le simulează. Pentru un site web care vinde pantofi, un scenariu ar putea fi „Boring Joe” cumpărând exact aceiași pantofi de alergare Nike pe care i-a cumpărat cu șase luni în urmă, în timp ce un alt scenariu ar putea fi „Exploring Sam” navigând printre mărimile 10 pentru a găsi o pereche de Oxfords și o pereche de mocasini care îl interesează.

Planificați-vă iterațiile

Întregul prototip nu este de obicei construit într-o singură iterație, ci mai degrabă bucată cu bucată. O abordare bună este să începeți prototiparea în sens larg și pe scară largă și apoi să vă scufundați adânc în zonele selectate ale soluției. Pentru un site web, acest lucru ar însemna construirea paginii de pornire și a paginilor de destinație pentru secțiunile principale în prima iterație (denumită uneori prototip orizontal) și apoi examinarea și revizuirea acestui cadru. Iterațiile ulterioare ar putea aprofunda una sau mai multe secțiuni ale site-ului web (un prototip vertical); pentru un site web de descărcare de conținut media, ar putea fi vorba de pașii pe care un utilizator i-ar urma pentru a găsi un videoclip și pentru a-l descărca sau de modul în care ar gestiona conținutul media din biblioteca sa online.

Alegeți fidelitatea adecvată

Fidelitatea se referă la cât de mult seamănă un prototip cu soluția finală. Există mai multe dimensiuni ale fidelității, iar prototipurile se pot situa oriunde pe spectrul pentru fiecare dintre aceste dimensiuni. În funcție de stadiul procesului de proiectare și de obiectivele prototipului, selectați fidelitatea adecvată pentru fiecare dintre următoarele:

• Fidelitatea vizuală (schițat ↔ stilizat) Aspectul și senzația sunt dimensiunea cea mai vizibilă a fidelității unui prototip și, dacă nu sunt selectate corespunzător, pot deturna revizuirile prototipului. Treceți la hi-fi prea curând și utilizatorii se vor concentra pe designul vizual, ceea ce nu este adecvat în primele etape. Din punct de vedere vizual, prototipurile nu trebuie să fie perfecte din punct de vedere al pixelilor, ci trebuie să fie proporționale; de exemplu, dacă zona de navigare din stânga trebuie să ocupe o cincime dintr-un ecran de 1024 de pixeli, nu este necesar ca aceasta să aibă exact 204 pixeli lățime, atâta timp cât este reprezentată proporțional în prototip. Pe măsură ce prototiparea progresează pe parcursul ciclului de proiectare, creșteți fidelitatea vizuală, după cum este necesar, introducând elemente de stil, culoare, branding și grafică.
• Fidelitate funcțională (statică ↔ interactivă) Prototipul dezvăluie modul în care va funcționa soluția (static) sau pare a fi complet funcțional și răspunde la intrările utilizatorului (interactiv)? Această dimensiune distrage mai puțin atenția utilizatorilor, dar adăugarea interactivității în iterațiile ulterioare sporește fidelitatea funcțională și permite ca prototipul să fie utilizat pentru testele de utilizare și pentru formare și comunicare.
• Fidelitatea conținutului (lorem ipsum ↔ conținut real) O altă dimensiune care distrage adesea atenția utilizatorilor este conținutul care este afișat în prototip. Liniile mâzgălite și textul fictiv, cum ar fi lorem ipsum, sunt utile pentru a fi evitate în primele etape ale prototipării. Dar, pe măsură ce prototipul este rafinat, evaluați necesitatea de a înlocui textul fictiv cu conținut real pentru a vă face o idee despre modul în care acesta afectează designul general.

Spectrul prototipării

Low Fidelity

Cel mai rapid mod de a începe prototiparea este, de asemenea, cel mai simplu: punând creionul(cil) pe hârtie. Schițarea pe hârtie este o abordare de fidelitate redusă pe care oricine o poate face; nu sunt necesare instrumente speciale sau experiență. Cel mai adesea utilizată în primele etape ale unui ciclu de proiectare, schițarea este o modalitate rapidă de a crea machete aproximative ale abordărilor și conceptelor de proiectare și de a obține feedback din partea utilizatorilor. Prototiparea pe hârtie este ideală în timpul brainstormingului și al conceptualizării și poate fi realizată singur într-un cubiclu cu un caiet de schițe sau în grup cu un flip chart (sau tablă albă) și markere.

Se află la capătul de fidelitate scăzută al spectrului de prototipare, prototipurile pe hârtie sunt statice și au, de obicei, o fidelitate vizuală și de conținut scăzută. Acest lucru îi obligă pe utilizatori să se concentreze asupra modului în care vor utiliza sistemul în loc să se concentreze asupra modului în care acesta va arăta și îi face pe proiectanți să fie mai deschiși la schimbări bazate pe feedback-ul utilizatorilor.

Prototiparea de fidelitate redusă se pretează la prototiparea rapidă. Nu are o curbă de învățare, dar vă permite să faceți modificări ușor și rapid.

Fidelitate medie

Când începem să folosim instrumente computerizate, cum ar fi Visio și Omnigraffle, pentru a realiza prototipuri, fidelitatea crește pe majoritatea fronturilor, producând prototipuri de fidelitate medie. Wireframe-urile, fluxurile de sarcini și scenariile care sunt create cu aceste instrumente necesită mai mult timp și efort, dar au un aspect mai formal și mai rafinat. Deși pot fi introduse elemente vizuale de branding, culori și stil, cei care realizează prototipuri stau adesea departe de acestea, concentrându-se în schimb pe demonstrarea comportamentului aplicației. Interactivitatea poate fi simulată prin legarea paginilor sau a ecranelor, dar fidelitatea funcțională în acest caz este, în cel mai bun caz, medie. Aceste prototipuri sunt cele mai potrivite pentru a determina dacă nevoile utilizatorului sunt satisfăcute și dacă experiența utilizatorului este optimă.

Există două motive pentru care cineva ar putea face în mod intenționat ca un prototip de fidelitate medie să nu arate ca un prototip de fidelitate medie:

• Primul este că, folosind Balsamiq sau șabloane Visio schițate pentru a face prototipul să arate de fidelitate scăzută, îi forțați pe utilizatori să îl privească ca pe o schiță sau ca pe o lucrare în curs de desfășurare, mai degrabă decât ca pe un produs șlefuit și finalizat.
• Cel de-al doilea este că, dând prototipului o fidelitate vizuală ridicată (de exemplu, într-o machetă cuprinzătoare realizată în Photoshop), îl determinați pe utilizator să se concentreze asupra designului vizual și a aspectului, inclusiv asupra culorilor, fonturilor, machetei, logo-ului și imaginilor.

Viteza prototipării de fidelitate medie se obține cu șabloane, șabloane și widgeturi și elemente reutilizabile. Devine din ce în ce mai rapidă pe măsură ce deveniți mai pricepuți cu instrumentele alese.

Fidelitate înaltă

Prototipurile de fidelitate înaltă sunt cele mai realiste și sunt adesea confundate cu produsul final, dar de obicei necesită mult timp. Cu câțiva ani în urmă, singura modalitate de a crea prototipuri de înaltă fidelitate era de a codifica efectiv folosind un limbaj de programare, ceea ce necesita adesea ca proiectantul și dezvoltatorul să lucreze împreună. Cu toate acestea, în prezent, instrumentele de simulare a aplicațiilor permit utilizatorilor non-tehnici să tragă și să fixeze widget-uri UI pentru a crea prototipuri de înaltă fidelitate care simulează funcționalitatea produsului final, chiar și pentru logica de afaceri și interacțiunile cu bazele de date. Axure și iRise sunt câteva exemple de instrumente de simulare a aplicațiilor care pot fi utilizate pentru a crea prototipuri de înaltă fidelitate.

Aceste prototipuri sunt adecvate atunci când este necesară o fidelitate vizuală și funcțională ridicată; de exemplu, atunci când se introduce o nouă tehnologie (de exemplu, atunci când se trece de la o aplicație mainframe – da, încă există! – la o soluție bazată pe Web. Cele mai multe dintre aceste prototipuri nu pot fi convertite în cod utilizabil, dar ele servesc drept referință excelentă pentru dezvoltatori. Acestea sunt, de asemenea, utile pentru efectuarea de teste de utilizare și pentru instruirea utilizatorilor.

Prototiparea de înaltă fidelitate este relativ rapidă, având în vedere nivelul de interactivitate și fidelitate implicat, și poate fi accelerată prin utilizarea instrumentelor de simulare drag-and-drop. În plus, unele dintre aceste instrumente facilitează colectarea feedback-ului utilizatorilor și documentarea cerințelor, accelerând și mai mult procesul de proiectare. Chiar dacă nu este nevoie să învățați un nou limbaj de programare, aceste instrumente au o curbă de învățare.

Selectarea unui nivel de fidelitate

În alegerea fidelității prototipului, nu există o abordare corectă. Cele mai multe proiecte de produse noi încep cel mai bine cu schițe, trecând apoi la prototipuri de fidelitate medie sau înaltă, în funcție de complexitatea sistemului și de cerințele dimensiunilor de fidelitate.

În lucrul cu un anumit client din industria farmaceutică, am trecut de la tablă albă la prototipuri interactive care aveau o fidelitate funcțională și de conținut ridicată, dar o fidelitate vizuală scăzută. Îi păsa mai puțin de aspect și senzație decât de aderarea la liniile directoare corporative.

Pentru un alt client, acesta din domeniul comerțului cu amănuntul, prototipul nostru interactiv trebuia să aibă o fidelitate vizuală și funcțională ridicată. Fidelitatea conținutului nu a contat pentru că ei urmau să reutilizeze conținutul și erau deja familiarizați cu acesta. Pentru ei, aspectul și experiența interactivă contau mai mult pentru că aceasta era prima lor implementare a SharePoint și doreau ca portalul să arate „non-SharePointy”!

Selectarea instrumentelor

În funcție de abordarea dumneavoastră, aveți o mare varietate de instrumente din care puteți alege. Dan Harrelson a compilat o listă de instrumente populare de prototipare pe blogul Adaptive Path.

Care instrument are propriul set de caracteristici și puncte forte. În funcție de nevoile dvs. și de cerințele proiectelor la care lucrați, evaluați ce instrument ar fi cel mai potrivit. Iată câteva întrebări pe care trebuie să le luați în considerare atunci când evaluați instrumentele:

• Cât de ușor este să învățați și să utilizați instrumentul?
• Este flexibil pentru a susține prototipuri pentru aplicații Web, aplicații software împachetate și personalizate, precum și aplicații desktop și mobile?
• Există un depozit de șabloane, șabloane sau widget-uri reutilizabile disponibile?
• Cât de ușor este să partajați prototipul cu alte persoane pentru revizuire? Poate fi capturat feedback-ul acestora cu ajutorul instrumentului?
• Cât de ușor este să se facă modificări din mers sau să se încorporeze feedback-ul?
• Dispune de funcții de colaborare, cum ar fi posibilitatea ca mai multe persoane să lucreze la el în același timp?
• Care sunt termenii și costurile de licențiere?

Ce trebuie să faceți și ce nu trebuie să faceți

În timp ce începeți, iată câteva puncte de care trebuie să țineți cont despre prototiparea rapidă eficientă:

Faceți…

• Lucrați în colaborare cu utilizatorii, părțile interesate din domeniul afacerilor și IT în timp ce realizați prototipuri rapide. Pe lângă faptul că oferă un feedback valoros, aceștia dobândesc, de asemenea, un sentiment de proprietate asupra produsului final.
• Evitați „prototiparea” prin stabilirea așteptărilor pentru proces, inclusiv a celor care afectează scopul, fidelitatea, domeniul de aplicare și durata. Reamintiți tuturor, inclusiv dumneavoastră, că prototiparea rapidă este un mijloc pentru atingerea unui scop, nu un scop în sine.
• Când creați prototipuri interactive de înaltă fidelitate și simulări, includeți întârzieri realiste (de exemplu, pentru reîmprospătarea ecranului sau parcurgerea etapelor unei tranzacții), astfel încât utilizatorii să nu se aștepte la timpi de răspuns instantaneu din partea produsului final.
• Reutilizați, reutilizați, reutilizați. Pentru prototiparea pe calculator, aceasta înseamnă salvarea șabloanelor, șabloanelor, modelelor și widget-urilor reutilizabile pentru proiecte viitoare.
• Cel mai important, începeți fiecare sesiune de revizuire a prototipului cu negația că acesta este doar un prototip, o machetă, nu soluția reală. Acest lucru le reamintește utilizatorilor că este o lucrare în curs de desfășurare, încurajează feedback-ul și, în cazul prototipurilor de înaltă fidelitate, împiedică utilizatorii să îl confunde cu o soluție funcțională.

Nu…

• Nu creați prototipuri cu caracteristici sau funcționalități care nu pot fi implementate – de multe ori o problemă în cazul implementării pachetelor software. Atunci când aveți îndoieli, confirmați cu dezvoltatorii înainte de a începe.
• Nu luați fiecare modificare sau solicitare care iese din revizuirea prototipului ca pe o nouă cerință. Prototiparea rapidă ajută la captarea cerințelor ratate, dar aceste noi cerințe trebuie evaluate cu atenție. Unele pot fi implementate, în timp ce altele sunt amânate pentru o versiune viitoare.
• Nu începeți sesiunile de revizuire a prototipurilor fără linii directoare clare pentru feedback. Fiți foarte specific cu privire la tipul de feedback pe care îl căutați. (Sunt pașii aranjați logic? Navigarea este clară și intuitivă?) Dacă nu, fiți pregătit pentru: „Nu-mi place albastrul din antet” sau „Nu putem folosi acest font în loc?” sau „Poți să faci asta mai mare, mai îndrăzneț, cu roșu și intermitent?”
• Nu fiți perfecționist. În cele mai multe cazuri, prototiparea rapidă nu trebuie să fie 100% perfectă, ci doar suficient de bună pentru a oferi tuturor o înțelegere comună.
• Nu prototipuiți totul. De cele mai multe ori, nu ar trebui să o faceți.

Resurse suplimentare

• Dacă aveți nevoie de un imbold pentru a începe să faceți schițe, încercați cartea lui Dan Roam The Back of the Napkin.
• Aflați mai multe despre prototiparea pe hârtie în cartea lui Carolyn Snyder Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, o tehnică pentru explorarea și rafinarea conceptelor.
• Aveți nevoie de conținut de fidelitate redusă? Generați text Lorem Ipsum pentru prototipul dumneavoastră.
• Vreți să faceți ca schița dumneavoastră pe hârtie să pară de înaltă fidelitate? Încercați aceste șabloane pentru Web, iPad și iPhone.
• Instrumente de schițare și prototipare pentru aplicații iPhone
• Schițează și prototipează simplu în Firefox cu add-on-ul Pencil.
• Tabloane PDF de schițare, wireframing și luare de notițe, imprimabile gratuit
• 50 de kituri gratuite de wireframing UI și web design, resurse și fișiere sursă

(al)

.