Slik lager du en stilguide: Start med et brukergrensesnitt-rammeverk

Spørsmål og svar med AdRolls UX Designer om hvorfor vi gjorde det og hva vi lærte

Dette blogginnlegget er det første i en serie som kroniserer stilguidens reise, fra skapelsen, til å gi et modent grensesnitt for brukergrensesnittet for teamene våre, og til slutt distillerer en unik stemme og tone for produktene våre.

Hei! Jeg er Arya Srinivasan, en UX-forsker ved AdRoll. Jeg satte meg ned med Mason Lee, en UX-designer som jobbet med AdRolls API-produkter for native ads, for å snakke om arbeidet hans med å utvikle AdRolls stilguide.

Arya: For å starte ting, hvorfor startet du stilguideprosjektet? Hva var problemet som trengte å løse?

Frimurer: Problemet var designkonsekvens, både på tvers av produkter og innenfor et enkelt produkt. For eksempel en knapp som skal se den samme ut overalt, men faktisk varierer i farge, skriftvekt og kantstil.

Knapper ser annerledes ut i de enkelte designers mock og applikasjoner.

AdRolls raske vekst betydde at vi var fokusert på hastighet. Vi er nå et større selskap med flere produkter, så som designer tror jeg det er viktig for oss å understreke konsistensen i hvordan vi presenterer produktene våre: gjennom designen.

For å fokusere på design, trengte vi først å fikse eksisterende uoverensstemmelser. UX-designere fokuserer her vanligvis på ett eller to produkter, så for å få teamet vårt til å tenke på design på tvers av alle produktene, satte jeg opp et ukentlig "UI Smackdown" -møte for å diskutere UI-retningslinjer.

I hvert møte så vi på uoverensstemmelser i design for å bestemme oss for et enkelt design. Etter noen få møter spurte designere meg fortsatt om riktig farge eller polstring, etc. Vi trengte et sentralt dokument med alle svarene, så jeg bygde vårt UI Framework i Sketch som en ressurs for designere. Hver gang vi innser at det mangler en komponent eller ønsker å inkludere en ny komponent, diskuterer vi den og legger den til master UI Framework-filen.

Arya: Du nevnte at du vil at AdRoll skal være et designsentrisk selskap - hva mener du med det?

Frimurer: Jeg vil at AdRoll skal sette design i høysetet slik at det er en konkurrerende differensierer - anerkjent av kundene som et godt designet produkt som virkelig løser deres behov.

Arya: Hva var dine umiddelbare mål for stilguiden? Har du en langsiktig visjon for dette prosjektet?

Frimurer: Mitt kortsiktige mål er å ha designkonsistens mellom designere ved å standardisere våre brukergrensesnitt-komponenter. Jeg vil at designere skal snakke det samme språket når de snakker design. I en modal eller dropdown bygger for eksempel ingeniører basert på hvordan designeren foreslår. Hvis designelementene er forskjellige mellom designere, vil ingeniører gjøre det samme elementet på forskjellige måter.

Mitt midt siktemål er å ha denne stilen definert i koden vår i "RollUp", AdRolls interne UI-komponentbibliotek. Hvis vi har et forhåndsdefinert stilark, er alt det vi trenger å gjøre er å kopiere det. Designere og ingeniører kan snakke det samme språket.

Arya: Har du problemer med å lage stilguiden? Hvordan løste du dem?

Frimurer: En av de største hindringene var å få kjøp fra folk på tvers av produktgrupper. For å få alle involvert, satte jeg opp et møte med en oversiktlig liste over dagsordenelementer å dekke. Jeg presenterte uoverensstemmelser i design, for eksempel varierende nedtrekksmenyer mellom produktene. Å gi visuelle bevis utløser samtaler, og til slutt bryr folk seg om produktet sitt og vil ha konsistens.

En annen utfordring var å bestemme seg for reglene. Når du snakker om standardisering av en komponent, skal den være gjeldende hvor som helst, i alle sammenhenger. Du må tenke på alle kanter. Komponenten må være fleksibel, men samtidig fullstendig nok, slik at den er lett brukbar, forbruksvennlig og relevant.

Her er et eksempel på stilguidens fleksibilitet. Vår første beslutning om utfylling i denne rullegardinmenyen for geografisk målretting var for stor, så vi reviderte stilguiden for å redegjøre for denne bruksaken.Før (venstre), Etter (høyre)

