Kako stvoriti vodič za stil: Počnite s okvirom sučelja

Pitanja i odgovori s UR Designerom tvrtke AdRoll o tome zašto smo to učinili i što smo naučili

Ovaj je blog blog prvi u nizu koji kronira putovanje stilskim vodičem, od njegova stvaranja, do pružanja zrelog okvira korisničkog sučelja za naše timove i na kraju destilacije jedinstvenog glasa i tona za naše proizvode.

Bok! Ja sam Arya Srinivasan, UX istraživačica u AdRollu. Sjeo sam s Mason Leejem, UX dizajnerom koji radi na AdRoll-ovom prirodnom API proizvodu, i razgovarao o njegovu radu na razvoju AdRoll-ovog vodiča za stil.

Arya: Da biste započeli s stvarima, zašto ste pokrenuli projekt vodiča stilova? Koji je bio problem koji je trebao riješiti?

Mason: Problem je bio neusklađenost dizajna, kako unutar proizvoda, tako i unutar jednog proizvoda. Na primjer, gumb koji bi trebao izgledati isto svugdje, ali zapravo varira u boji, težini fonta i stilu obruba.

Gumbi izgledaju drugačije u izgledu pojedinih dizajnera i našim aplikacijama.

Brz rast AdRoll-a značio je da smo fokusirani na brzinu. Sada smo veća tvrtka s više proizvoda, pa kao dizajner vjerujem da je važno da naglasimo dosljednost u načinu na koji prezentiramo svoje proizvode: kroz dizajn.

Da bismo se usredotočili na dizajn, prvo smo trebali ispraviti postojeće nedosljednosti. UX dizajneri se ovdje obično usredotočuju na jedan ili dva proizvoda, tako da bi naš tim mogao razmišljati o dizajnu na svim proizvodima, osnovao sam tjedni sastanak "UI Smackdown" kako bismo razgovarali o UI smjernicama.

U svakom smo sastanku razmotrili nedosljednosti u dizajnu kako bismo odlučili o jednom dizajnu. Nakon nekoliko sastanaka, dizajneri su me još uvijek pitali o ispravnoj boji ili podlozi itd. Trebao nam je središnji dokument sa svim odgovorima, pa sam izgradio naš UI Framework u Sketchu kao izvor za dizajnere. Kad god shvatimo da nedostaje komponenta ili želimo uključiti novu komponentu, razgovaramo o njoj i dodamo je u glavnu datoteku UI Framework.

Arya: Spomenuli ste da želite da AdRoll bude dizajnerska tvrtka - na što to mislite?

Mason: Želim da AdRoll u prvi plan postavi dizajn tako da bude konkurentan diferencijator - kupci prepoznaju kao dobro dizajniran proizvod koji stvarno rješava njihove potrebe.

Arya: Koji su ti bili neposredni ciljevi za stilski vodič? Imate li dugoročnu viziju ovog projekta?

Mason: Moj kratkoročni cilj je postići dosljednost dizajna između dizajnera, standardiziranjem naših komponenti korisničkog sučelja. Želim da dizajneri govore isti jezik kad razgovaraju o dizajnu. Na primjer, inženjeri u modalnom obliku ili padajućem izborniku grade na temelju načina na koji dizajner predlaže. Ako su dizajnerski elementi različiti između dizajnera, inženjeri će napraviti isti element na različite načine.

Moj srednjoročni cilj je da ovaj stil definiramo u našem kodu u "RollUp", unutarnjoj biblioteci komponenata korisničkog sučelja AdRoll-a. Ako imamo unaprijed definiranu listu stilova, svi naši inženjeri trebaju to kopirati. Dizajneri i inženjeri mogu govoriti istim jezikom.

Arya: Jeste li naišli na probleme dok ste stvarali vodič za stil? Kako ste ih riješili?

Mason: Jedna od najvećih prepreka bila je kupoprodaja ljudi preko timova proizvoda. Kako bih sve uključio, zakazao sam sastanak s jasnim popisom točaka dnevnog reda koje treba pokriti. Predstavio sam neusklađenosti dizajna, poput različitih padajućih izbornika između proizvoda. Davanje vizualnih dokaza pokreće razgovore, a na kraju se ljudima brine njihov proizvod i žele dosljednost.

Drugi je izazov bila odluka o pravilima. Kada govorimo o standardizaciji komponente, ona bi trebala biti primjenjiva bilo gdje, u svakom kontekstu. Morate razmišljati o svim rubnim slučajevima. Sastavni dio mora biti fleksibilan, ali istovremeno i dovoljno dovršen da bi mogao biti lako upotrebljiv, potrošan i primjenjiv.

