Kako ustvariti vodnik za slog: Začnite z okvirom uporabniškega vmesnika

Vprašanja z AdRoll's UX Designerjem, zakaj smo to storili in kaj smo se naučili

Ta objava na blogu je prva v nizu, ki kronira vodenje slogovnega vodnika, od njegovega nastanka, do zagotavljanja zrelega okvirja uporabniškega vmesnika za naše ekipe in na koncu destilacijo edinstvenega glasu in tona za naše izdelke.

Živjo! Sem Arya Srinivasan, UX raziskovalka v AdRollu. Sedela sem z Masonom Leejem, UX-jevim oblikovalcem, ki je delal na izdelkih API-ja za domače oglase AdRoll, in spregovoril o njegovem delu, ki je razvijal vodnik za slog AdRoll-a.

Arya: Za začetek stvari, zakaj ste se lotili projekta stilskega vodnika? Kaj je bil problem, ki ga je bilo treba rešiti?

Mason: Težava je bila v nedoslednosti oblikovanja, tako pri izdelkih kot znotraj enega izdelka. Na primer, gumb, ki bi moral biti povsod enak, vendar se dejansko razlikuje glede na barvo, težo pisave in slog obrobe.

Gumbi izgledajo drugače v posmeh posameznih oblikovalcev in v naših aplikacijah.

Hitra rast AdRolla je pomenila, da smo osredotočeni na hitrost. Zdaj smo večje podjetje z več izdelki, zato kot oblikovalec verjamem, da je pomembno, da poudarimo doslednost pri predstavitvi svojih izdelkov: z zasnovo.

Da bi se osredotočili na oblikovanje, smo najprej morali odpraviti obstoječe neskladnosti. UX-ov oblikovalci se običajno osredotočijo na enega ali dva izdelka, zato sem, da bi naša ekipa razmišljala o oblikovanju vseh izdelkov, ustanovila tedenski sestanek "UI Smackdown", na katerem smo razpravljali o smernicah za uporabniški vmesnik.

Na vsakem sestanku smo si ogledali nedoslednosti oblikovanja, da bi se odločili za en sam dizajn. Po nekaj srečanjih so me oblikovalci še vedno spraševali o pravilni barvi ali oblazinjenju itd. Potrebovali smo osrednji dokument z vsemi odgovori, zato sem zgradil naš UI Framework v Sketchu kot vir za oblikovalce. Kadarkoli ugotovimo, da manjka komponenta ali želimo vključiti novo komponento, jo razpravljamo in jo dodamo v glavno datoteko okvirja uporabniškega vmesnika.

Arya: Omenili ste, da želite, da je AdRoll oblikovalsko usmerjeno podjetje - kaj mislite s tem?

Mason: Želim, da AdRoll v ospredje postavi dizajn, tako da je konkurenčni diferencial - kupci prepoznajo kot dobro zasnovan izdelek, ki resnično rešuje njihove potrebe.

Arya: Kateri so bili tvoji neposredni cilji za vodnik po slogu? Imate dolgoročno vizijo tega projekta?

Mason: Moj kratkoročni cilj je doseči skladnost oblikovalcev med oblikovalci s standardizacijo naših komponent uporabniškega vmesnika. Želim si, da bi oblikovalci govorili isti jezik, ko govorijo o oblikovanju. Na primer, v načinu ali spustnem delu inženirji gradijo na podlagi predloga oblikovalca. Če se oblikovalci razlikujejo med oblikovalci, bodo inženirji istih elementov naredili različne načine.

Moj srednjeročni cilj je, da je ta slog opredeljen v naši kodi v "RollUp", interni knjižnici komponent uporabniškega vmesnika AdRoll. Če imamo vnaprej definiran slog, ga moramo kopirati. Oblikovalci in inženirji lahko govorijo isti jezik.

Arya: Ste med ustvarjanjem vodnika po slogu naleteli na kakršne koli težave? Kako ste jih rešili?

Mason: Ena največjih ovir je bila odkupa od ljudi iz skupin izdelkov. Da bi se vsi vključili, sem sestavila sestanek z jasnim seznamom točk dnevnega reda, ki jih bom pokrivala. Predstavil sem neskladnosti oblikovanja, kot so različni spustni meniji med izdelki. Zagotavljanje vizualnih dokazov sproži pogovore, na koncu pa ljudje skrbijo za svoj izdelek in si želijo doslednosti.

Drugi izziv je bila odločitev o pravilih. Ko govorimo o standardizaciji komponente, bi morala biti uporabna kjer koli in v vsakem kontekstu. Morate razmišljati o vsakem primeru primera. Sestavni del mora biti prožen, a hkrati dovolj dovršen, da je lahko uporaben, potrošen in uporaben.

