Ako vytvoriť príručku so štýlom: Začnite s rámcom používateľského rozhrania

Otázky a odpovede s návrhárom spoločnosti AdXoll UX o tom, prečo sme to urobili a čo sme sa naučili

Tento príspevok na blogu je prvý zo série, ktorý zaznamenáva cestu sprievodcu štýlmi od jeho vytvorenia po poskytnutie vyspelého rámca používateľského rozhrania pre naše tímy a prípadné destilácie jedinečného hlasu a tónu pre naše produkty.

Ahoj! Som Arya Srinivasan, UX výskumník v AdRoll. Sadol som si s Masonom Leeom, dizajnérom UX pracujúcim na produkte AdRoll v natívnom rozhraní API pre reklamy, aby som hovoril o jeho práci pri vývoji sprievodcu štýlom AdRoll.

Arya: Prečo ste začali veci, prečo ste začali projekt sprievodcu štýlom? Aký bol problém, ktorý treba vyriešiť?

Mason: Problémom bola nekonzistentnosť v dizajne, a to v rámci produktov aj v rámci jedného produktu. Napríklad tlačidlo, ktoré by malo vyzerať všade rovnako, ale v skutočnosti sa líši farbou, hmotnosťou písma a štýlom orámovania.

Tlačidlá vyzerajú inak v simulátoroch jednotlivých dizajnérov a v našich aplikáciách.

Rýchly rast siete AdRoll znamenal, že sme sa sústredili na rýchlosť. Teraz sme väčšia spoločnosť s viacerými produktmi, preto som ako dizajnér presvedčený, že je dôležité, aby sme zdôraznili konzistentnosť spôsobu prezentácie našich produktov: prostredníctvom dizajnu.

Aby sme sa zamerali na dizajn, najprv sme potrebovali odstrániť existujúce nezrovnalosti. Dizajnéri UX sa tu zvyčajne zameriavajú na jeden alebo dva produkty, takže s cieľom prinútiť náš tím, aby premýšľal o dizajne vo všetkých produktoch, usporiadal som týždenné stretnutie „UI Smackdown“, aby som prediskutoval pokyny pre používateľské rozhranie.

Na každom stretnutí sme sa zaoberali nezrovnalosťami v dizajne a rozhodli sme sa pre jeden dizajn. Po niekoľkých schôdzach sa ma dizajnéri stále pýtali na správnu farbu alebo výplň atď. Potrebovali sme centrálny dokument so všetkými odpoveďami, takže som vytvoril náš UI Framework v aplikácii Sketch ako prostriedok pre dizajnérov. Kedykoľvek si uvedomíme, že chýba komponent alebo ak chceme zahrnúť nový komponent, diskutujeme o ňom a pridáme ho do hlavného súboru UI Framework.

Arya: Spomenuli ste, že chcete, aby bol AdRoll spoločnosťou zameranou na dizajn - čo tým myslíte?

Mason: Chcem, aby spoločnosť AdRoll dala návrh do popredia, aby sa stal konkurenčným diferenciátorom - zákazníci ho považujú za dobre navrhnutý produkt, ktorý skutočne rieši ich potreby.

Arya: Aké boli vaše bezprostredné ciele pre sprievodcu štýlmi? Máte pre tento projekt dlhodobú víziu?

Mason: Mojím krátkodobým cieľom je dosiahnuť konzistenciu dizajnu medzi dizajnérmi štandardizáciou našich komponentov používateľského rozhrania. Chcem, aby dizajnéri pri rozprávaní dizajnu hovorili rovnakým jazykom. Napríklad v modálnom alebo rozbaľovacom zozname inžinieri stavajú na základe toho, ako návrhár navrhuje. Ak sú konštrukčné prvky medzi dizajnérmi rôzne, inžinieri urobia rovnaký prvok rôznymi spôsobmi.

Mojím strednodobým cieľom je definovať tento štýl v našom kóde v „RollUp“, internej knižnici komponentov používateľského rozhrania AdRoll. Ak máme preddefinovanú šablónu so štýlmi, musia ju všetci naši inžinieri skopírovať. Návrhári a inžinieri hovoria rovnakým jazykom.

Arya: Stretli ste sa pri vytváraní sprievodcu štýlom? Ako ste ich vyriešili?

Mason: Jednou z najväčších prekážok bolo získanie buy-inu od ľudí z produktových tímov. S cieľom zapojiť všetkých som usporiadal stretnutie s jasným zoznamom bodov programu, ktoré sa majú pokryť. Uviedol som nekonzistencie v dizajne, napríklad rôzne rozbaľovacie ponuky medzi výrobkami. Poskytovanie vizuálnych dôkazov vedie ku konverzáciám a nakoniec sa ľudia starajú o svoj produkt a chcú konzistentnosť.

Ďalšou výzvou bolo rozhodovanie o pravidlách. Keď hovoríme o štandardizácii komponentu, mal by byť uplatniteľný kdekoľvek, vo všetkých súvislostiach. Musíte myslieť na každý prípad. Komponent musí byť flexibilný, ale zároveň dostatočne funkčný, aby bol ľahko použiteľný, použiteľný a použiteľný.

