Jak vytvořit průvodce stylem: Začněte s UI Framework

Otázky a odpovědi s návrhářem UX AdRoll o tom, proč jsme to udělali a co jsme se naučili

Tento blogový příspěvek je první v řadě, který zaznamenává cestu průvodce stylem od jeho vytvoření až po vytvoření vyspělého uživatelského rozhraní pro naše týmy a nakonec destilaci jedinečného hlasu a tónu pro naše produkty.

Ahoj! Jsem Arya Srinivasan, výzkumná pracovnice UX ve společnosti AdRoll. Posadil jsem se s Masonem Lee, návrhářem UX, který pracuje na produktu API nativních reklam AdRoll, abych si promluvil o jeho práci na vývoji průvodce stylem AdRoll.

Arya: Proč jste začali věci, proč jste zahájili projekt průvodce stylem? Jaký problém byl třeba vyřešit?

Mason: Problémem byla nekonzistentnost designu, a to jak u produktů, tak u jednoho produktu. Například tlačítko, které by mělo vypadat všude stejně, ale ve skutečnosti se liší v barvě, hmotnosti písma a stylu ohraničení.

Tlačítka vypadají jinak v simulátorech jednotlivých designérů a v našich aplikacích.

Rychlý růst AdRoll znamenal, že jsme se soustředili na rychlost. Nyní jsme větší společností s více produkty, takže se jako designér domnívám, že je pro nás důležité zdůraznit konzistenci v tom, jak naše produkty prezentujeme: prostřednictvím designu.

Abychom se zaměřili na design, nejprve jsme potřebovali opravit existující nesrovnalosti. Designéři UX se zde obvykle zaměřují na jeden nebo dva produkty, takže s cílem přimět náš tým, aby přemýšlel o designu ve všech produktech, uspořádal jsem týdenní setkání „UI Smackdown“, abych prodiskutoval pokyny pro uživatelské rozhraní.

Na každém setkání jsme se podívali na nesrovnalosti v designu, abychom mohli rozhodnout o jediném návrhu. Po několika schůzkách se mě designéři stále ptali na správnou barvu nebo výplň atd. Potřebovali jsme centrální dokument se všemi odpověďmi, takže jsem vytvořil náš UI Framework v aplikaci Sketch jako prostředek pro designéry. Kdykoli si uvědomíme, že chybí komponenta nebo chceme přidat novou komponentu, probereme ji a přidáme ji do hlavního souboru UI Framework.

Arya: Zmínil jsi, že chceš, aby byl AdRoll společností zaměřenou na design - co tím myslíš?

Mason: Chci, aby AdRoll postavil design do popředí tak, aby se jednalo o konkurenční diferenciaci - zákazníky uznali jako dobře navržený produkt, který skutečně řeší jejich potřeby.

Arya: Jaké byly vaše bezprostřední cíle pro průvodce stylem? Máte pro tento projekt dlouhodobou vizi?

Mason: Mým krátkodobým cílem je dosáhnout konzistence designu mezi designéry standardizací našich komponent uživatelského rozhraní. Chci, aby designéři mluvili stejným jazykem, když mluví design. Například v modálním nebo rozbalovacím seznamu inženýři staví na základě toho, jak návrhář navrhuje. Pokud jsou konstrukční prvky mezi designéry odlišné, inženýři udělají stejný prvek různými způsoby.

Mým střednědobým cílem je definovat tento styl v našem kódu v „RollUp“, interní knihovně součástí AdRoll. Pokud máme předdefinovanou šablonu stylů, musí ji naši inženýři zkopírovat. Designéři a inženýři mohou mluvit stejným jazykem.

Arya: Při vytváření průvodce stylem jste narazili na nějaké problémy? Jak jste je vyřešili?

Mason: Jednou z největších překážek bylo získání buy-inu od lidí napříč produktovými týmy. Abych se zapojil všechny, uspořádal jsem schůzku s jasným seznamem bodů pořadu jednání. Představil jsem nesrovnalosti v designu, jako jsou různé rozbalovací nabídky mezi produkty. Poskytování vizuálních důkazů vyvolává rozhovory a nakonec se lidé starají o svůj produkt a chtějí soudržnost.

Další výzvou bylo rozhodování o pravidlech. Když mluvíme o standardizaci komponenty, měla by být použitelná kdekoli, v každém kontextu. Musíte myslet na každý případ okraje. Komponenta musí být flexibilní, ale zároveň musí být dostatečně kompletní, aby byla snadno použitelná, spotřební a použitelná.

Zde je příklad flexibility našeho průvodce stylem. Naše počáteční rozhodnutí o vycpávce v tomto rozbalovacím seznamu geotargeting bylo příliš velké, proto jsme přepracovali průvodce stylem tak, aby zohledňoval tento případ použití.Před (vlevo), Po (vpravo)

Vlastně chci vyzvat ještě jednu výzvu! Pojmenování může být obtížné. Jak jsem již řekl, chci, aby designéři a inženýři mluvili stejným jazykem, ale je třeba to udělat opatrně. Pro něco tak jednoduchého, jako je rozevírací nabídka, máme ve skutečnosti několik variant (jedna se zaškrtávacími políčky, druhá se zaškrtávacími políčky a textovým blokem a druhá je standardní rozbalovací nabídka). Jak můžeme pojmenovat tři různá rozevírací seznamy, takže existuje univerzální chápání toho, který je?

Sémantika je náročná; naše pojmenování musí dávat smysl. Při rozhodování o jménu jsme použili několik skvělých nástrojů pro spolupráci, abychom dosáhli konsensu. Například, Wake nám pomohl shromáždit všechny otevřené otázky a problémy, diskutovat o řešeních, sledovat rozhodnutí UI Smackdown a pokračovat v konverzaci s větším týmem produktů prostřednictvím integrace se Slackem.

Jak jsme použili Wake, abychom diskutovali o nesrovnalostech uživatelského rozhraní a spolupracovali na pravidlech komponent.

Arya: Existuje něco jedinečného na uživatelském rozhraní AdRoll, které jste museli vzít v úvahu při vytváření průvodce stylem?

Mason: Náš dashboard je velmi datově náročný. Tok vytváření kampaní navíc inzerentům dává spoustu pák, které mohou vytáhnout. Abychom vyhověli potřebám méně zkušených inzerentů, usilujeme o efektivní výchozí nastavení. V našich produktech mají komponenty komplexní funkce, ale vypadají jednoduše a snadno se používají.

Arya: Existují nějaké věci, které byste chtěli vědět, když jste začali vytvářet průvodce stylem?

Mason: Přál bych si, abych měl hlubší pochopení toho, jak všechny naše výrobky fungují od začátku. Například sdílíme, jak náš příslušný produkt funguje na našem týdenním setkání s kritikou designu, takže vím, jak SendRoll (náš produkt pro přesměrování e-mailů) funguje na povrchu, ale nemám hluboké znalosti o SendRoll, že to designér dělá. Myslím, že nuanční porozumění produktu rozhodně pomáhá při práci na průvodci stylem, protože pak lépe rozumím všem možným případům použití.

Arya: Jaký je nejlepší způsob, jak dosáhnout společného porozumění návrhářského procesu a jeho produktu?

Mason: I když jsme se opravdu zaměřili na přepravu našich produktů, děláme dobrou práci, když sdílíme náš návrhový proces na našem týdenním setkání s kritikou designu. Myslím, že můžeme být lepší v uzavírání smyčky po každém setkání - jak návrhář začlenil zpětnou vazbu ze setkání? Jakmile je produkt dodán a používán našimi inzerenty, můžeme také sdílet, jak inzerenti používají produkty na základě statistických údajů z analýzy.

Arya: Byli jste při práci na tomto projektu nějaké zdroje, o kterých jste mluvili?

Mason: Četl jsem Atomic Design od Brada Frosta, zkoumal jsem online a mluvil jsem s dalšími návrháři UX na MeetUps. Pokud si myslíte, že konkrétní společnost praktikuje dobrý design, je pravděpodobné, že někde on-line hovořili o svém průvodci stylem.

Arya: Jaký je stav našeho průvodce stylem?

Mason: Zachytil jsem a přehodnotil všechny prvky uživatelského rozhraní, které používáme v našich různých produktech, a seskupil je do základů, komponent, vzorů a stránek, které budou sloužit jako zdroj pravdy pro naše návrhy uživatelského rozhraní.

Na Dribbble si můžete prohlédnout prvky uživatelského rozhraní základu a komponenty. Pokud jste obeznámeni s atomovým designem, seskupil jsem úrovně „atom“ a „molekula“ do toho, čemu říkám „komponenty“. Například kombinace názvu formuláře a vstupu usnadňuje ostatním návrhářům snadno zkopírovat vyplněný formulář. pole.

Děkuji za přečtení!

Při vývoji našeho průvodce stylem si dejte pozor na tato nadcházející témata:

  • Jak UI Framework zjednodušuje spolupráci
  • Vývoj nových stylů stylů založených na UI Framework
  • Jak vytvořit web Style Guide
  • Cesta k nalezení našeho hlasu a tónu