Tu je primer prilagodljivosti našega priročnika za slog Naša prvotna odločitev za oblazinjenje v tem spustnem meniju za geografsko ciljanje je bila prevelika, zato smo pregledali navodila za slog, da smo upoštevali ta primer uporabe.Pred (levo), Po (desno)

Pravzaprav želim odkriti še en izziv! Imenovanje je lahko težko. Kot sem že rekel, želim, da oblikovalci in inženirji govorijo isti jezik, vendar je to treba storiti previdno. Za nekaj tako preprostega kot spustni meni imamo dejansko več različic (ena s potrditvenimi polji, druga s potrditvenimi polji in besedilnim blokom, druga pa je standardni spustni meni). Kako poimenujemo tri različne spustne liste, tako da obstaja splošno razumevanje tega, kaj je to?

Semantika je zahtevna; naše poimenovanje mora imeti smisel. Pri odločanju o imenu smo uporabili nekaj odličnih orodij za sodelovanje, da smo dosegli soglasje. Na primer, Wake nam je pomagal zbrati vsa odprta vprašanja in težave, razpravljati o rešitvah, spremljati odločitve uporabniškega vmesnika Smackdown in nadaljevati pogovor z večjo skupino izdelkov prek integracije s Slackom.

Kako smo z Wakejem razpravljali o nedoslednostih v uporabniškem vmesniku in sodelovali pri pravilih komponent.

Arya: Ali je v uporabniškem vmesniku AdRoll kaj edinstvenega, kar bi morali upoštevati pri ustvarjanju vodnika o slogu?

Zidar: Naša armaturna plošča je zelo obremenjena s podatki. Poleg tega tok ustvarjanja oglaševalcev ponuja oglaševalcem kup vzvodov. Da bi zadovoljili potrebe manj izkušenih oglaševalcev, si prizadevamo za učinkovite privzete nastavitve. V naših izdelkih imajo komponente zapletene funkcije, vendar izgledajo preprosto in so enostavne za uporabo.

Arya: Ali obstaja nekaj stvari, ki bi jih radi vedeli, ko ste začeli ustvarjati vodnik po slogu?

Mason: Želim si, da bi že od začetka poglobljeno razumel, kako delujejo vsi naši izdelki. Na primer, na našem tedenskem sestanku o kritiki o oblikovanju delimo, kako deluje naš izdelek, tako da vem, kako SendRoll (naš izdelek za ponovno ciljanje e-pošte) deluje na površini, vendar o SendRollu, ki ga je oblikovalec, ne poznam globokega znanja. Mislim, da niansirano razumevanje izdelka vsekakor pomaga pri delu na vodniku o slogu, ker potem bolje razumem vse možne primere uporabe.

Arya: Torej, kateri je najboljši način za doseganje tega skupnega razumevanja oblikovalskega procesa in njihovega izdelka?

Mason: Čeprav smo res osredotočeni na pošiljanje svojih izdelkov, si dobro pomagamo deliti naš postopek oblikovanja na našem tedenskem srečanju o oblikovalski kritiki. Mislim, da bomo lahko bolje zaključili zanko po vsakem srečanju - kako je oblikovalec vključil povratne informacije s sestanka? Ko izdelek pošljejo in uporabljajo naši oglaševalci, bi lahko delili tudi, kako oglaševalci izdelke uporabljajo na podlagi vpogleda v analitiko.

Arya: Ali ste med delovanjem na tem projektu omenili kakršna koli sredstva?

Mason: Prebral sem Atomic Design Brada Frosta, raziskoval na spletu in se pogovarjal z drugimi oblikovalci UX na MeetUpsu. Če menite, da določeno podjetje uporablja dober dizajn, je verjetno, da so nekje na spletu govorili o svojem vodniku o slogu.

Arya: Kakšen je status našega vodnika po slogu?

Mason: Ujel sem in ponovno pregledal vse elemente uporabniškega vmesnika, ki jih uporabljamo v različnih izdelkih, in jih razvrstil v temelje, sestavne dele, vzorce in strani, ki bodo vir resnice za naše zasnove uporabniškega vmesnika.

Na Dribbble lahko preverite temelje in elemente uporabniškega vmesnika. Če poznate Atomic Design, sem ravni "atoma" in "molekule" razvrstil v tako imenovane "komponente". Na primer, če združite naslov obrazca in vnos, drugi oblikovalci olajšajo kopiranje izpolnjenega obrazca polje.

Hvala za branje!

Bodite pozorni na te prihajajoče teme, ko razvijamo naš stilski vodnik:

  • Kako okvir UI poenostavlja sodelovanje
  • Razvoj novih tabel slogov na podlagi okvirja uporabniškega vmesnika
  • Kako sestaviti spletno mesto Vodnik po slogu
  • Pot do iskanja našega glasu in tona