Dizajn koji se temelji na komponentama

Poboljšanje vašeg dizajnerskog procesa za izgradnju korisničkog sučelja

Komuniciranje estetskog ponašanja

Imamo nevjerojatan dizajnerski tim. Naša suradnja bio je jedan od glavnih razloga uspješnosti našeg razvojnog tima. Imaju puno uvida u izgradnju dobro strukturiranih dizajnerskih sustava, a od njih učim nešto novo gotovo svakodnevno. Jedna od najboljih stvari koje smo napravili u suradnji s njima je prebacivanje s dizajna temeljenog na stranici na komponentama. Želim malo podijeliti o tome kako smo došli do te odluke i koristi koje smo vidjeli.

Iz mog iskustva, dizajn na temelju stranice standardni je pristup za koordinaciju razvoja i dizajna. Koncept web stranice kao zbirke stranica pokreće postupak dizajna. I ima smisla graditi aplikacije na ovaj način. Stranice pružaju kontekst za komponente. Pomažu korisnicima da razumiju svoju svrhu, funkciju i ponašanje. Na primjer, kad vidimo stranicu za prijavu, razumijemo kontekst e-pošte i obrasca zaporke koji su nam predstavljeni. Također možemo pretpostaviti njegovo ponašanje kada korisnik pruži nevaljani unos i kako će funkcionirati kad se uspješno provjeri autentičnost. I ne samo to, ta koordinacija dolazi s prilično definiranim ulogama i odgovornostima. Dizajneri su opremljeni alatima koji su usredotočeni na komuniciranje estetike dizajna, a razvojni alati usmjereni su na kontrolu ponašanja i funkcionalnosti. Obično vidim da se ovaj postupak radi u nekoj varijaciji ovoga:

  • Dizajneri stvaraju početne makete stranica na temelju unosa klijenta
  • Voditelj projekta i / ili vođa tima dijeli nacrte u karte za programere
  • Postoji razvojni tim koji će realizirati ono što je kreiralo
  • Kako se ponavlja, kreiraju se nove karte i postupak se ponavlja

Uz dovoljan nadzor, ovaj tim može biti vrlo uspješan za timove za razvoj dizajna, ali to nije bez problema. Unazad sam vidio sjajan tvit koji ilustrira ovu točku:

Ovaj tvit govori posebno o ispitnim ismijavanjima, ali također govori s ograničenjima puno alata za dizajn. Iako su izgled stranice i oblikovanje sastavnica vrlo važni, oni predstavljaju samo mali dio planiranog dizajna. Mnogi se alati za dizajn bore za točan opis ponašanja i funkcionalnosti komponenti. Iako imamo fantastične dizajnere, potrošili su ogroman napor pokušavajući komunicirati svako moguće stanje unutar konteksta stranice. Otkrili smo da ovaj postupak stvara značajnu količinu dupliciranog napora, čak i uz vrhunske alate.

U isto vrijeme, naš razvojni tim imao je karte koje su se vraćale iz QA-e. A puno ih je bilo zato što ponašanje komponenata nije bilo onako kako se očekivalo. Udarali smo se s obje strane.

Trebao nam je bolji sustav.

Unesite dizajn zasnovan na komponentama

Nekoliko velikih utjecaja dovelo nas je do komponentnog sustava projektiranja. Prvi je bio React, koji naš frontend tim koristi za razvoj naših aplikacija. React je strukturiran oko komponenata, i kao rezultat toga, naš razvojni tim razmišlja u tim izrazima. Uzorak atomskog dizajna i BEM metodologije Brad Frost također je pružio značajnu inspiraciju. U isto vrijeme, naš dizajnerski tim otkrio je da im izoliranje komponenata i različita stanja omogućuju jasnije artikuliranje njihovog ponašanja i funkcionalnosti. I dalje stvaraju stranice kako bi opisali protok korisnika kroz aplikaciju, ali više ne trebaju objašnjavati svako lebdjenje i stanje pogreške u kontekstu te stranice. Prvo stvarajući izolirane, proširive komponente, uspjeli smo ukloniti mnogo dupliciranih napora za oba tima. To je također transformiralo naš proces. Manje je primirja i stalnije suradnje. Članovi našeg dizajnerskog i razvojnog tima bolje razumiju namjere i ograničenja drugog.

Pa što zapravo uključuje ovaj proces? Prvo su naši dizajneri razvrstali zajedničke elemente s našeg korisničkog sučelja. Ovo nije bio iscrpan, odjednom pristup. Ako se dobro sjećam, elementi teksta i zaglavlja bili su neki od prvih koji su dokumentirani. Bilo je i veza i nekoliko vrsta gumba. Nije bilo lako, ali bilo je dovoljno za početak. Ti su elementi korisničkog sučelja dodani vodiču za prikaz različitih stanja. Na primjer, gumbi imaju zadano stanje, zadržavanje miša, aktivno i onemogućeno stanje.

Nakon što su ove komponente dokumentirane, naš razvojni tim stvorio je ulaznice kako bi ih sagradio u zasebnoj biblioteci komponenti koje se mogu uvesti u bilo koju od naših aplikacija. Naše obrazloženje za izgradnju komponenti izvan naše aplikacije bilo je da ih održimo stabilnima i stabilnima. To je također omogućilo našem dizajnerskom timu da provjeri dizajn i ponašanje ovih komponenti prije nego što su ikada postali za našu primjenu. Dodali smo i testove kako bismo osigurali da se te komponente ne bi neočekivano promijenile. Nakon provjere tih komponenti polako su integrirane u našu aplikaciju.

U tijeku je postupak

Ovo je još uvijek živi eksperiment, ali rezultati su bili sjajni. Naše su komponente stabilne, razvojni programeri ne moraju toliko razmišljati o stvaranju novih jednokratnih komponenti, a dizajneri su mnogo toga usvojili. Još jedna velika nuspojava je da dizajn temeljen na komponentama potiče komunikaciju između naših timova. Mi smo angažirani u postupku naših dizajnera i omogućava nam postavljanje pitanja dok idemo. Također pruža mogućnosti davanja povratnih informacija. Ove uske povratne veze omogućuju nam da ispravno ispravimo prvi put. I zbog naše biblioteke komponenti React, možemo biti sigurni da je naše korisničko sučelje stabilno. Sve to nadovezuje se na produktivan, dosljedan tijek rada dizajnera i razvojnih programera i dosljedno korisničko iskustvo u svim našim aplikacijama.

Hvala na čitanju!

Možete me naći na Twitteru i GitHubu. Ako ste uživali u tome, pretplatite se i na moj newsletter! https://tinyletter.com/alanbsmith