Kaip sukurti stiliaus vadovą: pradėkite nuo vartotojo sąsajos

Klausimai ir atsakymai su „AdRoll“ UX dizaineriu, kodėl mes tai padarėme ir ko išmokome

Šis tinklaraščio įrašas yra pirmasis serijoje, kurioje aprašoma stiliaus vadovo kelionė, pradedant nuo jo sukūrimo, baigiant subrendusia UI sistema mūsų komandoms ir galiausiai distiliuojant unikalų mūsų produktų balsą ir toną.

Sveiki! Aš esu Arya Srinivasan, „AdRoll“ UX tyrėja. Aš atsisėdau su Mason Lee, „UX Designer“, dirbančiu su „AdRoll“ vietinių skelbimų API produktu, kad papasakotų apie jo darbą kuriant „AdRoll“ stiliaus vadovą.

Arya: Kodėl pradėjai stiliaus vadovo projektą? Kokia buvo problema, kurią reikėjo išspręsti?

Masonas: Problema buvo nenuoseklumas tiek gaminiuose, tiek viename gaminyje. Pvz., Mygtukas, kuris visur turėtų atrodyti vienodai, bet iš tikrųjų skiriasi spalva, šrifto svoriu ir kraštinės stiliumi.

Mygtukai atrodo skirtingai nei iš atskirų dizainerių tyčiojimų, tiek iš mūsų programų.

Spartus „AdRoll“ augimas reiškė, kad mes susitelkėme į greitį. Dabar esame didesnė įmonė, turinti kelis produktus, todėl, kaip dizainerio, manau, kad svarbu pabrėžti nuoseklumą, kaip mes pristatome savo produktus: kurdami dizainą.

Norėdami sutelkti dėmesį į dizainą, pirmiausia turėjome pašalinti esamus neatitikimus. UX dizaineriai dažniausiai sutelkia dėmesį į vieną ar du gaminius, todėl norėdama mūsų komandą pagalvoti apie visų gaminių dizainą, aš surengiu savaitinį „UI Smackdown“ susitikimą, kuriame aptariamos UI gairės.

Kiekviename susitikime apžvelgėme dizaino neatitikimus, kad galėtume nuspręsti dėl vieno dizaino. Po kelių susitikimų dizaineriai vis dar manęs klausė apie teisingą spalvą ar apmušalus ir pan. Mums reikėjo centrinio dokumento su visais atsakymais, todėl aš sukūriau mūsų UI sąranką eskize kaip dizainerių šaltinį. Kai suprantame, kad trūksta komponento ar norime įtraukti naują komponentą, jį aptariame ir pridedame prie pagrindinio vartotojo sąsajos pagrindų failo.

Arya: Jūs minėjote, kad norite, jog „AdRoll“ būtų į dizainą orientuota įmonė - ką jūs turite omenyje?

Masonas: Noriu, kad „AdRoll“ dizainas taptų svarbiausiu dalyku, kad jis būtų konkurencinis diferencialas - klientų pripažįstamas kaip gerai suprojektuotas produktas, kuris tikrai patenkina jų poreikius.

Arya: Kokie buvo tiesioginiai jūsų stiliaus vadovo tikslai? Ar turite ilgalaikę šio projekto viziją?

Masonas: Mano trumpalaikis tikslas yra užtikrinti nuoseklumą tarp dizainerių, standartizuojant mūsų vartotojo sąsajos komponentus. Noriu, kad dizaineriai, kalbėdami apie dizainą, kalbėtų ta pačia kalba. Pvz., Inžinieriai, naudodamiesi modaliu ar išskleidžiamuoju meniu, kuria remdamiesi tuo, ką siūlo dizaineris. Jei dizainerių dizaino elementai skiriasi, inžinieriai tą patį elementą pagamins skirtingais būdais.

Mano vidutinės trukmės tikslas yra, kad šis stilius būtų apibrėžtas mūsų kode „RollUp“. „AdRoll“ vidinė vartotojo sąsajos komponentų biblioteka. Jei turime iš anksto nustatytą stiliaus lapą, visi mūsų inžinieriai turi tai nukopijuoti. Dizaineriai ir inžinieriai gali kalbėti ta pačia kalba.

Arya: Ar kuriant stiliaus vadovą iškilo kokių nors problemų? Kaip jūs juos išsprendėte?

Masonas: Viena didžiausių kliūčių buvo įsigyti žmonių iš produktų grupių. Kad visi dalyvautų, aš surengiau susitikimą, kuriame pateiktas aiškus darbotvarkės punktų sąrašas. Aš pristačiau dizaino neatitikimus, tokius kaip skirtingi išskleidžiamieji meniu tarp produktų. Pateikti vaizdiniai įrodymai sukelia pokalbius, o galų gale žmonės rūpinasi savo produktu ir nori nuoseklumo.

Kitas iššūkis buvo sprendimas dėl taisyklių. Kai kalbame apie komponento standartizavimą, jis turėtų būti taikomas bet kuriame kontekste. Jūs turite galvoti apie kiekvieną kraštutinį atvejį. Komponentas turi būti lankstus, tačiau tuo pat metu pakankamai išsamus, kad būtų lengvai naudojamas, tinkamas naudoti ir tinkamas naudoti.