Jeg vil faktisk kalle ut en utfordring til! Navngivelse kan være vanskelig. Som jeg sa før, ønsker jeg at designere og ingeniører skal snakke det samme språket, men dette må gjøres nøye. For noe så enkelt som en dropdown har vi faktisk flere varianter (en med avmerkingsbokser, en annen med avmerkingsbokser og en tekstblokk, og en annen er en standard nedtrekksmeny). Hvordan nevner vi tre forskjellige dropdowns slik at det er en universell forståelse av hvilke er hvilke?

Semantikken er utfordrende; vår navngiving må være fornuftig. Vi brukte noen kule samarbeidsverktøy for å få en enighet når vi bestemmer oss for et navn. For eksempel hjalp Wake oss med å samle alle åpne spørsmål og problemer, diskutere løsninger, overvåke UI Smackdown-beslutningene og fortsette samtalen med det større produktteamet gjennom en integrasjon med Slack.

Hvordan vi brukte Wake for å diskutere uoverensstemmelser i brukergrensesnittet og samarbeide om komponentregler.

Arya: Er det noe unikt med AdRolls brukergrensesnitt, som du måtte tenke på når du opprettet stilguiden?

Frimurer: Dashbordet vårt er veldig datatung. I tillegg gir kampanjeopprettelsesstrømmen annonsører en rekke spaker å trekke. For å møte behovene til mindre erfarne annonsører, tar vi sikte på å ha effektive standardinnstillinger. I våre produkter har komponentene komplekse funksjoner, men ser enkle ut og er enkle å bruke.

Arya: Er det noen ting du skulle ønske du visste da du begynte å lage stilguiden?

Frimurer: Jeg skulle ønske jeg hadde en dypere forståelse av hvordan alle produktene våre fungerer fra starten av. For eksempel deler vi hvordan vårt respektive produkt fungerer i vårt ukentlige designkritikkmøte, så jeg vet hvordan SendRoll (vårt e-målrettet produkt) fungerer på overflaten, men jeg har ikke den dype kunnskapen om SendRoll som designeren gjør. Jeg tror at nyansert forståelse av produktet absolutt hjelper når jeg jobber med stilguiden, fordi jeg da har bedre forståelse av alle potensielle brukssaker.

Arya: Så hva er den beste måten å oppnå den felles forståelsen av prosessoren til en designer og deres produkt?

Frimurer: Selv om vi virkelig er fokusert på å sende våre produkter, gjør vi en god jobb med å dele designprosessen vår i vårt ukentlige designkritikkmøte. Jeg tror vi kan være bedre med å lukke sløyfen etter hvert møte - hvordan integrerte designeren tilbakemeldingene fra møtet? Når produktet er sendt og brukt av våre annonsører, kan vi også dele hvordan annonsører bruker produktene basert på innsikten fra analyser.

Arya: Var det noen ressurser du henviste til mens du jobbet med dette prosjektet?

Frimurer: Jeg leste Atomic Design av Brad Frost, forsket på nettet og snakket med andre UX-designere på MeetUps. Hvis du tror at et bestemt selskap praktiserer god design, er det ganske sannsynlig at de har snakket om stilguiden deres et sted på nettet.

Arya: Hva er statusen til stilguiden vår?

Frimurer: Jeg har fanget opp og revidert alle brukergrensesnittelementene vi bruker i våre forskjellige produkter og gruppert dem i fundament, komponenter, mønstre og sider, som vil tjene som en kilde til sannhet for våre UI-design.

Du kan sjekke ut grunnleggende og komponent UI-elementene på Dribbble. Hvis du er kjent med Atomic Design, grupperte jeg nivåene "atom" og "molekyl" i det jeg kaller "komponenter". For eksempel ved å kombinere skjemaets tittel og inndata blir det enkelt for andre designere å enkelt kopiere et utfylt skjema felt.

Takk for at du leste!

Se opp for disse kommende emnene når vi utvikler vår stilguide:

  • Hvordan et UI-rammeverk forenkler samarbeid
  • Utvikle nye stilark basert på UI Framework
  • Slik bygger du en stilguide-webside
  • Reisen til å finne vår stemme og tone