Evo primjera fleksibilnosti našeg vodiča za stil Naša početna odluka za oblaganje u ovom padajućem izborniku za geografsko ciljanje bila je prevelika, pa smo revidirali vodič za stil kako bismo uzeli u obzir ovaj slučaj upotrebe.Prije (lijevo), Nakon (desno)

Zapravo želim još jedan izazov! Imenovanje može biti teško. Kao što sam rekao prije, želim da dizajneri i inženjeri govore istim jezikom, ali to treba učiniti pažljivo. Za nešto tako jednostavno kao padajući, mi zapravo imamo nekoliko varijacija (jedna s potvrdnim okvirima, druga s potvrdnim okvirima i tekstnim blokom, a druga je standardni padajući izbornik). Kako ćemo imenovati tri različita padajuća područja, tako da postoji univerzalno razumijevanje toga što je?

Semantika je izazovna; naše imenovanje mora imati smisla. Koristili smo nekoliko sjajnih alata za suradnju da bismo postigli konsenzus kada odlučujemo o imenu. Na primjer, Wake nam je pomogao prikupiti sva otvorena pitanja i pitanja, razgovarati o rješenjima, pratiti odluke UI Smackdown-a i nastaviti razgovor s većim timom proizvoda kroz integraciju sa Slack-om.

Kako smo Wakeom koristili diskusiju o nedosljednosti korisničkog sučelja i surađivali na pravilima komponenti.

Arya: Ima li nečeg jedinstvenog u korisničkom sučelju AdRoll-a što biste trebali uzeti u obzir pri izradi vodiča za stil?

Mason: Naša nadzorna ploča ima velike podatke. Uz to, tok kreiranja kampanje pruža oglašivačima hrpu poluga za povlačenje. Kako bismo udovoljili potrebama manje iskusnih oglašivača, nastojimo imati učinkovite zadane postavke. Komponente u našim proizvodima imaju složene funkcije, ali izgledaju jednostavno i lako se koriste.

Arya: Postoje li neke stvari za koje biste željeli da znate kada ste započeli s stvaranjem vodiča za stil?

Mason: Volio bih da dublje razumijem kako svi naši proizvodi djeluju od početka. Na primjer, dijelimo kako funkcionira naš proizvod na našem tjednom sastanku kritike dizajna, tako da znam kako SendRoll (naš proizvod za preusmjeravanje e-pošte) djeluje na površini, ali nemam duboko znanje o SendRollu koji dizajner radi. Mislim da nijansirano razumijevanje proizvoda definitivno pomaže kada radim na vodiču za stil, jer tada bolje razumijem sve moguće slučajeve uporabe.

Arya: Pa, koji je najbolji način da se postigne to zajedničko razumijevanje dizajnerskog procesa i njihovog proizvoda?

Mason: Iako smo doista fokusirani na isporuku naših proizvoda, dobar posao dijelimo svoj proces dizajna na našem tjednom sastanku kritike dizajna. Mislim da možemo biti bolji oko zatvaranja petlje nakon svakog sastanka - kako je dizajner ugradio povratne informacije sa sastanka? Nakon što naš oglašivač isporuči proizvod i koriste ga, mogli bismo dijeliti i način na koji oglašivači proizvode koriste na temelju uvida iz analitike.

Arya: Postoje li resursi na koje ste se osvrnuli radeći na ovom projektu?

Mason: Čitao sam Atomic Design Brada Frosta, istraživao na mreži i razgovarao s drugim UX dizajnerima na MeetUpsu. Ako mislite da određena tvrtka ima dobar dizajn, prilično je vjerojatno da su negdje putem interneta razgovarali o svom vodiču za stil.

Arya: kakav je status našeg vodiča za stil?

Mason: Uhvatio sam i pregledao sve UI elemente koje koristimo u našim različitim proizvodima i grupirao ih u temelje, komponente, uzorke i stranice, koji će poslužiti kao izvor istine za naše dizajnirane sučelja.

Na Dribbbleu možete provjeriti temelje i korisničke korisničke sučelje temelja. Ako ste upoznati s atomskim dizajnom, grupirao sam razine "atoma" i "molekule" u ono što ja nazivam "komponente". Na primjer, kombiniranje naslova obrasca i unosa olakšava drugim dizajnerima da lako kopiraju ispunjeni obrazac polje.

Hvala na čitanju!

Pazite na ove nadolazeće teme dok razvijamo naš vodič za stil:

  • Kako Okvir UI pojednostavljuje suradnju
  • Razvoj novih tablica stilova na temelju UI okvira
  • Kako izraditi web stranicu vodiča za stil
  • Putovanje do pronalaska našeg glasa i tona