Čia pateiktas mūsų stiliaus vadovo lankstumo pavyzdys. Mūsų pradinis sprendimas dėl įklijavimo šiame išskleidžiamajame geografinės vietos nustatymo sąraše buvo per didelis, todėl atsižvelgdami į šį naudojimo atvejį peržiūrėjome stiliaus vadovą.Prieš (kairėje), Po (dešinėje)

Aš iš tikrųjų noriu pasakyti dar vieną iššūkį! Pavadinti gali būti sunku. Kaip jau sakiau anksčiau, noriu, kad dizaineriai ir inžinieriai kalbėtų ta pačia kalba, tačiau tai reikia padaryti atsargiai. Kai ką tokio paprasto kaip išskleidžiamasis meniu, mes iš tikrųjų turime keletą variantų (vienas su žymimaisiais laukeliais, kitas su žymimaisiais laukeliais ir teksto bloku, kitas yra standartinis išskleidžiamasis meniu). Kaip pavadinti tris skirtingus išskleidžiamuosius meniu, kad būtų visuotinai suprantama, kuris yra kuris?

Semantika yra sudėtinga; mūsų įvardijimas turi prasmę. Mes naudojome keletą puikių bendradarbiavimo įrankių, kad pasiektume sutarimą, kai nusprendžiame dėl vardo. Pvz., „Wake“ padėjo mums surinkti visus atvirus klausimus ir problemas, aptarti sprendimus, stebėti UI „Smackdown“ sprendimus ir tęsti pokalbį su didesne gaminių komanda integruojantis į „Slack“.

Kaip mes panaudojome „Wake“, norėdami aptarti vartotojo sąsajos neatitikimus ir bendradarbiauti kuriant komponentų taisykles.

Arija: Ar yra kažkas išskirtinio „AdRoll“ vartotojo sąsajoje, į kurią reikėjo atsižvelgti kuriant stiliaus vadovą?

Masonas: Mūsų prietaisų skydelyje yra labai daug duomenų. Be to, kampanijos kūrimo srautas reklamuotojams suteikia daugybę svertų, kuriuos reikia patraukti. Siekdami patenkinti mažiau patyrusių reklamuotojų poreikius, siekiame veiksmingų numatytųjų nustatymų. Mūsų gaminiuose komponentai atlieka sudėtingas funkcijas, tačiau atrodo paprasti ir yra lengvai naudojami.

Arya: Ar yra kokių nors dalykų, kuriuos norėtumėte žinoti, kai pradėjote kurti stiliaus vadovą?

Masonas: Aš norėčiau, kad turėčiau gilesnį supratimą apie tai, kaip visi mūsų produktai veikia nuo pat pradžių. Pvz., Mes dalijamės, kaip veikia mūsų atitinkamas produktas mūsų savaitiniame dizaino kritikos susitikime, todėl aš žinau, kaip „SendRoll“ (mūsų el. Pašto adresus perimantis produktas) veikia paviršiuje, tačiau aš neturiu gilių žinių apie „SendRoll“, ką daro jo dizaineris. Manau, kad niuansuotas produkto supratimas neabejotinai padeda dirbant su stiliaus vadovu, nes tada aš geriau suprantu visus galimus naudojimo atvejus.

Arya: Taigi koks yra geriausias būdas pasiekti bendrą supratimą apie dizainerio procesą ir jo gaminį?

Masonas: Nors mes tikrai orientuojamės į savo produktų siuntimą, mes darome gerą darbą, kad pasidalintume savo dizaino procesu mūsų savaitiniame dizaino kritikos susitikime. Manau, kad po kiekvieno susitikimo galime geriau uždaryti liniją - kaip dizainerė įtraukė grįžtamojo ryšio informaciją? Kai produktą išsiųs ir naudos mūsų reklamuotojai, mes taip pat galėtume pasidalinti, kaip reklamuotojai naudoja produktus, remdamiesi analizės įžvalgomis.

Arija: Ar buvo kokių nors šaltinių, į kuriuos nurodėte dirbdami prie šio projekto?

Masonas: Aš skaičiau Brado Frosto atomų dizainą, tyrinėjau internete ir kalbėjau su kitais UX dizaineriais „MeetUps“. Jei manote, kad tam tikra įmonė praktikuoja gerą dizainą, labai tikėtina, kad jie kažkur internete papasakojo apie savo stiliaus vadovą.

Arya: kokia yra mūsų stiliaus vadovo būsena?

Masonas: Aš užfiksavau ir peržiūrėjau visus vartotojo sąsajos elementus, kuriuos naudojame skirtinguose produktuose, ir suskirstėme juos į pagrindus, komponentus, modelius ir puslapius, kurie bus teisingi mūsų UI dizaino šaltiniai.

Galite patikrinti pagrindinius ir komponentinius vartotojo sąsajos elementus „Dribbble“. Jei esate susipažinęs su atominiu dizainu, aš suskirsčiau „atomo“ ir „molekulių“ lygius į tai, ką aš vadinu „komponentais“. Pvz., Derinant formos pavadinimą ir įvestį kitiems dizaineriams lengva nukopijuoti užpildytą formą. laukas.

Ačiū už skaitymą!

Kurdami savo stiliaus vadovą, atkreipkite dėmesį į šias būsimas temas:

  • Kaip UI sistema supaprastina bendradarbiavimą
  • Naujų stiliaus lentelių kūrimas remiantis UI sąranka
  • Kaip sukurti „Style Guide“ svetainę
  • Kelionė į mūsų balso ir tono radimą