Kad vam sustav dizajna ne uspije

Čuli smo puno o sjajnim dizajnerskim sustavima, ali što se događa kada oni ne funkcioniraju?

Uvod

Svaka zrela aplikacija na kraju će doživjeti krizu identiteta korisničkog sučelja: gumbi se nalaze posvuda, ljestvica tipa se pokreće amok, i - omg - je li to iskrivljeni rub? Oof. Imate tri do četiri natjecateljske estetike koja datiraju još iz godina. To je nered.

Ako se nađete u ovoj situaciji, nikada se ne bojte. Internet je to predvidio: potreban vam je sustav dizajna. Tražite inspiraciju? Primjeri obiluju - upotrijebite upute za upotrebu korak po korak. Velike tvrtke poput Twittera, Salesforcea, Airbnb-a i Googlea postavile su primjer dizajnerskim timovima proizvoda svugdje kako bi oponašali.

Do sad znate zgodnu priču. Potrebna vam je posebna, multidisciplinarna radna skupina da ugostite offsite, provedete reviziju sučelja i rasporedite potrebne komponente prema funkciji i obliku. Sljedeće što trebate jednostavno je objediniti, ponoviti, dokumentirati i objaviti na zadovoljstvo svih dionika, programera i korisnika. Ako vam je dodatni osjećaj, možete ga brendirati i otvoriti na zadovoljstvo čitave dizajnerske zajednice.

Izravna narav, čak i najbolje namjeravanog Medium članka, ipak predstavlja određenu stvarnost: vodiči za stil proizvoda, a kamoli cijeli imenovani i otvoreni sustav dizajna, nakon početnog stvaranja imaju cijeli život. Ako se ovi proizvodi ne aktiviraju u proizvodu, oni nikada neće dostići svoj puni potencijal. U stvari, oni često mogu stvoriti samo problem koji pokušavate riješiti još gore. Mogu propasti.

Kako to misliš, neuspjeh?

Osobno sam bio dio nekoliko napora na redizajnu koji su uključivali stvaranje stilskog vodiča (neki unutar iste tvrtke). Vidio sam kako se ovi projekti obećavaju i kreću u zaborav. To boli. Živjela sam i osjećala vlastiti neuspjeh. Dopustite mi da ilustriram ovu točku pričom.

Dan u životu zagovornika dizajnerskog sustava

Kad sam se bavio stilskim projektom, vodio sam svakodnevne razgovore poput:

Drugi dizajner: Hej, imamo li stilova za stanja pogreške?

Ja: Da, nedavno smo stvorili specifikaciju pogreške kao dio New Shiny ™ sustava. Nažalost, vaš se dio proizvoda i dalje nalazi u sustavu Old Dumb.

Drugi dizajner: U redu, koju boju trebam koristiti? Trebam li koristiti stari pogrešni stil pogreške ili novi sjajni stil pogreške?

Ja: Zamolimo vragove da li mogu započeti koristiti New Shiny sustav.

Programer: mislim da ne. Ne želim integrirati nove sjajne stilove u ovaj projekt. Ne znam kako će to utjecati na stare glupe stilove. Ovo bi trebala biti priča od 1 boda.

Drugi dizajner: Pa bih trebao započeti s korištenjem nove šesterostruke vrijednosti? Znači odgovara?

Ja: Pa, onda se to neće podudarati ni sa čim drugim u vašem projektu.

Programer: Pretpostavljam da bismo mogli ažurirati stare glupe varijable do New Shiny varijable.

QA: Nemam vremena za regresijsku provjeru cijelog starog glupog sustava.

PM: Pa koju boju koristimo?

Možete zamijeniti "boje pogreške" s "visinom gumba", "ulaznom obrubom" ili "mrežnom sustavom". Priča ostaje ista. Zašto je gornji scenarij toliko tipičan? Zašto sustavi dizajna ne dosežu svoj potencijal?

Što je pošlo po zlu? Uobičajene zamke dizajnerskih sustava

Nije to što sam sustav dizajniranja zataji - uvođenje reda u kaos samo je po sebi smisleno djelo. Možete stvoriti komponente koje postižu savršenu ravnotežu između ponovne uporabe i osjetljivosti na kontekst. Ali definiranje komponenata vašeg dizajnerskog sustava samo je prvi korak. Mora se probiti do proizvoda. Ako ne, sustav dizajna je poput jezika bez postojeće literature ili semenskih tekstova.

Projekt može pogriješiti iz više razloga - proračun, resursi, vrijeme, loše upravljanje - čak i promet. Ali čak i uspješni dizajnerski sustavi s organizacijskim ulaganjima ne mogu uspjeti. Zamke za koje ću istaknuti osjećaju se svojstveno ideji sustava dizajna, čak i u idealnijim scenarijima. (Pomislite na Google: Kalendaru su trebale godine za materijal.)

