Un tutorial privind fluxul de lucru de proiectare pentru dezvoltatori: oferiți o interfață UI/UX mai bună la timp

Nota editorului: Lubos Volkov este un designer experimentat care a lucrat de la distanță cu numeroși dezvoltatori de-a lungul carierei sale. În calitate de designer de produs la Toptal, Lubos interacționează zilnic cu membrii echipei dintr-o varietate de departamente, inclusiv inginerie, comunitate și conținut. Este un designer talentat ale cărui abilități de comunicare contribuie la succesul său. În acest tutorial, Lubos împărtășește experiențele și modalitățile sale de a optimiza UI și fluxurile de lucru UX pentru designer-dezvoltator care conduc la produse de calitate livrate la termenul limită sau înainte.

Lucrul cu un designer sau o echipă de proiectare grozavă poate fi un atu de neprețuit pentru orice echipă. Cu canale de comunicare clare și cooperare liberă, proiectantul ar trebui să vă ofere tot ce aveți nevoie pentru a accelera procesul de construcție și pentru a limita întrebările și confuzia cât mai mult posibil.

Ce puteți face dumneavoastră, dezvoltatorul UX, pentru a vă asigura că produsul pe care l-ați construit este livrat în timp util, fără a sacrifica calitatea interfeței și experiența utilizatorului?

Răspunsul meu: Implicați-vă designerii din prima zi și mențineți-i implicați pe parcursul întregului proces de dezvoltare UI/UX. Asigurați-vă că stabiliți linii de comunicare clare și mesaje consistente între dezvoltatori și designeri.

Ai tot ce ai nevoie?

Cel mai rău lucru care se poate întâmpla în timpul implementării oricărei interfețe de utilizare este __lipsa de comunicare între designer și dezvoltator __ (cu excepția cazului în care sunt aceeași persoană). Unii designeri cred că treaba lor este făcută odată ce PSD-ul este trimis. Dar, asta este pur și simplu greșit! Trebuie să creați un flux de lucru de comunicare permanent care să dureze dincolo de livrarea PSD-urilor.

În multe cazuri, va dura timp înainte ca designerii să vadă implementarea reală a designului UI/UX. Spre surprinderea lor, construcția este adesea complet diferită de trimiterea inițială. (Mi s-a întâmplat de mai multe ori. Am trimis fișiere sursă cu descrieri complete și prototipuri de interacțiune, dar când am văzut în sfârșit proiectul, luni mai târziu, avea un aspect diferit, culori diferite și nicio interacțiune la loc.)

Unii designeri ar putea să mă urască pentru asta, deoarece acest flux de lucru de proiectare necesită multă muncă „extra” din partea lor. Cu toate acestea, crearea și furnizarea de active și informații complete, într-un mod organizat, este mai bine pentru proiect și pentru echipă în ansamblu.

Dacă un dezvoltator are în față tot ceea ce are nevoie, acesta va accelera procesul. Un PSD curat nu este suficient.

De ce aveți nevoie pentru a face treaba eficient și eficient?

Acestea sunt atuurile pe care un dezvoltator ar trebui să se aștepte de la proiectant pentru a aduce un design UI/UX la implementare:

• Fișier de resurse - Designerul ar trebui să plaseze fiecare element al aplicației într-un singur fișier. Acest fișier ar trebui să conțină butoane, casete de selectare, stiluri de antet, fonturi, culori etc. Practic, pe baza informațiilor din acest fișier, dezvoltatorul ar trebui să poată recrea orice interfață de la zero. Este mult mai ușor pentru un dezvoltator să exporte orice element dintr-un singur PSD, decât să caute mai multe fișiere pentru el.

• Active - Asigurați-vă că dezvoltatorii primesc toate activele necesare, deoarece fișierele sursă nu ar trebui să mai fie atinse.

• Prototipuri de interacțiune - Zilele „ecranelor statice” au trecut de mult. Utilizarea interacțiunilor și animațiilor inteligente, pentru a netezi fluxul de lucru și implementarea designului UX, este o practică comună acum. Dar, nu puteți spune doar „acest lucru va aluneca din stânga” unui dezvoltator. Designerul ar trebui să creeze prototipul real al acelei interacțiuni. Prototipul ar trebui să includă informații precum viteza, viteza etc., iar proiectantul trebuie să specifice fiecare dintre aceste valori.

• Convenție de denumire - Solicitați o structură de denumire a fișierelor pentru a menține lucrurile organizate. Vă va fi mai ușor pentru amândoi să navigați în fișiere. (Nimănui nu-i place să aibă lucruri ascunse într-un dosar de fundal.)

• Resurse HDPI - Trăim „vremuri grele”, cu densitatea uriașă a ecranelor. Asigurați-vă că designerul va furniza imagini în toate rezoluțiile necesare, astfel încât aplicația dvs. să arate crocant peste tot. Notă: folosiți cât mai mulți vectori; te va ajuta foarte mult (svg).

