Cum pot dezvoltatorii front-end să împuternicească munca designerului

Acest articol se adresează în mare parte ție, dragă dezvoltator front-end, căruia îi place să implementeze interfețele utilizator, dar se luptă să-și alinieze așteptările cu designerii cu care lucrezi. Poate că ești denumit „Dezvoltator UI” sau „Inginer UX”. Indiferent de titlul pe care îl purtați, slujba dvs. (și și a mea) constă în mai mult decât să dați viață fișierelor de design. De asemenea, suntem responsabili pentru completarea decalajului dintre fluxurile de lucru de proiectare și dezvoltare . Cu toate acestea, când traversăm acel pod, ne confruntăm cu provocări multiple.

Astăzi, aș dori să vă împărtășesc sfaturi practice care m-au ajutat să colaborez mai eficient cu designerii în ultimii ani.

Cred că este datoria noastră, în calitate de dezvoltatori de UI, nu numai să ajutăm designerii în călătoria lor de a învăța cum funcționează web-ul, ci și să cunoască realitatea lor și să învețe limba lor.

Înțelegerea antecedentelor designerilor UX

Majoritatea designerilor UX (numiți și designeri web sau designeri de produse) au făcut primii pași în lumea designului prin instrumente precum Photoshop și Illustrator. Poate că erau designeri grafici : scopul lor principal era să creeze logo-uri și identități de marcă și să proiecteze machete pentru reviste. Ar fi putut fi, de asemenea, designeri de marketing : imprimarea panourilor publicitare, proiectarea bannerelor și crearea de infografice.

Aceasta înseamnă că majoritatea designerilor UX și-au petrecut primele zile proiectând pentru tipărire, care este o paradigmă total diferită de mediul lor actual, ecranul. Aceasta a fost prima lor mare provocare. Când se ocupă de imprimare, designerilor le păsa de alinierea pixelilor, dar pe o zonă fixă ​​(hârtie). Nu au fost nevoiți să se confrunte cu un aspect dinamic (ecranele). Nici să se gândească la ruperea textului sau la stările de interacțiune pur și simplu nu făcea parte din munca lor. Designerii au avut, de asemenea, libertate completă asupra culorilor, imaginilor și tipografiei, fără constrângeri de performanță.

Din fericire, au existat multe eforturi din partea comunității de designeri UX autodidacți, pentru a preda elementele fundamentale de dezvoltare, a discuta dacă designerii ar trebui să învețe să codifice și să înțeleagă cum să realizeze cel mai bine transferul către dezvoltatori. Același lucru a fost valabil și pentru partea de dezvoltare (mai multe despre asta într-un minut). Cu toate acestea, există încă fricțiuni între cele două domenii.

Pe de o parte, designerii se plâng de fiecare dată când o implementare nu se potrivește cu designul lor sau se simt neînțeleși atunci când acestea sunt respinse de dezvoltatori fără o explicație clară. Pe de altă parte, dezvoltatorii ar putea considera de la sine înțeles că designerii știu ceva tehnic atunci când acest lucru ar putea să nu fie adevărat. Cred că toți putem face mai bine decât atât.

Îmbrățișarea unui nou mod de a gândi

Site-urile web și aplicațiile pe care le construim vor fi afișate pe o gamă largă de dimensiuni de ecran. Fiecare persoană le va folosi pe mai multe dispozitive. Scopul nostru comun este de a crea o experiență familiară în călătoriile lor.

Când noi, în calitate de dezvoltatori, ne gândim că designerii sunt pretențioși în privința alinierii pixelilor, trebuie să înțelegem de ce este asta. Trebuie să recunoaștem că este dincolo de fidelitate și consecvență. Este vorba despre suma tuturor părților care lucrează împreună. Este coeziune. Trebuie să o îmbrățișăm și să facem tot posibilul pentru a o realiza. Învățarea elementelor fundamentale ale principiilor de proiectare este un bun punct de plecare . Înțelegeți importanța selectării culorilor potrivite, cum funcționează ierarhia și de ce contează spațiul alb.

Notă : există un curs online cunoscut sub numele de „Design for Developers” și o carte numită „Refactoring UI” – ambele sunt grozave pentru a vă ajuta să începeți. Cu acestea, veți putea implementa interfețe cu utilizatorul cu un ochi atent pentru detalii și veți obține o pârghie semnificativă atunci când comunicați cu designerii.