1.) Redizajn nije prioritetni

Zbog toga što je rijetko da tvrtke daju prioritet čistom stilu kao takvom (pomislite na gornju pripovijest), takav dizajnerski dug često se stavlja u druge - tipično, buduće - igrane radove ili remonta. No nekim dijelovima proizvoda, čak i kritičnim dijelovima, može biti potrebno ponovno pregledavanje. Rezultat je proizvod s višestrukim stilskim sustavima koji su odgovorni za različite dijelove korisničkog sučelja. Ovo je, naravno, točan problem koji ste odlučili riješiti, složen s još jednim nepotpunim rješenjem. Jedan proizvod, mnogo jezika.

2.) Tehnički niz se mijenja

Kada se vremenski rok za provedbu proširi na više mjeseci (i vjerojatnije, četvrtine ili godine), puno toga se može promijeniti. S gledišta implementacije, razvoj na kraju se mijenja brže nego ikad prije. Proteklih nekoliko godina došlo je do promjene paradigmi iz korisnih klasa za višekratnu upotrebu (mislite .margin-sm) u BEM sintaksu, od monolitnih sass izlaza do opsega stilova unutar React komponenti. A kako CSS specifikacije dodaju sve više i više funkcionalnosti, od rešetki do varijabli, budućnost je daleko od fiksne.

Vidio sam da nekoliko implementacija vodiča za stil uspijeva jer jednostavno nisu mogle ići u korak s prednjim krajem. Natečene datoteke poput bootstrap-a kada su svi zabrinuti zbog performansi. Rubinski dragulj u trenutku kad je čvor poletio. Iako se čini da je React gotovo dizajniran za sustave dizajniranja sastavnih dijelova, promjenjiva priroda tehnike čini čitav pojam stvaranja trajnog i zauvijek sustava malo vjerojatnim.

3.) Održavanje podrazumijeva disciplinu

S dizajnerske strane, pretpakirane komponente često nemaju fleksibilnost potrebnu za korisničko iskustvo. Gotovo je nemoguće ne izmijeniti određenu instancu komponente ili lutalice iz vodiča za stil (da, čak i zamišljeno osmišljenog). Na kraju, teško je raspravljati se za dosljednost UI-ja oko boljeg UX rješenja.

Neugodna i neispričana priča je da je teško voditi stil nakon početnog uzbuđenja teško. Mnogo je manje zabavno od pisanja početne studije slučaja "folio".

Ali, ali - sustavi dizajniranja i dalje?

Ako ovo zvuči sumorno, nije moja namjera odvratiti nikoga da stvori vodič za stil. Unatoč izazovima, i dalje sam veliki zagovornik dizajnerskih sustava iz svih razloga zašto ih svi spominju, posebno onih koji se odnose na suradnju više tima. Ali nakon što sam osobno svjedočio dizajnerskim sustavima koje sam stvorio dostižu različite razine aktualizacije, naučio sam nekoliko stvari koje će vam pomoći postaviti očekivanja.

Što bih učinio sljedeći put

1.) Dohvati cjelokupni tim

To je uobičajena točka u postojećoj literaturi, ali ne može se naglasiti dovoljno. Većina ljudi će se založiti za sustav dizajna u apstraktnom obliku; to nije ono što mislim pod buy-inom. Kao i svaki drugi projekt, sustav za dizajn trebao je dodijeliti resurse u obliku vremena dizajniranja i razvoja. Programeri se također trebaju složiti (preko timova) o detaljima tehničke implementacije. Voditelji proizvoda i dionici moraju shvatiti da je to vrijedno ulaganja. U onome što često može biti slogan razvoja značajki teško je prioritetno izraditi korisničko sučelje. Obavezno osigurajte da biblioteka uzoraka ima više od pukog pružanja usluga usnama: preuzmite je na mapu puta. Ali što bi točno trebalo biti na planu puta?

2.) Postavite prednost laganoj ponovnoj koži na starijim dijelovima proizvoda

Možemo imati tendenciju da želimo raditi stvari na pravi način. Ne bismo trebali trošiti nekoliko dana inženjerskog napora na sustav koji ćemo ionako baciti, „kad redizajniramo“. Ovdje sam da vam kažem da neke stranice uskoro neće biti redizajnirane. Ako dijelovi proizvoda nisu ukrašeni glavnim dizajnom, uzmite vremena da ažurirate nekoliko malih stilova - stvari koje korisnik može primijetiti i nisu previše teški za regresijski test. Ne brinite ako se to događa pomoću stvarne biblioteke. Ažurirajte nekoliko boja gumba, radijusa obruba, stila unosa i fontova. To bi moglo uključivati ​​malo pronalaženje i zamjenu na nekom starom css-u kojeg nitko ne želi dodirivati, ali spriječit će vas da dodate još jedan stil gumba. To će vam pomoći u rješavanju problema koji ste odlučili riješiti - dosljednosti - i oduševiti vašu marku tima.

