Kā izveidot stila rokasgrāmatu: sāciet ar lietotāja saskarnes ietvaru

Jautājumi un atbildes ar AdRoll UX Designer par to, kāpēc mēs tā rīkojāmies un ko iemācījāmies

Šis emuāra ieraksts ir pirmais sērijā, kurā aprakstīts stila ceļveža ceļojums, sākot no tā izveides līdz mūsu komandas nobrieduša lietotāja saskarnes nodrošināšanai un beidzot ar mūsu produktu unikālas balss un toņa destilēšanu.

Sveiki! Es esmu Ārija Srinivasana, AdRoll UX pētniece. Es apsēdos kopā ar Masonu Lī, UX dizaineru, kurš strādā ar AdRoll vietējo reklāmu API produktu, lai runātu par viņa darbu, izstrādājot AdRoll stila rokasgrāmatu.

Ārija: Kāpēc jūs sākāt stila gidu projektu, lai sāktu lietas? Kāda bija problēma, kas bija jāatrisina?

Meisons: Problēma bija dizaina neatbilstība gan attiecībā uz produktiem, gan viena produkta ietvaros. Piemēram, pogai, kurai visur vajadzētu izskatīties vienādi, bet faktiski tai ir atšķirīga krāsa, fonta svars un apmales stils.

Atsevišķu dizaineru izspēlēs un mūsu lietojumprogrammās pogas izskatās savādāk.

AdRoll straujā izaugsme nozīmēja, ka mēs koncentrējāmies uz ātrumu. Mēs tagad esam lielāks uzņēmums ar vairākiem produktiem, tāpēc kā dizainere es uzskatu, ka mums ir svarīgi uzsvērt konsekvenci mūsu produktu prezentācijā: izmantojot dizainu.

Lai koncentrētos uz dizainu, mums vispirms vajadzēja novērst esošās neatbilstības. Šeit UX dizaineri parasti koncentrējas uz vienu vai diviem izstrādājumiem, tāpēc, lai liktu mūsu komandai padomāt par visu produktu dizainu, es organizēju iknedēļas “UI Smackdown” sanāksmi, lai apspriestu UI vadlīnijas.

Katrā sanāksmē mēs apskatījām dizaina neatbilstības, lai izlemtu par vienu dizainu. Pēc dažām sanāksmēm dizaineri man joprojām vaicāja par pareizo krāsu vai polsterējumu utt. Mums bija nepieciešams centrālais dokuments ar visām atbildēm, tāpēc es izveidoju mūsu UI sistēmu Skicē kā dizaineru resursu. Ikreiz, kad mēs saprotam, ka trūkst kāda komponenta vai vēlaties iekļaut jaunu komponentu, mēs to apspriežam un pievienojam galvenajam UI Framework failam.

Ārija: Jūs minējāt, ka vēlaties, lai AdRoll būtu uz dizainu orientēts uzņēmums - ko jūs ar to domājat?

Masons: Es vēlos, lai AdRoll izvirzītu dizainu priekšplānā, lai tas būtu konkurences diferenciālis - klientu atzīts par labi izstrādātu produktu, kas patiešām atrisina viņu vajadzības.

Ārija: Kādi bija jūsu tiešie mērķi attiecībā uz stila rokasgrāmatu? Vai jums ir ilgtermiņa redzējums šim projektam?

Masons: Mans īstermiņa mērķis ir panākt dizaina konsekvenci starp dizaineriem, standartizējot mūsu UI komponentus. Es gribu, lai dizaineri, runājot par dizainu, runātu vienā valodā. Piemēram, modālā veidā vai nolaižamajā izvēlnē inženieri balstās uz dizainera ieteikumiem. Ja dizaina elementi dizaineriem atšķiras, inženieri gatavojas to pašu elementu izgatavot dažādos veidos.

Mans vidēja termiņa mērķis ir panākt, lai šis stils tiktu definēts mūsu kodā “RollUp”, AdRoll iekšējā lietotāja interfeisa komponentu bibliotēkā. Ja mums ir iepriekš noteikta stila lapa, visiem mūsu inženieriem tas ir jānokopē. Dizaineri un inženieri var runāt vienā valodā.

Ārija: Vai, veidojot stila rokasgrāmatu, jums radās kādas problēmas? Kā jūs tos atrisinājāt?

Masons: Viens no lielākajiem šķēršļiem bija iepirkšanās no cilvēkiem dažādās produktu komandās. Lai iesaistītu visus, es izveidoju sanāksmi ar skaidru darba kārtības jautājumu sarakstu. Es iepazīstināju ar dizaina neatbilstībām, piemēram, dažādām nolaižamajām izvēlnēm starp izstrādājumiem. Vizuālu pierādījumu sniegšana izraisa sarunas, un galu galā cilvēki rūpējas par savu produktu un vēlas konsekvenci.

Vēl viens izaicinājums bija lēmumu pieņemšana par noteikumiem. Runājot par komponenta standartizēšanu, tas būtu jāpiemēro visur, katrā kontekstā. Jums ir jādomā par katru malu gadījumu. Komponentam jābūt elastīgam, taču tajā pašā laikā pietiekami pilnīgam, lai tas būtu viegli lietojams, patērējams un pielietojams.

