Perfecționați-vă procesul de design UX – Un ghid pentru proiectarea prototipului

Procesul de prototipare – de la crearea de simple wireframes până la testarea machetelor complet funcționale – este unul dintre cele mai puternice și puternice abilități pe care orice designer le poate stăpâni. Este, de asemenea, plin de pericole în locurile de muncă în care procesul este omis în locul „proiectării unui prototip” ca un simplu livrabil de oferit următorului departament de construit. Indiferent de cât de sârguintă este afacerea ta cu prototiparea, procesul real poate adesea să producă sau să distrugă produsul final.

Cum și de ce să construim efectiv un prototip este adesea un mister. Întrebați mulți designeri și își vor înclina capul ca niște cățeluși confuzi. "Ce vrei să spui? Doar fă-o”, vor spune ei. Și destul de adevărat: cu toții știm cum să creăm un prototip. Doar că nu știm cum știm.

Acest lucru este deosebit de critic având în vedere modul în care prototipurile sunt adesea cel mai valoros produs livrabil. Clienții și managerii vor să vadă ce ați făcut, fie că este un site web sau un produs fizic. Vor să-l încerce, să inspecteze diferitele elemente și să înțeleagă fluxul de lucru. Vor să vadă „cum funcționează”.

Construirea unui prototip nu este suficientă; trebuie să înțelegem procesul implicat în construirea schițelor inițiale ale unui produs. Acest articol va detalia tot ceea ce un designer trebuie să știe și să facă pentru a realiza acest lucru.

Design prototip - Pentru ce sunt prototipurile

Ființele umane sunt foarte vizuale. De fapt, 30% din cortexul nostru cerebral este dedicat doar vederii. Așa că atunci când vezi un prototip, cel mai important lucru despre el este că îl vezi ! Atunci când clientul îl poate vizualiza și înțelege toate procesele implicate cu produsul, în special zonele de disputa pentru teste viitoare, acel prototip prinde viață.

Deci, ce este un prototip? Un prototip este un instrument pentru vizualizarea unui amestec de lucrări de design interactiv; de fapt, prototipurile (la aproape orice etapă) sunt o amalgamare a tuturor lucrărilor care au venit înainte într-o singură piesă, vizibilă și funcțională. Această reprezentare vizuală demonstrează ce face produsul la un moment dat, care sunt elementele interactive și cum ar funcționa produsul în lumea reală.

Deși există o mulțime de mecanisme pentru diferitele aspecte ale designului prototipului (cum ar fi crearea de schițe), este ușor să ratezi lucruri și să faci greșeli.

Acest lucru face ca munca pentru modul în care este construit un prototip este extrem de valoroasă, deoarece în multe feluri descrie modul în care scopul produsului este actualizat. Nu perfect și cu siguranță nu exact de cele mai multe ori, dar așa cum sugerează și numele, prototipurile nu sunt definitive.

Ne încetinesc pentru a ne accelera. Făcându-ne timp să ne prototipăm ideile, evităm greșelile costisitoare, cum ar fi devenirea prea complexă prea devreme și rămânerea cu o idee slabă pentru prea mult timp.

Tim Brown, CEO și președinte IDEO

Un mod simplu de a gândi prototipurile este ca un mecanism de demonstrare a funcționalității.

Acea explicație practică a modului în care funcționează ceva are o serie de beneficii de mare valoare, inclusiv:

• Fă-l real – Înainte de a construi orice prototip, produsul este complet conceptual! Este în regulă pentru puțin timp, dar în cele din urmă trebuie să devină ceva pe care părțile interesate și utilizatorii în cele din urmă îl înțeleg și îl apreciază. Un prototip este primul pas în trecerea de la conceptual la real.
• Lucrează o problemă – Uneori, avem o provocare de proiectare fără o soluție. Ca abilitate, prototiparea este o modalitate excelentă de a vizualiza problema și de a introduce rapid soluții. Dacă nu funcționează, aruncați prototipul și încercați din nou.
• Iterare – Prototiparea vine în etape, dar rezultatul este același: să-ți evoluezi ideile. De la schițe la hi-fi, fiecare nouă iterație oferă o multitudine de comportamente și funcții de testat. Și cu mai multe date, putem repeta atât mai rapid, cât și mai inteligent.
• Detectează scenarii neintenționate – Odată ce ceva este vizibil, avem limitările produsului nostru disponibile pentru studiu, care oferă, de asemenea, un context mai bun cu privire la ceea ce ar trebui să fie acolo... și ce nu ar trebui!
• Detectează problemele de utilizare – Aici trăiesc mulți designeri: odată ce un produs are un prototip de orice fel, provocările de utilizare devin dintr-o dată ușor de detectat și remediat.
• Prezentare – Prototipurile în orice etapă sunt un standard pentru prezentare. Indiferent dacă testați o versiune a unei pagini sau prezentați un produs unui client, ar trebui să existe un prototip într-o anumită formă. Și dacă nu este, poți paria că cineva va întreba unde este și de ce nu a fost inclus.