Dacă găsiți altceva care lipsește în timpul implementării, nu vă fie teamă; dați ping designerului și cereți-l. Nu sari niciodata si niciodata nu sari! Sunteți membri ai aceleiași echipe, iar munca voastră este să livrați cel mai bun produs posibil. Dacă un designer eșuează, eșuezi și tu.

Lucrări în curs

Utilizați-vă designerii în timpul procesului de dezvoltare UI/UX. Nu-i ține pe margine așteptându-te să „împingă pixelii”. Un designer vede posibile inovații chiar înainte de începerea implementării. Pentru a profita de acest lucru, ține-le la curent. Oferiți-le acces pentru a vedea și testa lucrările în desfășurare. Știu bine că nimănui nu-i place să împărtășească proiecte neterminate. Dar, este mult mai ușor să faci modificări la mijlocul unei build decât la sfârșit. Acest lucru vă poate economisi timp și vă poate preveni munca inutilă. Odată ce îi oferi proiectantului șansa de a testa proiectul, cereți-i să întocmească o listă de probleme și soluții și să sugereze îmbunătățiri.

Ce să faci când un dezvoltator are o idee care ar schimba aspectul unei aplicații? Discutați-l cu designerul și nu permiteți niciodată unui dezvoltator să modifice designul, fără a consulta designerul. Acest flux de lucru de proiectare va asigura că construcția rămâne pe drumul cel bun. Un mare designer are un motiv pentru fiecare element de pe ecran. Scoaterea unei singure piese, fără a înțelege de ce se află acolo, ar putea strica experiența utilizatorului produsului.

Management de proiect UI/UX Design

Designerii cred că dezvoltatorii pot da viață unui design într-o zi sau chiar într-o oră. Dar, la fel ca un design excelent, o dezvoltare excelentă necesită timp și efort. Ține-ți designerul anxios la distanță, lăsându-l să vadă progresul construcției. Utilizarea unui software extern de management de proiect, pentru a vă asigura că fiecare revizuire este luată în considerare, este o modalitate excelentă de a vă asigura că nu pierdeți informații importante discutate într-o conversație prin e-mail sau într-o sesiune Skype. Și să fim sinceri: uneori schimbările și activitățile nici nu sunt comunicate până nu se întâmplă.

Indiferent de soluția pe care o utilizați, asigurați-vă că alegeți un proces de flux de lucru pe care întreaga echipă îl va adopta și îl va folosi în mod constant. În echipa noastră, am încercat să impuls Basecamp pentru că asta foloseam, dar dezvoltatorii noștri front-end au crezut că are funcții limitate. Foloseau deja alt software de management de proiect pentru a urmări erori, progrese etc., cum ar fi JIRA, GitHub și chiar Evernote. Am înțeles că urmărirea și gestionarea proiectelor ar trebui să fie cât mai simple posibil, așa că mi-am migrat fluxul de lucru de proiectare a UI la JIRA. Am vrut să mă asigur că au înțeles fluxul meu de lucru și progresul, dar nu am vrut să simtă că designul este un alt lucru de gestionat.

Iată câteva sugestii pentru un instrument de management de proiect:

• Basecamp - Urmărește progresul sarcinilor legate de proiectare și dezvoltare și vă permite cu ușurință să exportați sarcini. Are, de asemenea, un client mobil simplu.
• JIRA - O platformă complet personalizabilă în care puteți configura cu ușurință plăci personalizate pentru diferite zone. De exemplu, organizați panouri pentru a urmări activități precum back-end, front-end, design etc. Cred că clientul mobil este puțin slab, dar este o soluție excelentă pentru echipele mai mari și include o funcție de urmărire a erorilor.
• E-mail - Acesta este excelent pentru a stabili o conversație sau pentru a trimite imagini. Dar vă rugăm să aveți grijă dacă utilizați e-mailul pentru feedback. Lucrurile se pot pierde cu ușurință.

De asemenea, puteți încerca Trello și alte programe de management de proiect, dar cele mai utilizate în industria noastră sunt Basecamp și JIRA. Din nou, cel mai important lucru este să găsești un sistem de management al proiectelor pe care toată lumea să-l poată folosi în mod consecvent, deoarece în caz contrar este o problemă discutabilă.

Designul și dezvoltarea UX vin împreună

Designerul și dezvoltatorul sunt o combinație puternică. Asigurați-vă că faceți brainstorming UI și UX împreună cât mai des posibil. Dezvoltatorii ar trebui să fie dispuși să ajute un designer să conceapă idei, în timp ce un designer ar trebui să aibă cel puțin cunoștințe de bază despre tehnologia care este utilizată.