Mărirea gradului de conștientizare a designerilor dvs

S-ar putea să iei de la sine înțeles că designerii cunosc web-ul la fel de mult ca tine. Ei bine, s-ar putea să nu. De fapt, nu trebuie! Este responsabilitatea noastră, ca dezvoltatori, să îi ținem la curent cu starea actuală a web-ului.

Am lucrat cu cele două părți ale acestui spectru: designeri care cred că orice poate fi construit (cum ar fi filtre complexe, comportamente noi de defilare sau intrări personalizate de formulare) fără să acorde un gând compatibilității browserului. Apoi, există designeri cu presupuneri despre „limitările scăzute ale web-ului” și doar presupun singuri că ceva este imposibil de implementat. Trebuie să le arătăm adevăratele posibilități ale designului web și să nu lăsăm limitările să le împiedice abilitățile.

Învață-i cod, nu cum să codifice

Acest lucru pare contradictoriu, dar suportați-mă: a ști cum să codificați este esențialul muncii unui dezvoltator. Lucrăm într-o industrie cu ritm rapid, cu lucruri noi care apar în fiecare zi. Ar fi o cerere ipocrită din partea noastră să cerem designerilor să învețe cum să codifice. Cu toate acestea, îi putem ajuta să înțeleagă codul.

Stați lângă designerul cu care lucrați timp de 15 minute și învățați-i cum pot vedea singuri dacă specificațiile unui element sunt corecte și cum să le schimbe. Mi se pare că Firefox Page Inspector este remarcabil de ușor de utilizat pentru asta.

În zilele noastre, este o bucurie să vizualizezi machete, să depanezi animațiile CSS și să modifici tipografia. Arată-le un loc de joacă cu coduri gata de utilizat, cum ar fi Codepen, pe care să-l exploreze. Nu trebuie să cunoască toate specificațiile CSS pentru a înțelege cum funcționează paradigma aspectului. Cu toate acestea, ei trebuie să știe cum sunt create și cum se comportă elementele pentru a-și împuternici munca de zi cu zi.

Includeți designeri în procesul de dezvoltare

Invitați designeri să vi se alăture la întâlnirea stand-up, să facă parte din procesul de asigurare a calității și să stea cu dvs. în timp ce perfecționați detaliile vizuale în implementările dvs. Acest lucru îi va face să înțeleagă constrângerile web și, destul de curând, vor recunoaște de ce o funcție necesită timp pentru a fi implementată.

Cereți designerilor să vă includă în procesul lor de proiectare

Îți vei da seama că fac mult mai mult decât „a face lucrurile frumoase”. Veți afla mai multe despre procesul de cercetare și despre modul în care se efectuează testarea utilizatorilor. Vei descoperi că pentru fiecare propunere de design pe care ți-o arată, mai multe alte studii au fost abandonate anterior. Când designerii solicită o schimbare, întrebați motivul din spatele acesteia, astfel încât să puteți afla mai multe despre deciziile luate . În cele din urmă, veți începe să înțelegeți de ce sunt pretențioși în privința spațiului alb și a alinierii și, sperăm, în curând veți fi și dvs.!

Consider că este esențial să tratăm dezvoltarea frontend ca pe o parte esențială a procesului de proiectare, iar designul ca pe o parte esențială a procesului de dezvoltare. Susținerea unei mentalități în care toată lumea are șansa de a fi implicată în ciclul de proiectare și dezvoltare ne va ajuta pe toți să înțelegem mai bine provocările fiecăruia și să creăm experiențe grozave.

Putem folosi instrumente diferite, dar trebuie să vorbim aceeași limbă

Acum că începem să înțelegem un pic mai bine fluxul de lucru al celuilalt, este timpul pentru următorul pas: să vorbim aceeași limbă.

Privind dincolo de editorul de coduri

Odată ce începeți să acordați atenție mediului înconjurător, veți fi mai bine echipat pentru a rezolva problemele. Cunoașteți mai bine afacerea și fiți dispus să ascultați ce au de spus designerii. Asta te va face un membru al echipei cu contribuții mai bogate la proiect. Colaborarea în domenii dincolo de expertiza noastră este cheia pentru a crea conversații semnificative și încredere reciprocă.

Utilizarea sistemelor UI ca contract