Cum să începeți procesul de prototipare

După ce ați primit un document de cerințe de 50 de pagini de la un client, a privi o pânză goală poate fi descurajantă. Trecerea în revistă a gândurilor neorganizate de la întâlnirile cu clienții, a schițelor cu șervețele și a fotografiilor murdare cu tablă albă rareori ajută.

Deoarece prototipurile sunt construite pe atât de multe alte informații, este important să aduni detaliile necesare în avans pentru a pune pixul pe hârtie. Luați în considerare următoarea listă de verificare și examinați detaliile furnizate de clientul sau managerul dvs.:

1. Care sunt scopurile proiectului?

Începeți cu imaginea de ansamblu. Produsul rezolvă o nevoie reală? Cum rezolvă această nevoie? Înțelegerea utilității produsului este esențială pentru a oferi orice fel de soluție viabilă.

2. Ce produse competitive folosesc oamenii în prezent?

O analiză competitivă puternică va oferi o imagine clară a stării pieței pentru tipul de produs, plus ceea ce se așteaptă utilizatorii de astăzi.

3. Cine este publicul? Care sunt scopurile lor?

Înțelegerea demografiei și a nevoilor utilizatorilor oferă contextul necesar pentru a crea produse orientate spre furnizarea anumitor tipuri de utilizatori și satisfacerea nevoilor acestora.

4. Ce tip de produs este și pentru ce (dispozitiv) este?

Cu atât de multe tehnologii și soluții diferite, designerii UX trebuie să știe cum va fi utilizat produsul (aplicație web, site web responsive, aplicație mobilă etc.), pe ce dispozitiv(e) și cum vor coexista diferite versiuni (dacă este cazul). ).

5. Există precedente vizuale de urmat?

Dacă produsul există deja și proiectul este pentru îmbunătățiri sau reproiectare, este posibil să existe anumite cerințe ținând cont de comportamentul curent al utilizatorului cu produsul.

6. Care sunt livrabilele?

Stabilirea așteptărilor cu privire la livrabile și la proces este esențială pentru planificarea și fluxul de lucru. Fiecare proiect este diferit, dar dacă livrabilele sunt bine definite, restul procesului de design UX are șanse mai mari să meargă fără probleme.

Desenați-vă prototipurile

Cu datele noastre disponibile și organizate, următorul pas este să începem desenul. Mulți designeri vor avea deja o idee pentru aspect, structură sau chiar unde aparțin elemente specifice ale designului vizual, înainte de a o scoate. Este în regulă, dar scopul schițelor inițiale este de a explora spațiul disponibil pentru a evidenția ceea ce este posibil și, mai important, ceea ce nu este.

Adunați-vă instrumentele de scris alese, fie că este vorba de creion și hârtie sau tablă și marker. Procesul de schiță este asemănător cu un scriitor care scrie liber sau cu un muzician care zboară; desenați ceea ce simțiți pe baza întregii lucrări pe care le-ați făcut în prealabil și luând în considerare piesele de mai jos:

01 | Fluxuri de utilizatori – Urmăriți identificarea fluxurilor de utilizatori. Vedeți cum utilizatorii își ating obiectivele și cum interacționează în cadrul sistemului.

02 | Entități informaționale – Fiecare flux de utilizator va afișa unele intrări și ieșiri ale utilizatorului. Identificați ce sunt, cum se raportează la comportamentul și așteptările utilizatorului, în ce interacțiuni sunt implicați și cum funcționează.

03 | Primele schițe – După ce vă faceți o idee despre cine va folosi sistemul, ce vor face și cu ce, este timpul să vedem cum. Schițați-vă fluxurile de utilizatori - nu este nevoie să creați încă aspectul, doar rezolvați funcționalitatea.

04 | Schițați o structură rudimentară - După ce fluxurile dvs. de utilizatori sunt schițate, veți avea o idee mai bună despre cel mai bun aspect pentru produs. Acesta va include conținut (text, fotografii, video etc.) care va apărea ca casete de bază sau mâzgăli. Când sunt scrise de mână, acestea nu se potrivesc la dimensiune, astfel încât toată structura și conținutul sunt doar pentru vizualizare, nu pentru utilizare reală.

Un sfat suplimentar este să utilizați blocuri de schiță, hârtie special formulată sau instrumente pentru a face cadre mai clare în timpul schiței. Acestea oferă aspectul de bază pentru fereastra în cauză, sunt destul de ieftine și, cu șablonul adecvat, fac și schițele să apară mai curat. Acestea sunt extrem de utile dacă sunteți un sertar dezordonat, deoarece oferă rapoartele de aspect și liniile de grilă corecte pentru smartphone-uri și browsere web.