Šis ir mūsu stila rokasgrāmatas elastības piemērs. Mūsu sākotnējais lēmums par polsterējumu šajā nolaižamajā ģeogrāfiskās mērķauditorijas atlases vietā bija pārāk liels, tāpēc mēs pārskatījām stila rokasgrāmatu, lai ņemtu vērā šo lietošanas gadījumu.Pirms (pa kreisi), Pēc (pa labi)

Es patiesībā gribu izsaukt vēl vienu izaicinājumu! Nosaukšana var būt sarežģīta. Kā jau teicu iepriekš, es gribu, lai dizaineri un inženieri runātu vienā valodā, bet tas ir jādara uzmanīgi. Kaut kam tik vienkāršam kā nolaižamā izvēlne, mums faktiski ir vairākas variācijas (viena ar izvēles rūtiņām, otra ar izvēles rūtiņām un teksta bloku, un vēl viena ir standarta nolaižamā izvēlne). Kā nosaukt trīs dažādas nolaižamās izvēlnes, lai vispārēji saprastu, kura ir kura?

Semantika ir izaicinoša; mūsu nosaukšanai ir jābūt jēgai. Mēs izmantojām dažus lieliskus sadarbības rīkus, lai panāktu vienprātību, kad mēs lemjam par vārdu. Piemēram, Wake palīdzēja mums apkopot visus atklātos jautājumus un jautājumus, apspriest risinājumus, uzraudzīt UI Smackdown lēmumus un turpināt sarunu ar lielāku produktu komandu, izmantojot integrāciju ar Slack.

Kā mēs izmantojām Wake, lai apspriestu lietotāja saskarnes neatbilstības un sadarbotos komponentu noteikumu izstrādē.

Ārija: Vai AdRoll UI ir kaut kas unikāls, kas jums bija jāņem vērā, veidojot stila rokasgrāmatu?

Masons: Mūsu informācijas panelis ir ļoti smags. Turklāt kampaņas izveides plūsma reklāmdevējiem dod iespēju piesaistīt virkni sviru. Lai apmierinātu mazāk pieredzējušu reklāmdevēju vajadzības, mūsu mērķis ir panākt efektīvus noklusējuma iestatījumus. Mūsu izstrādājumos komponentiem ir sarežģītas funkcijas, taču tie izskatās vienkārši un ir viegli lietojami.

Ārija: Vai ir dažas lietas, kuras vēlaties zināt, kad sākat veidot stila rokasgrāmatu?

Meisons: Es vēlos, lai man būtu dziļāka izpratne par to, kā visi mūsu produkti darbojas jau no paša sākuma. Piemēram, mēs dalāmies ar to, kā darbojas mūsu attiecīgais produkts mūsu iknedēļas dizaina kritikas sanāksmē, tāpēc es zinu, kā SendRoll (mūsu e-pasta adreses atkārtojošais produkts) darbojas uz virsmas, bet man nav dziļu zināšanu par SendRoll, ko tā izstrādātājs. Es domāju, ka niansēta produkta izpratne noteikti palīdz, strādājot pie stila rokasgrāmatas, jo tad man ir labāka izpratne par visiem iespējamiem lietošanas gadījumiem.

Ārija: Kāds ir labākais veids, kā panākt kopējo izpratni par dizainera procesu un tā produktu?

Meisons: Lai arī mēs patiešām koncentrējamies uz mūsu produktu piegādi, mēs paveicam labu darbu, daloties savā dizaina procesā mūsu iknedēļas dizaina kritikas sanāksmē. Es domāju, ka mēs varam labāk rīkoties, aizverot cilpu pēc katras sanāksmes - kā dizainers iekļāva atsauksmes no sanāksmes? Kad produkts ir nosūtīts un izmantots mūsu reklāmdevējiem, mēs varētu arī dalīties ar to, kā reklāmdevēji izmanto produktus, balstoties uz analītikas atziņām.

Ārija: Vai bija kādi resursi, uz kuriem jūs atsaucāties, strādājot pie šī projekta?

Masons: Es lasīju Bred Frost atomu dizainu, pētīju tiešsaistē un runāju ar citiem UX dizaineriem MeetUps. Ja domājat, ka kāds konkrēts uzņēmums praktizē labu dizainu, ir diezgan iespējams, ka viņi kaut kur tiešsaistē ir runājuši par savu stila rokasgrāmatu.

Ārija: Kāds ir mūsu stila ceļveža statuss?

Masons: Es esmu uztvēris un pārskatījis visus UI elementus, kurus mēs izmantojam dažādos mūsu produktos, un sagrupējis tos pamatos, komponentos, modeļos un lapās, kas kalpos par patiesības avotu mūsu UI dizainiem.

Vietnē Dribbble varat pārbaudīt pamata un komponenta UI elementus. Ja esat pazīstams ar atomu dizainu, es grupēju “atoma” un “molekulas” līmeņus tā sauktajos “komponentos”. Piemēram, apvienojot veidlapas nosaukumu un ievadi, citiem dizaineriem ir viegli kopēt aizpildītu veidlapu. lauka.

Paldies par lasīšanu

Izstrādājot stila rokasgrāmatu, pievērsiet uzmanību šīm gaidāmajām tēmām:

  • Kā saskarne UI vienkāršo sadarbību
  • Jaunu stila lapu izstrāde, pamatojoties uz UI Framework
  • Kā izveidot vietni Style Guide
  • Ceļojums mūsu balss un toņa atrašanai