Cereți designerilor să vă împărtășească sistemul de design (și dacă nu folosesc unul, nu este niciodată prea târziu pentru a începe). Acest lucru vă va scuti de oboseala de a alege manual culorile folosite, de a afla marginile sau de a ghici un stil de text. Asigurați-vă că sunteți familiarizat cu sistemul UI la fel de mult ca și ei.

Este posibil să fiți deja familiarizați cu conceptul bazat pe componente. Cu toate acestea, unii designeri s-ar putea să nu-l percepă în același mod ca și dumneavoastră. Arată-le cum componentele te pot ajuta să construiești interfețe cu utilizatorul mai eficient. Răspândiți această mentalitate și, de asemenea, spuneți la revedere nume similare, dar nu-egale: antet vs erou, informații despre preț vs selector de preț . Când o parte a interfeței cu utilizatorul (alias „o componentă”) este construită, folosiți aceleași nume, astfel încât acestea să poată fi reflectate atât în ​​fișierele de design, cât și în fișierele de cod. Apoi, când cineva spune „Trebuie să modificăm widgetul de invitație la propunere”, toată lumea știe exact despre ce se vorbește.

Recunoașterea adevăratei surse a adevărului

În ciuda faptului că interfața cu utilizatorul este creată mai întâi în fișierele de proiectare, adevărata sursă a adevărului este pe partea de dezvoltare. La sfârșitul zilei, este ceea ce oamenii văd de fapt, nu? Când un design este actualizat, este o idee bună să lăsați o notă secundară despre stadiul său de dezvoltare, în special în proiectele în care sunt implicați un număr mare de oameni. Acest truc ajută la menținerea unei comunicări fluide, așa că nimeni (inclusiv dvs.) nu se întreabă: „ Este diferit de versiunea live. Este o eroare sau așa și așa nu a fost implementat încă? ”

Menținerea Datoriei Sub Control

Deci, știți totul despre datoria tehnică - se întâmplă atunci când costul implementării a ceva nou este mare din cauza unei scurtături pe care am luat-o în trecut pentru a respecta un termen limită. Același lucru se poate întâmpla și în ceea ce privește designul și noi îi numim datoria de proiectare .

Vă puteți gândi la asta astfel: cu cât inconsistența UX și UI este mai mare, cu atât datoria (tehnică și de design) este mai mare. Una dintre cele mai frecvente inconsecvențe este în a avea elemente diferite pentru a reprezenta aceeași acțiune. Acesta este motivul pentru care designul prost se reflectă de obicei în codul prost . Depinde de noi toți, atât ca designeri, cât și ca dezvoltatori, să ne tratăm serios datoria de proiectare.

A fi accesibil nu înseamnă că trebuie să fie urât

Sunt foarte încântat să văd că atât noi, ca dezvoltatori, cât și designeri, începem în sfârșit să aducem accesibilitatea în munca noastră. Cu toate acestea, mulți dintre noi încă cred că proiectarea de produse accesibile este dificilă sau ne limitează abilitățile și creativitatea.

Permiteți-mi să vă reamintesc că nu creăm un produs doar pentru noi înșine. Creăm un produs care să fie folosit de toți oamenii , inclusiv de cei care folosesc produsul în moduri diferite față de tine. Luați în considerare modul în care elementele individuale pot fi mai accesibile, păstrând în același timp fluxurile actuale de utilizatori clare și coerente.

De exemplu, dacă un designer crede cu adevărat că este necesară crearea unei intrări selectate îmbunătățite, stați alături de el și lucrați împreună pentru a o proiecta și implementa într-un mod accesibil, pentru a fi utilizată de o gamă largă de persoane cu abilități diverse.

Oferirea de feedback valoros designerilor

Este inevitabil ca întrebările să apară atunci când parcurgeți modelele. Totuși, acesta nu este un motiv pentru care să începi să te plângi de greșelile designerilor sau de ideile lor ambițioase. Designerii nu sunt acolo pentru a te conduce la minte, pur și simplu nu știu întotdeauna intuitiv de ce ai nevoie pentru a-ți face treaba. Adevărul este că, în trecut, nici tu nu știai despre aceste lucruri, așa că ai răbdare și îmbrățișează colaborarea ca modalitate de a învăța.

Cu cât feedback-ul este mai devreme, cu atât mai bine