3.) Tretirajte sustav dizajna kao i bilo koji drugi projekt proizvoda: započnite s malim

Ako razmislite, postupak dizajniranja sustav je pomalo anomalija u modernom razvoju proizvoda. Veliki napor na dizajnu, koji je kulminirao predloženim totalnim pregledom web mjesta? Da radim na nekoj značajki, nikad ne bih potrošio tjedana ili mjeseci dizajnirajući savršen sustav koji bi imao sve odgovore. Željela bih početi od malih i učiti. Isprobajte te ideje s pravim ljudima, skupite povratne informacije i učite se na mojim greškama. Mislim da bi isto moglo biti i za sustave dizajna.

Ako imate ograničene resurse, možda bi imalo smisla smanjiti opseg vašeg početnog stila. Učinite samo gumbe ili unose ili ljestvicu tipa na svojim marketinškim stranicama. Mali, postupni koraci pomoći će vam da naučite kako trebate izgraditi svoje komponente, a male pobjede pomoći će motivirati tim. To će vam također pomoći da naučite pravu razinu fleksibilnosti u odnosu na specifičnosti svojih pravila, što je nemoguća ravnoteža koja se vremenom pojednostavljuje. Gledanje stvari u divljini pomaže vam da shvatite što vam treba.

4.) Ne čekajte druge. Vodite primjerom.

Pri dizajniranju dizajnerskih sustava uvijek sam imao viziju kako će se razne komponente uklopiti - kako će biti osjetljive jedna na drugu, dodajući i oduzimajući margine ovisno o kontekstu, pametno nasljeđujući stilove i slijedeći konzistentnu mrežu. Ako ste dizajner koji šifrira, često vam ne može pomoći, ali imate mišljenja o implementaciji.

Kao dizajnera, stalo mi je do izrade stvari, ali u konačnici sam odgovoran ne inženjerstvu, već našim korisnicima. A naše korisnike nije briga je li gumb na koji su kliknuli svježe isječenu komponentu React ili je napisan ispočetka unutar starog kôda koji ćete baciti. Teško je ispravno raditi stvari iz perspektive koda. Nemojte dopustiti da vas razvojni idealizam sprječava u dosljednom korisničkom iskustvu. Surađujte s inženjeringom - čak i sami inženjer - ali nemojte se previše oslanjati na vanjske timove za svoj uspjeh. Usredotočite se na to da budete vjerni svojim dizajnerskim odlukama i obrascima. Vodite primjerom. Ako ste dosljedni, inženjeri će primijetiti i (nadamo se) slijediti to.

5.) Na kraju, nemojte se uspoređivati ​​s drugima na internetu

Ovo je možda najteža točka, ali ako se osjećate neprimjereno, možda je vrijeme da redefinirate što uspjeh znači za vaš tim. Ako je uspjeh sveobuhvatni sustav dizajniranja, stvoren vrhunskom tehnologijom, implementiran preko svake dodirne točke proizvoda i otvoren za zajednicu, možda vam je nedostajalo. Ali za svaki Lightning sustav dizajna postoji snažan tim od 8 dizajnera koji samo pokušavaju dati svoj maksimum s ograničenim vremenom i resursima. Kad se osvrnem na dizajnerske napore koje sam započeo, postoje mnoge male pobjede koje mogu proslaviti. I moji timovi su dosljedno uravnotežili brige višeg reda (poput jezika dizajna) s nižim redoslijedom briga o našoj maslovanskoj hijerarhiji potreba dizajniranja proizvoda. Ne treba vam soba za korištenje kako biste dobili povratne informacije korisnika. A za stvaranje sjajnih proizvoda ne treba vam sustav dizajna.

Epilog

U proteklih mjesec dana dizajner u našem timu stvorio je biblioteku ikona u Reactu i uz pomoć podržanih devs-a je mogao dodati u našu zajedničku web mapu i ažurirati ikone na web mjestu. To je mala pobjeda, na čelu dizajna i PM-a. Čak imamo i mali mikroskop sa svim ikonama i referencama na njihov kod. Mali po obimu (ali još uvijek prilično truda), sada moramo započeti uspješan put naprijed. Ako vodite mršavi dizajnerski tim, nadam se da ćete uspjeti oponašati naš uspjeh počevši od malih nogu i postupno napredovati prema boljem i dosljednijem korisničkom iskustvu.

Imate li primjere za to da sustav dizajna podliježete isporuci ili ga živite? Volio bih čuti vaše priče u komentarima ispod.