Cum să creați un Ghid de stil: începeți cu un UI Framework

Întrebări și întrebări cu Designerul UX al AdRoll despre motivul pentru care l-am făcut și ce am învățat

Această postare pe blog este prima dintr-o serie care cronizează călătoria ghidului de stil, de la crearea sa, oferind un cadru UI matur pentru echipele noastre și distilând în cele din urmă o voce și un ton unice pentru produsele noastre.

Bună! Sunt Arya Srinivasan, cercetător UX la AdRoll. M-am așezat alături de Mason Lee, un UX Designer care lucrează la produsul API API al anunțurilor native pentru AdRoll, pentru a vorbi despre munca sa dezvoltând ghidul de stil al lui AdRoll.

Arya: Pentru a începe lucrurile, de ce ați început proiectul de ghid de stil? Care a fost problema care avea nevoie de rezolvare?

Mason: Problema era inconsistența proiectării, atât pe produse cât și în cadrul unui singur produs. De exemplu, un buton care ar trebui să arate la fel peste tot, dar de fapt variază în ceea ce privește culoarea, greutatea fontului și stilul de bord.

Butoanele arată diferit în modelele proiectanților individuali și în aplicațiile noastre.

Creșterea rapidă a AdRoll a însemnat că ne-am concentrat pe viteză. Acum suntem o companie mai mare cu mai multe produse, așa că, în calitate de proiectant, cred că este important pentru noi să subliniem consistența în modul în care ne prezentăm produsele: prin design.

Pentru a ne concentra pe proiectare, a trebuit mai întâi să remediem inconsecvențele existente. Proiectanții UX de aici se concentrează în mod obișnuit pe unul sau două produse, așa că, pentru a determina echipa noastră să se gândească la designul tuturor produselor, am înființat o întâlnire săptămânală „UI Smackdown” pentru a discuta liniile directoare ale UI.

În fiecare întâlnire, am analizat inconsecvențele proiectării pentru a decide cu privire la un singur design. După câteva întâlniri, designerii încă m-au întrebat despre culoarea sau umplutura corectă, etc. Aveam nevoie de un document central cu toate răspunsurile, așa că am construit cadrul nostru UI în Sketch ca resursă pentru designeri. Ori de câte ori ne dăm seama că lipsește o componentă sau dorim să includem o componentă nouă, o discutăm și o adăugăm la fișierul principal UI Framework.

Arya: Ai menționat că vrei ca AdRoll să fie o companie centrată în design - ce vrei să spui prin asta?

Mason: Vreau ca AdRoll să pună proiectul în prim plan, astfel încât să fie un diferențiator competitiv - recunoscut de clienți ca un produs bine conceput care să le rezolve cu adevărat nevoile.

Arya: Care au fost obiectivele tale imediate pentru ghidul de stil? Aveți o viziune pe termen lung pentru acest proiect?

Mason: Obiectivul meu pe termen scurt este să am coerența designului între designeri, prin standardizarea componentelor UI. Vreau ca designerii să vorbească aceeași limbă atunci când vorbesc design. De exemplu, într-un modal sau derulant, inginerii construiesc în funcție de cum sugerează proiectantul. Dacă elementele de proiectare sunt diferite între proiectanți, inginerii vor face același element în moduri diferite.

Obiectivul meu intermediar este să definim acest stil în codul nostru în „RollUp”, biblioteca de componente interne a utilizatorului AdRoll. Dacă avem o foaie de stil predefinită, tot inginerii noștri trebuie să facă este să o copieze. Designerii și inginerii pot vorbi aceeași limbă.

Arya: Ați întâmpinat probleme în timp ce creați ghidul de stil? Cum le-ai rezolvat?

Mason: Una dintre cele mai mari obstacole a fost achiziționarea de la oameni din echipele de produse. Pentru a-i implica pe toți, am înființat o întâlnire cu o listă clară de subiecte de pe ordinea de zi. Am prezentat neconcordanțe de proiectare, cum ar fi variază meniurile derulante între produse. Furnizarea de dovezi vizuale declanșează conversații, iar în final, oamenii le pasă de produsul lor și își doresc consecvența.

O altă provocare a fost decizia cu privire la reguli. Când vorbim despre standardizarea unei componente, aceasta ar trebui să fie aplicabilă oriunde, în orice context. Trebuie să te gândești la fiecare caz în parte. Componenta trebuie să fie flexibilă, dar în același timp suficient de completă pentru a fi ușor utilizabilă, consumabilă și aplicabilă.