Momentul pentru feedback este crucial. Fluxul de lucru cu feedback depinde foarte mult de structura proiectului, așa că nu există o soluție unică pentru el. Cu toate acestea, atunci când este posibil, cred că ar trebui să urmărim un flux de lucru de feedback periodic – începând din primele etape. Având această mentalitate de colaborare deschisă este modalitatea de a reduce posibilitatea unor reiterații mari neașteptate mai târziu pe drum. Rețineți că, cu cât mai târziu îi oferiți designerului primul feedback, cu atât costul va fi mai mare pentru a explora o nouă abordare, dacă este necesar.

Explicați ideile abstracte în termeni simpli

Îți amintești când am spus că performanța nu era o preocupare a joburilor anterioare ale designerilor? Nu te speria când nu știu cum să creeze SVG-uri optimizate pentru web. Când vă confruntați cu un design care necesită încărcare de o mulțime de fonturi diferite, explicați-le de ce ar trebui să minimizăm numărul de solicitări, poate chiar să profităm de Fonturile variabile. Pe lângă încărcarea mai rapidă, oferă și o experiență de utilizator mai consistentă. Cu excepția cazului în care designerii sunt dornici să învețe, evitați să folosiți prea mulți termeni tehnici atunci când explicați ceva. Puteți vedea asta ca pe o oportunitate de a vă îmbunătăți abilitățile de comunicare și de a vă clarifica gândurile.

Nu lăsați ipotezele să se transforme în decizii

Unele întrebări despre o specificație de design apar doar atunci când ne murdărim mâinile în cod. Pentru a accelera lucrurile, ne-am putea simți tentați să luăm decizii bazate pe presupunerile noastre. Te rog, nu. De fiecare dată când transformi o presupunere într-o decizie, riști încrederea pe care echipa de proiectare o acordă pentru a implementa UI. Oricând aveți îndoieli, contactați-vă și clarificați-vă îndoielile . Acest lucru le va arăta că îți pasă de rezultatul final la fel de mult ca și ei.

Nu faceți singuri soluții

Când vi se cere să implementați un design care este prea greu, nu spuneți „Este imposibil” și nu începeți să implementați singur o versiune alternativă ieftină a acestuia. Acest lucru provoacă imediat fricțiuni cu echipa de proiectare atunci când văd că proiectele lor nu au fost implementate conform așteptărilor. S-ar putea să reacționeze furios sau să nu spună nimic, dar să se simtă învinși sau frustrați. Toate acestea pot fi evitate dacă le explicăm de ce ceva nu este posibil, în termeni simpli și le propunem abordări alternative. Evitați comportamentele dogmatice și fiți deschis pentru a colabora la o nouă soluție .

Informați-le despre tehnicile de degradare grațioasă și îmbunătățire progresivă și construiți împreună o soluție ideală și o soluție de rezervă. De exemplu, putem îmbunătăți un aspect de la flexbox la CSS Grid. Acest lucru ne permite să respectăm scopul principal al unei caracteristici și, în același timp, să folosim cât mai bine tehnologiile web.

Când vine vorba de animații, să fim realiști: în adâncul sufletului ești la fel de încântat să implementezi următoarea animație wow , la fel de mult ca și designerii să o creeze. Diferența dintre noi și ei este că suntem mai conștienți de constrângerile web. Cu toate acestea, nu lăsați asta să vă limiteze propriile abilități! Web-ul evoluează rapid, așa că trebuie să folosim asta în favoarea noastră.

Data viitoare când vi se cere să aduceți la viață un prototip, încercați să nu-l respingeți în avans sau să faceți totul singur. Vedeți-o ca pe o oportunitate de a vă împinge. Animațiile sunt una dintre cele mai pretențioase părți ale dezvoltării web, așa că asigurați-vă că perfecționați fiecare cadru cheie cu designerul dvs. - în persoană sau prin partajarea unui link privat sincronizat.

Gândiți dincolo de starea ideală - Împreună

Iată chestia: nu este totul despre tine. Una dintre provocările designerilor este să-și înțeleagă cu adevărat utilizatorii și să prezinte modelele în cel mai atractiv mod de a le vinde Managerului de produs. Uneori ei uită de ceea ce este dincolo de starea ideală, iar dezvoltatorii uită și ei.