Acest proces poate continua atât timp cât doriți, dar este timpul să treceți la pasul următor odată ce un flux de utilizator este finalizat și procesul de finalizare a acelui flux este clar. Este o idee bună să săriți înainte și înapoi între schițe și construirea de wireframes digitale, în principal pentru a menține procesul creativ. Pe măsură ce progresați prin mai multe fluxuri, produsul se va simți mai concret și vă veți îndepărta în mod natural de la schiță.

Trecerea la digital (prototipuri cu fidelitate scăzută și înaltă)

Odată ce există suficiente schițe complete pentru a merge mai departe, este timpul să le digitalizați. Fie că este vorba de Adobe XD sau Sketch, Framer sau Flinto, sau cu totul altceva, crearea de versiuni digitale ale schițelor este primul pas pentru oficializarea acestora. Prin urmare, accentul se mută de la adăugarea creativă a elementelor necesare la organizarea activelor și a structurii în cadrul design-urilor.

Pe măsură ce prototipurile devin mai practice și elementele mai structurate, produsul prinde contur. Când treceți la prototipuri digitale, fidelitatea este determinată de nivelul de interactivitate , design vizual și conținut . Un prototip poate fi de fidelitate scăzută sau înaltă individual pe aceste zone, deși hi-fi le încorporează pe toate trei la cel mai înalt nivel.

Luați în considerare ierarhia în ceea ce privește satisfacerea nevoilor utilizatorilor. Fiecare schiță se conectează la un flux și o poveste de utilizator, iar schițele reprezintă un prim pas către determinarea aspectului și structurii unui produs. Instrumentele digitale de astăzi pot accelera o mare parte din acest lucru, de exemplu, setarea elementelor principale care se aplică tuturor paginilor și șabloanelor pentru tipurile de pagini.

Cu fiecare fir nou și iterație, puneți două întrebări majore: Această pagină ține seama de scopul ei în fluxul mai mare de utilizatori? Și are sens interacțiunea (adică utilizatorul a înțeles cum să finalizeze acțiunea)? Ne punem multe întrebări. Cu cât facem mai mult, cu atât este mai probabil ca fiecare nouă iterație să aducă prototipurile mai aproape de o schiță finală.

Prototipurile digitale sunt, de asemenea, mult mai ușor de testat, deoarece nu sunt doar mai lizibile, ci și mai rapide de reprodus și repetat în masă. Aici instrumentele de prototipare UX precum InVision și Proto.io sunt foarte utile pentru a crea prototipuri pe care se poate face clic. Când se poate face clic, devine ușor să testați gradul de utilizare a diferitelor aspecte, de la butoane individuale la fluxuri întregi.

Prototiparea pe care se poate face clic a devenit deosebit de populară în ultimii ani datorită ușurinței de utilizare a programelor precum InVision. Este și mai valoros pentru dispozitivele mobile, unde acum fiecare instrument major de prototipare oferă o cale de a vedea sau testa firele mobile direct pe un dispozitiv de testare.

Cu unele cunoștințe de inginerie sau instrumente mai puternice, cum ar fi Justinmind sau Axure, este, de asemenea, posibil să construiți prototipuri funcționale, care sunt interactive dincolo de simplul clic. Utilizatorii pot testa lucruri precum completarea formularelor, realizarea sarcinilor simple sau complexe și utilizarea efectivă a aplicației așa cum este menită să fie utilizată, toate fără a o construi efectiv. Designerii cu pregătire în proiectarea interacțiunii umane cu computerul (HCI), inclusiv mulți designeri Toptal, construiesc și testează în mod regulat prototipuri funcționale.

Prototipurile interactive sunt excelente pentru testarea animațiilor, a operațiunilor utilizatorului în interiorul aplicației și a funcțiilor de nivel superior care uneori nu pot fi testate fără o acțiune funcțională.

Prototip cu scop

Frumusețea - și provocarea - prototipării sunt în proces. Putem spune același lucru despre aproape orice, dar prototipurile încep și se termină cu un scop. Fără a ști de ce un anumit ecran trebuie să se comporte într-un anumit fel, cum ar trebui să funcționeze o caracteristică sau dacă utilizatorii au nevoie de o pâlnie sau nu, prototipul realizat nu este dezvoltat; este desenat și apoi creat ad-hoc.

Cu toate acestea, chiar dacă fiecare wireframe construit este realizat atât de inteligent, întrebările puse pe parcurs, fiecare poveste a utilizatorului aferentă luată în considerare și arhitectura informațională folosită ca hartă, este totuși posibil să ratați lucruri. Aceasta este provocarea proiectării prototipurilor: clienții, managerii și chiar designerii uită că prototipurile nu sunt definitive . Sunt doar o schiță, o iterație până la următoarea versiune. Totul face parte din procesul de proiectare UX.

Deci, atunci când construiți următorul set de prototipuri, amintiți-vă să puneți cel puțin o întrebare extrem de importantă: produce aceasta rezultatul dorit? Dacă nu, atunci este o altă oportunitate de a redacta o nouă versiune.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator