Sådan opretter du en stilguide: Start med en UI-ramme

Spørgsmål og svar med AdRolls UX Designer om, hvorfor vi gjorde det, og hvad vi lærte

Dette blogindlæg er det første i en serie, der kronikerer stilguidens rejse, fra dets oprettelse, til at give en moden brugergrænseflade for vores teams, og til sidst destillerer en unik stemme og tone til vores produkter.

Hej! Jeg er Arya Srinivasan, en UX-forsker på AdRoll. Jeg satte mig sammen med Mason Lee, en UX-designer, der arbejdede med AdRolls native ads API-produkt, for at tale om hans arbejde med at udvikle AdRolls stilguide.

Arya: Hvorfor startede du projektet med stilguide for at sparke tingene væk? Hvad var problemet, der var nødvendigt at løse?

Frimurer: Problemet var designkonsekvens, både på tværs af produkter og inden for et enkelt produkt. For eksempel kan en knap, der skal se den samme overalt ud, men faktisk varierer i farve, skriftvægt og kantstil.

Knapper ser anderledes ud i individuelle designermoder og vores applikationer.

AdRolls hurtige vækst betød, at vi var fokuseret på hastighed. Vi er nu en større virksomhed med flere produkter, så som designer tror jeg det er vigtigt for os at understrege konsistensen i, hvordan vi præsenterer vores produkter: gennem designet.

For at fokusere på design var vi først nødt til at løse eksisterende uoverensstemmelser. UX-designere her fokuserer typisk på et eller to produkter, så for at få vores team til at tænke over designet på tværs af alle produkter, oprettede jeg et ugentligt "UI Smackdown" -møde for at diskutere UI-retningslinjer.

I hvert møde kiggede vi på uoverensstemmelser i design til at beslutte et enkelt design. Efter et par møder spurgte designere mig stadig om den rigtige farve eller polstring osv. Vi havde brug for et centralt dokument med alle svarene, så jeg byggede vores UI Framework i Sketch som en ressource for designere. Hver gang vi er klar over, at der er en manglende komponent eller ønsker at inkludere en ny komponent, diskuterer vi den og tilføjer den til master UI Framework-filen.

Arya: Du nævnte, at du ønsker, at AdRoll skal være et designcentrisk firma - hvad mener du med det?

Frimurer: Jeg vil have, at AdRoll skal sætte design i spidsen, så det er en konkurrencedygtig differentier - anerkendt af kunderne som et godt designet produkt, der virkelig løser deres behov.

Arya: Hvad var dine øjeblikkelige mål for stilguiden? Har du en længerevarende vision for dette projekt?

Frimurer: Mit kortsigtede mål er at have designkonsistens mellem designere ved at standardisere vores UI-komponenter. Jeg vil have, at designere skal tale det samme sprog, når de taler design. I en modal eller dropdown bygger for eksempel ingeniører baseret på, hvordan designeren foreslår. Hvis designelementerne er forskellige mellem designere, vil ingeniører gøre det samme element forskellige måder.

Mit midtvejs mål er at få denne stil defineret i vores kode i "RollUp", AdRolls interne UI-komponentbibliotek. Hvis vi har et foruddefineret typografiark, skal alle vores ingeniører gøre, at kopiere det. Designere og ingeniører kan tale det samme sprog.

Arya: Har du opstået nogen problemer, mens du oprettede stilguiden? Hvordan løste du dem?

Frimurer: En af de største forhindringer var at få buy-in fra mennesker på tværs af produktteam. For at få alle involveret oprettede jeg et møde med en klar liste over dagsordenspunkter, der skal dækkes. Jeg præsenterede design uoverensstemmelser, såsom forskellige dropdown-menuer mellem produkter. Tilvejebringelse af visuel dokumentation udløser samtaler, og til sidst bryr folk sig om deres produkt og ønsker konsistens.

En anden udfordring var at beslutte reglerne. Når man taler om standardisering af en komponent, skal den være anvendelig overalt i enhver sammenhæng. Du skal tænke på alle kanter. Komponenten skal være fleksibel, men samtidig funktionen komplet nok, så den er let brugbar, forbrugsbar og anvendelig.

Her er et eksempel på vores stilguide fleksibilitet. Vores oprindelige beslutning om polstring i dette dropdown-felt for geografisk målretning var for stor, så vi reviderede stilguiden til at tage højde for denne brugssag.Før (venstre), Efter (højre)

Jeg vil faktisk ringe til en udfordring mere! Navngivningen kan være vanskelig. Som jeg sagde før, vil jeg, at designere og ingeniører skal tale det samme sprog, men dette skal gøres omhyggeligt. For noget så enkelt som en dropdown har vi faktisk flere variationer (en med afkrydsningsfelter, en anden med afkrydsningsfelter og en tekstblok, og en anden er en standard dropdown-menu). Hvordan nævner vi tre forskellige dropdowns, så der er en universel forståelse af, hvilke er hvilke?

Semantikken er udfordrende; vores navngivning skal være fornuftig. Vi brugte nogle seje samarbejdsværktøjer for at få en enighed, når vi beslutter os for et navn. For eksempel hjalp Wake os med at indsamle alle åbne spørgsmål og problemer, diskutere løsninger, overvåge UI Smackdown-beslutningerne og fortsætte samtalen med det større produktteam gennem en integration med Slack.

Hvordan vi brugte Wake til at diskutere UI-uoverensstemmelser og samarbejde om komponentregler.

Arya: Er der noget unikt ved AdRolls brugergrænseflade, som du var nødt til at overveje, da du opretter stilguiden?

Frimurer: Vores instrumentbræt er meget datatungt. Derudover giver kampagneoprettelsesstrømmen annoncører en masse håndtag at trække. For at imødekomme mindre erfarne annoncørs behov har vi som mål at have effektive standardindstillinger. I vores produkter har komponenterne komplekse funktioner, men de ser enkle ud og er lette at bruge.

Arya: Er der nogle ting, du ønsker, at du vidste, da du begyndte at oprette stilguiden?

Frimurer: Jeg ville ønske, at jeg havde en dybere forståelse af, hvordan alle vores produkter fungerer fra starten. For eksempel deler vi, hvordan vores respektive produkt fungerer i vores ugentlige designkritikermøde, så jeg ved, hvordan SendRoll (vores e-mail-retargeting-produkt) fungerer på overfladen, men jeg har ikke den dybe viden om SendRoll, som det er designer. Jeg tror, ​​at nyanceret forståelse af produktet helt sikkert hjælper, når jeg arbejder med stilguiden, fordi jeg derefter har en bedre forståelse af alle de potentielle brugssager.

Arya: Så hvad er den bedste måde at opnå den fælles forståelse af en designer's proces og deres produkt?

Frimurer: Selvom vi virkelig er fokuseret på at sende vores produkter, gør vi et godt stykke arbejde med at dele vores designproces i vores ugentlige designkritikermøde. Jeg tror, ​​vi kan være bedre til at lukke loopen efter hvert møde - hvordan integrerede designeren feedback fra mødet? Når produktet er sendt og brugt af vores annoncører, kunne vi også dele, hvordan annoncører bruger produkterne baseret på indsigt fra analytics.

Arya: Var der nogle ressourcer, du henviste til, mens du arbejdede på dette projekt?

Frimurer: Jeg læste Atomic Design af Brad Frost, forskede online og talte med andre UX-designere på MeetUps. Hvis du tror, ​​at et bestemt firma praktiserer godt design, er det ret sandsynligt, at de har talt om deres stilguide et sted online.

Arya: Hvad er status for vores stilguide?

Frimurer: Jeg har fanget og revideret alle de UI-elementer, vi bruger i vores forskellige produkter, og grupperet dem i fundamenter, komponenter, mønstre og sider, som vil tjene som en kilde til sandhed til vores UI-design.

Du kan tjekke grundlæggende og komponent UI-elementer på Dribbble. Hvis du er fortrolig med Atomic Design, grupperede jeg niveauerne "atom" og "molekyle" i det, jeg kalder "komponenter." For eksempel ved at kombinere formtitel og input gør det let for andre designere at nemt kopiere en udfyldt formular Mark.

Tak for at have læst!

Se efter disse kommende emner, når vi udvikler vores stilguide:

  • Hvordan en UI-ramme forenkler samarbejdet
  • Udvikling af nye stilark baseret på UI Framework
  • Sådan oprettes et Style Guide-websted
  • Rejsen til at finde vores stemme og tone