Tu je príklad flexibility nášho sprievodcu štýlmi. Naše počiatočné rozhodnutie o vypchaní v tomto rozbaľovacom zozname geotargeting bolo príliš veľké, preto sme v tomto prípade použitia revidovali príručku so štýlmi.Pred (vľavo), po (vpravo)

Vlastne chcem vyzvať ešte jednu výzvu! Pomenovanie môže byť ťažké. Ako som už povedal, chcem, aby dizajnéri a inžinieri hovorili rovnakým jazykom, je však potrebné postupovať opatrne. Pre niečo také jednoduché, ako je rozbaľovacia ponuka, máme v skutočnosti niekoľko variácií (jedna so začiarkavacími políčkami, druhá so začiarkavacími políčkami a textovým blokom a druhá je štandardná rozbaľovacia ponuka). Ako pomenujeme tri rôzne rozbaľovacie zoznamy, takže existuje všeobecná predstava o tom, čo je to?

Sémantika je náročná; naše pomenovanie musí mať zmysel. Pri rozhodovaní o mene sme využili niekoľko vynikajúcich nástrojov spolupráce. Napríklad, Wake nám pomohol zhromaždiť všetky otvorené otázky a problémy, diskutovať o riešeniach, monitorovať rozhodnutia UI Smackdown a pokračovať v konverzácii s väčším tímom produktov prostredníctvom integrácie so spoločnosťou Slack.

Ako sme použili Wake, aby sme prediskutovali nezrovnalosti v používateľskom rozhraní a spolupracovali na pravidlách komponentov.

Arya: Existuje niečo jedinečné v používateľskom rozhraní služby AdRoll, ktoré ste museli zvážiť pri vytváraní sprievodcu štýlom?

Mason: Náš dashboard je veľmi náročný na dáta. Tok vytvárania kampaní navyše inzerentom ponúka množstvo páčok, ktoré môžu ťahať. S cieľom uspokojiť potreby menej skúsených inzerentov sa usilujeme o účinné predvolené nastavenia. V našich produktoch majú komponenty zložité funkcie, ale vyzerajú jednoducho a ľahko sa používajú.

Arya: Existujú nejaké veci, ktoré by ste vedeli, keď ste začali vytvárať sprievodcu štýlom?

Mason: Kiež by som mal hlbšie pochopenie toho, ako všetky naše výrobky fungujú od začiatku. Napríklad sa delíme o to, ako náš príslušný produkt funguje na našom týždennom stretnutí s kritikou dizajnu, takže viem, ako SendRoll (náš produkt na preposielanie e-mailov) funguje na povrchu, ale nemám hlboké znalosti o SendRoll, ako to robí jeho dizajnér. Myslím si, že lepšie porozumenie produktu určite pomôže pri práci na príručke so štýlmi, pretože potom lepšie rozumiem všetkým prípadovým prípadom použitia.

Arya: Aký je najlepší spôsob, ako dosiahnuť spoločné pochopenie procesu návrhára a jeho produktu?

Mason: Aj keď sa skutočne zameriavame na prepravu našich produktov, robíme dobrú prácu, keď sa na našom týždennom stretnutí s kritikou dizajnu delíme o náš návrhový proces. Myslím, že môžeme lepšie uzavrieť slučku po každom stretnutí - ako návrhár začlenil spätnú väzbu zo stretnutia? Po odoslaní a použití produktu našimi inzerentmi by sme mohli zdieľať aj to, ako inzerenti používajú produkty na základe štatistík z analýzy.

Arya: Boli ste pri práci na tomto projekte nejaké zdroje, ktoré ste uviedli?

Mason: Čítal som atómový dizajn od Brada Frosta, ktorý som študoval online, a rozprával som sa s inými návrhármi UX na MeetUps. Ak si myslíte, že konkrétna spoločnosť praktizuje dobrý dizajn, je pravdepodobné, že niekde online hovorili o svojom sprievodcovi štýlom.

Arya: Aký je stav nášho sprievodcu štýlmi?

Mason: Zachytil som a prehodnotil všetky prvky používateľského rozhrania, ktoré používame v našich rôznych produktoch, a zoskupil som ich do základov, komponentov, vzorov a stránok, ktoré budú slúžiť ako zdroj pravdy pre naše návrhy používateľského rozhrania.

Na Dribbble si môžete pozrieť prvky používateľského rozhrania nadácie a komponentov. Ak ste oboznámení s atómovým dizajnom, zoskupil som úrovne „atóm“ a „molekula“ do toho, čomu hovorím „komponenty“. Napríklad kombinácia názvu formulára a vstupu uľahčuje ostatným návrhárom ľahko skopírovať vyplnený formulár. lúka.

Vďaka za prečítanie!

Pri rozvíjaní nášho sprievodcu štýlmi si pozrite tieto nadchádzajúce témy:

  • Ako UI Framework zjednodušuje spoluprácu
  • Vývoj nových štýlov založených na UI Framework
  • Ako vytvoriť webovú stránku Style Style
  • Cesta k nájdeniu nášho hlasu a tónu