Pentru a evita apariția acestor lacune, aliniați cu designerii cerințele scenariului:

• Cel mai rău scenariu
  Un scenariu în care se întâmplă cele mai rele posibilități. Acest lucru îi ajută pe designeri să spună nu conținutului fix și să-l lase să fie fluid. Ce se întâmplă dacă titlul are mai mult de 60 de caractere sau dacă lista este prea lungă? Același lucru este valabil și pentru opusul, scenariul gol. Ce ar trebui să facă utilizatorul când lista este goală?
• Stări de interacțiune
  Browserul este mai mult decât trece cu mouse-ul și face clic în jur. Există o mulțime de stări: implicit, hover, focalizare, activ, dezactivare, eroare... iar unele dintre ele se pot întâmpla în același timp. Să le acordăm atenția cuvenită.
• Starea de încărcare
  Când construim lucruri la nivel local, s-ar putea să folosim imitații și să uităm că lucrurile durează de fapt să se încarce. Anunțați și designerii despre această posibilitate și arătați-le că sunt modalități de a-i face pe oameni să perceapă că lucrurile nu durează atât de mult să se încarce.

Luând în considerare toate aceste scenarii, veți economisi mult timp de mers înainte și înapoi în timpul fazei de dezvoltare.

Notă : Există un articol grozav al lui Scott Hurff despre cum să remediați interfețele de utilizator proaste, care ne va duce cu un pas mai aproape de un produs accesibil.

Acceptați cererile de modificare

Dezvoltatorii sunt cunoscuți pentru că nu sunt prea fericiți că cineva a găsit o eroare în codul lor - mai ales atunci când este o eroare de proiectare raportată de un designer. Există o mulțime de meme în jurul ei, dar ați reflectat vreodată cum acești bug-uri pot putrezi atât calitatea experienței, cât și relația voastră, atunci când aceste erori de design sunt înlăturate întâmplător? Se întâmplă încet, aproape ca și cum ai adormi. Puțin câte puțin, apoi toate deodată. Designerii ar putea începe să spună: „ Este doar un mic detaliu”, până când indiferența și resentimentele se acumulează și nu se spune nimic. Prejudiciul a fost deja făcut atunci.

Această situație este dublă: atât pentru colegii tăi, cât și pentru munca ta. Nu lăsa să se întâmple asta. Lucrează la ceea ce îți colorează reacția. Un designer care este „pretențios” poate fi incomod, dar poate fi și interpretarea superficială a atenției și entuziasmului unui inginer. Când cineva îți spune că implementarea ta nu este perfectă (încă), lasă-ți ego-ul deoparte și arată-i cum recunoști munca lor grea în rafinarea rezultatului final.

Înregistrează-te din când în când

Cu toții avem sarcini de îndeplinit și foi de parcurs de finalizat. Cu toate acestea, unele dintre cele mai bune lucrări se întâmplă în mod off the record. Nu va fi conectat la panoul TO DO și este în regulă. Dacă găsiți un designer cu care aveți o relație, intrați pe furiș în spațiul lui de lucru și explorați împreună noi experimente. Nu știi niciodată ce poate veni de acolo!

Concluzie

Când ești dispus să înveți de la echipa de proiectare, înveți și moduri diferite de a gândi. Îți vei evolua mentalitatea de colaborare cu alte domenii din experiența ta, în timp ce îți vei rafina ochiul pentru a crea experiențe noi. Fiți acolo pentru a ajuta și fiți deschiși către învățare, pentru că împărtășirea este ceea ce ne face mai buni.

Acest articol nu ar fi posibil fără feedback-ul multor oameni grozavi. Vreau să le mulțumesc cu recunoștință designerilor Jasmine Meijer și Margarida Botelho pentru că m-au ajutat să împărtășesc o perspectivă echilibrată despre neînțelegerile dintre designeri și dezvoltatori.

Lectură similară pe SmashingMag:

• „Design for Developers” de Mason Gentry
• „Lucrând împreună: cum pot comunica designerii și dezvoltatorii pentru a crea proiecte mai bune” de Rachel Andrew
• „Cum pot dezvoltatorii de front-end să contribuie la reducerea decalajului dintre designeri și dezvoltatori” de Stefan Kaltenegger
• „La ce podcasturi ar trebui să asculte designerii și dezvoltatorii web?” de Ricky Onsman