Descoperiți împreună fluxul de lucru de proiectare. Nu implementați doar orbește ceea ce crează designerii dvs. Fii proactiv și creează ceva care arată frumos și are o experiență excelentă pentru utilizator, profitând de cele două perspective diferite. Designerii gândesc în afara cutiei și văd animații, idei, pixeli și butoane nebunești, în timp ce dezvoltatorii văd tehnologia, scăderile de viteză și limitele.

Din experiența mea, fiecare designer este înnebunit după pixeli și concepte interesante. Dar uneori, un designer ajunge într-un punct în care are o idee, dar dezvoltatorul renunță și spune: „Acest lucru nu va funcționa bine odată ce este implementat. Vor fi probleme de consum de performanță”. Recent, am căutat să implementez o fereastră modală cu un fundal neclar, dar această neclaritate a cauzat timpi mari de încărcare. Pentru a rezolva această problemă, dezvoltatorul a sugerat utilizarea unei suprapuneri obișnuite, pline de culoare, care se încarcă mai rapid și păstrează calitatea imaginii. Designeri, acordați atenție: nu compromiteți experiența utilizatorului pentru design.

Bucla de feedback

Feedback-ul designerului este crucial și trebuie să se întâmple cât mai des posibil. Este probabil cel mai consumator de timp (și energie) pe care îl vei face. Dar, trebuie să-l adoptați pentru a putea oferi rezultate perfecte. Iată câteva sfaturi pentru design UX și UI despre cum să vă faceți feedback-ul perfect.

• Fii vizual - Feedback-ul trebuie să fie cât mai specific posibil. Cel mai bun mod de a-l face exact este să faceți o captură de ecran simplă și să evidențiați o problemă pe care doriți să o remediați. Ar fi chiar mai bine dacă ați avea imagini cu o implementare curentă față de cum ar trebui să arate . Comunicarea vizuală va elimina 50% dintre întrebări.

• Fii descriptiv - Feedback-ul trebuie să fie corect. Nu poți spune doar „mută acest buton în sus”. Proiectantul trebuie să specifice câți pixeli ar trebui să se miște un buton, ce umplutură trebuie utilizată etc. Includeți întotdeauna o explicație a problemei și soluția adecvată pentru aceasta. Va dura mult timp, dar merită.

• Aveți răbdare - Rețineți că designerul și dezvoltatorii nu împărtășesc același accent. Dacă dezvoltatorii nu înțeleg pe deplin ideea unui designer, poate duce la confuzie și la decizii proaste. În fiecare caz, ambele părți trebuie să fie răbdătoare și dispuse să-i ajute pe ceilalți membri ai echipei. Este foarte greu uneori, dar este o abilitate soft pe care fiecare designer și dezvoltator ar trebui să o învețe.

Este destul de evident că aceste lucruri trebuie combinate împreună pentru a le transforma într-un flux de lucru de proiectare adecvat. Dar, ce instrument vă poate ajuta de fapt să oferiți feedback-ul?

• E- mail - Nu mă tem să spun că aceasta este încă cea mai comună platformă pentru a oferi feedback. Este foarte bine să-l folosiți, dacă urmați câteva reguli simple.
  • În primul rând, utilizați un singur fir de e-mail pentru feedback. Nu puneți fiecare modificare individuală a unui e-mail nou cu un subiect diferit.
  • În al doilea rând, creați lista de corecții. Încercați să vă așezați și să vă gândiți la fiecare modificare sau remediere pe care ați observat-o.
  • Și, în sfârșit, nu trimite o listă imensă deodată. Încercați să o descompuneți în liste individuale mai mici și să mergeți parte cu parte.

• Skype (Hangouts) - Vocea este un instrument foarte puternic pentru feedback. Puteți adresa și răspunde imediat la întrebări. Dar asigurați-vă că luați notițe și trimise mesajul de urmărire (e-mail) după apel.

• Instrumente de colaborare - Sincer să fiu, nu sunt un mare fan al instrumentelor de colaborare. Dar, au un mare beneficiu. Ele vă ajută să păstrați feedback-ul pe loc. A pune și a răspunde la întrebări este rapid și rămâne acolo pentru totdeauna.

Iată câteva dintre instrumentele grozave:

Adnotare pentru feedback:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Instrumente de colaborare:

• http://www.invisionapp.com/
• https://basecamp.com/

Concluzie

Stabiliți un sistem și un flux de lucru de proiectare UI/UX care să mențină deschise liniile de comunicare pe tot parcursul procesului de proiectare și dezvoltare. Acest lucru vă va permite să implementați idei grozave, să prognozați potențialele probleme și să acordați prioritate problemelor importante.

Dezvoltatorul și designerul pot crea lucruri grozave împreună, atâta timp cât sunt dispuși să lucreze în echipă . Învățați unii de la alții și proiectați tutoriale ca acesta!