Iată un exemplu de flexibilitate a ghidului nostru de stil. Decizia noastră inițială pentru umplerea acestui drop-out geotargeting a fost prea mare, așa că am revizuit ghidul de stil pentru a da socoteală pentru acest caz de utilizare.Înainte (stânga), După (dreapta)

De fapt vreau să mai sun o provocare! Denumirea poate fi dificilă. Așa cum am mai spus, vreau ca designerii și inginerii să vorbească aceeași limbă, dar acest lucru trebuie făcut cu atenție. Pentru ceva la fel de simplu ca un dropdown, avem de fapt mai multe variante (una cu casete de selectare, alta cu casete de selectare și bloc de text, iar alta este un meniu derulant standard). Cum numim trei meniuri diferite, astfel încât să existe o înțelegere universală care este?

Semantica este provocatoare; numirea noastră trebuie să aibă sens. Am folosit câteva instrumente frumoase de colaborare pentru a obține un consens atunci când ne hotărâm asupra unui nume. De exemplu, Wake ne-a ajutat să colectăm toate întrebările și problemele deschise, să discutăm soluții, să monitorizăm deciziile UI Smackdown și să continuăm conversația cu echipa de produse mai mare printr-o integrare cu Slack.

Cum am folosit Wake pentru a discuta inconsecvențele UI și a colabora la regulile componente.

Arya: Există ceva unic în ceea ce privește UI-ul AdRoll, pe care trebuia să-l iei în considerare la crearea ghidului de stil?

Mason: Tabloul de bord este foarte greu de dat. În plus, fluxul de creare a campaniei oferă agenților de publicitate o mulțime de pârghii pentru a atrage. Pentru a răspunde nevoilor agenților de publicitate mai puțin experimentați, ne propunem să avem setări implicite efective. În produsele noastre, componentele au funcții complexe, dar arată simplu și sunt ușor de utilizat.

Arya: Există unele lucruri pe care ți-ai dori să le știi când ați început să creați ghidul de stil?

Mason: Mi-aș dori să am o înțelegere mai profundă a modului în care toate produsele noastre funcționează din start. De exemplu, împărtășim modul în care funcționează produsul respectiv în cadrul reuniunii noastre critice de proiectare săptămânală, așa că știu cum funcționează SendRoll (produsul nostru de retargeting de e-mail) la suprafață, dar nu am cunoștințele profunde despre SendRoll pe care le face designerul. Cred că această înțelegere nuanțată a produsului ajută cu siguranță atunci când lucrez la ghidul de stil, deoarece am o mai bună înțelegere a tuturor cazurilor de utilizare potențiale.

Arya: Deci, care este cea mai bună modalitate de a realiza această înțelegere comună a procesului unui designer și a produsului lor?

Mason: Chiar dacă ne-am concentrat cu adevărat pe expedierea produselor noastre, facem o treabă bună de a împărtăși procesul nostru de proiectare în cadrul reuniunii noastre de critici de proiectare săptămânale. Cred că putem fi mai buni despre închiderea buclei după fiecare întâlnire - cum a încorporat proiectantul feedback-ul de la ședință? Odată ce produsul este expediat și utilizat de către agenții de publicitate, am putea, de asemenea, să împărtășim modul în care agenții de publicitate utilizează produsele pe baza informațiilor din analitice.

Arya: Au existat resurse la care v-ați referit în timp ce lucrați la acest proiect?

Mason: Am citit Atomic Design de Brad Frost, cercetat online și am vorbit cu alți designeri UX de la MeetUps. Dacă credeți că o anumită companie practică un design bun, atunci este destul de probabil să fi vorbit despre ghidul lor de stil undeva online.

Arya: Care este starea ghidului nostru de stil?

Mason: am capturat și am revizuit toate elementele UI pe care le folosim în diferitele noastre produse și le-am grupat în fundații, componente, modele și pagini, care vor servi drept sursă de adevăr pentru design-urile noastre de utilizare.

Puteți consulta elementele UI de bază și componente pe Dribbble. Dacă sunteți familiarizat cu Atomic Design, am grupat nivelurile de „atom” și „moleculă” în ceea ce numesc „componente”. De exemplu, combinarea titlului formularului și a intrării facilitează copierea cu ușurință a unui formular completat camp.

Multumesc pentru citit!

Urmăriți aceste subiecte viitoare pe măsură ce dezvoltăm ghidul nostru de stil:

  • Modul în care un cadru UI simplifică colaborarea
  • Dezvoltarea de noi foi de stil bazate pe UI Framework
  • Cum să construiți un site Web de ghid de stil
  • Călătoria către găsirea vocii și tonului nostru