Zaustavite dizajn sučelja, Počnite s dizajniranjem iskustava

Ovaj je članak dio serije o našim novim Smjernicama za sučelje.

Neuredan proces, neuredni rezultati

Prije 8 mjeseci, nakon što sam proveo neko vrijeme u agencijama, odlučio sam preuzeti novi izazov i ponosno sam se pridružio dizajnerskom timu BlaBlaCara.

U svojih prvih nekoliko tjedana sjećam se kako sam bio pogođen načinom na koji su radili ... Njihovi se alati manje ili više sastojali od prazne datoteke Sketch s praznim pločama umjetnina i dva telefona za testiranje kako bi napravili snimke zaslona aplikacije.

Dizajneri alata koje su koristili u BlaBlaCaru: prazna datoteka Sketch i 2 telefona za testiranje.

Da bi radili na stranici ili protoku, uveli bi svoje snimke zaslona u Sketch, obrezali ih, radili direktno na njima, maskirali neke elemente, stvorili neke nove, otvorili stare datoteke skica kako bi dobili komponente koje bi prije stvorili ... I sve dok sam sebi postavljao pitanja poput "koje su prave margine?", "Koje je prave veličine za gumb?", "Koje je prave boje?", itd. Stalno sam pitao kolege dizajnere koju datoteku mogu otvoriti da dobijem gumb ili gornju traku ... samo da na kraju stvorim novi ... i završim s potpuno nedosljednim rezultatom.

To zapravo izgleda ista stranica privatnog profila na Androidu, iOS-u, MWeb-u i Webu. Zašto je to tako drugačije?

Nered u harmoniji

Sjećam se da sam se pitao: "Kako za istu stranicu upravljaju različitim dizajnom s različitim logikama na različitim platformama?". Odgovor je relativno jednostavan: nisu se snalazili.

Njihov način rada bio je u redu za tim od 3, ali već smo vidjeli da može biti teško održati dosljednost tim koji brzo raste. Svi smo se složili da više ne želimo trošiti previše vremena na sučelja, već se fokusirati na iskustvo.

Odlučili smo riješiti naš problem i rješenje koje smo došli je zaista jednostavno:

Lego metafora u dizajnu: lego cigle su ekvivalent našim opekama komponenti korisničkog sučelja.

Lego kockice! Vjerojatno ste već čuli za metaforu Lega u dizajnu, lego cigle su ekvivalent našim komponentama. Ako uzmem kutiju istog Legosa, sve to mogu sagraditi ...

... hidroavion, automobil s mišićima i čak jebeni T-Rex!

Tako smo stvorili knjižnicu UI Lego Bricks kako bismo omogućili našim dizajnerima da rade isto! Sada s našim UI Lego Bricks ...

Uzorak UI cigle dizajneri koriste u tvrtki BlaBlaCar.

... oni mogu brzo napraviti stranicu ili čak protok, pa ih brže ponavljaju i testiraju.

Dizajneri sada mogu brže izrađivati, ponavljati i testirati.

Koliko vremena ovo uistinu štedi?

Vjerojatno se pitate koliko vremena zapravo možemo uštedjeti pomoću ove metode. Imali smo i dvojbi oko toga, pa smo odlučili napraviti jednostavan test. Uzeli smo stranicu s privatnim profilom i zamolili naše dizajnere da je obnove, neki s našim UI Lego ciglama, neki bez.

Ovo je stranica koju smo pitali od naših dizajnera za izgradnju s lego ciglama i bez njih.

Vremenali smo ih dok su radili, a rezultati su bili stvarno pozitivni: u prosjeku bi proveli 24 minute na stvaranju stranice bez Lego opeka, dok bi s Lego ciglama proveli samo 13 minuta. Ne kažemo da se pokušavamo usredotočiti na produktivnost, to nije poanta, ali dizajneri su zapravo potrošili 50% manje vremena razmišljajući o pikselima i 50% više vremena razmišljajući o iskustvu, a to je upravo ono što želimo.

Nema više ponavljanog rada

U BlaBlaCaru nikad nismo zadovoljni i nakon što smo neko vrijeme koristili naše UI Bricks i poboljšali ih s nekoliko malih iteracija, pomislili smo „Sigurno da možemo uštedjeti još više vremena!“

Neprestano smo promatrali njihove najčešće ponavljajuće i dugotrajne zadatke. Zapravo postoji jedna s kojom se svakodnevno susreću svi dizajneri: više platformi!

Jedna komponenta = Više platformi

Svi znamo koliko je neugodno napraviti stranicu za iOS da biste je zatim ponovo izgradili za Android i Mobile Web. Naporno smo radili na stvaranju biblioteke komponenti koje bi bile identične za svaku platformu, a istovremeno su u skladu s platformom. Naši dizajneri mogu dizajnirati samo jednu platformu, sigurni u spoznaju da, na primjer, razvojni programer može koristiti iOS ili Android dizajn za izradu iste stranice za mobilni web.

Uzmi prečace

Uspjeli smo dizajnerima uštedjeti 50% vremena na izgradnji sučelja, pokušavamo smanjiti broj platformi koje oni dizajniraju, ali ipak želimo uštedjeti puno više od toga. Ako danas pogledamo postupak stvaranja sučelja na BlaBlaCaru, evo kako izgleda:

Dizajneri skiciraju → slijede na žičane okvire → prototipove → i zatim dovršeni dizajn → koji bi tada krenuli u razvoj.

Kao što ste već shvatili, ne želimo da naši dizajneri troše vrijeme na piksele! Dakle, sljedeći je korak da naši dizajneri prijeđu izravno od skica do razvojne faze.

To se možda čini previše, ali toliko smo sigurni u naš sustav dizajna da vjerujemo da bi dizajner mogao dati skicu programeru i dobiti proizvodnu verziju u potpunosti usklađenu s našom bibliotekom komponenti.

Ne želimo da naši dizajneri više vremena troše na sučelja, želimo da se oni usredotoče samo na iskustvo.

Pravila koja smo slijedili

Inspiraciju smo iskoristili iz metodologije Atomic Design koju je stvorio Brad Frost, koji je nadahnuo kemiju i način na koji su složeni organizmi stvoreni od molekula koje su zauzvrat načinjene od atoma. Ako već ne znate ovu metodologiju, toplo savjetujem da ovdje pročitate njegov članak.

Primijenili smo ovu metodologiju na moćnu metaforu (LEGO) koja je bila duboka i gusta u značenju, a koja nam je pomogla u komunikaciji kako bi je ljudi brzo razumjeli i povezali s idejom. Ljudi iz svih područja tvrtke lako bi dijelili ideju bez da je mi objasnimo.

Nakon nekoliko mjeseci rada na našem dizajnerskom sustavu uspio sam izvući nekoliko velikih pravila kako pristupiti tome. To nije raketna znanost, ali zaista nam je pomoglo da se ne izgubimo:

  • Metafora: odaberite jaku metaforu kako biste ljudima pomogli da brzo shvate o čemu govorite, čak i ne objašnjavajući to. Odabrali smo LEGOS, ali postoje i druge ideje koje možete koristiti (kemija, fordizam, ekologija ...)
  • Komunikacija: ovo je jedno važno pravilo o tome kako ne učiniti da vaš projekt ne uspije. Komunicirajte što je ranije moguće sa svima u tvrtki: programerima, premijerima, znanstvenicima podataka, dizajnerima, generalnim direktorom ... Neka oni budu dio projekta.
  • Zajednički jezik: ništa što nema imena ne postoji. Pazite da se svi poravnaju s imenima koja dajete komponentama. Ne treba vam pretjerano tehnički, najvažnije je da svi nazivaju komponentu na isti način.
  • Pravila: za svaki izbor korisničkog sučelja potrebno je napraviti jasno pravilo. Ako ne možete objasniti izbor, pronađite pravilo. (O tome ću više govoriti u drugom članku)
  • Nema izuzetaka: Izuzetak je ono što vas brzo može dovesti do potpune nedosljednosti. Pridržavajte se svojih pravila i dizajna komponenti, čak i ako vam isprva izgleda čudno, nemojte praviti iznimke. Izuzeci se brinu o tome kad je vaš proizvod u potpunosti usklađen s vašim smjernicama.

Ne kažem da je moja metoda prava, čak bih rekla da ono što pokušavamo postići odgovara našoj viziji proizvoda, ali vjerojatno se ne bi uklopilo u agencijsko okruženje. Upoznao sam mnoge ljude koji su zainteresirani za rad na dizajnerskom sustavu i potpuno sam otvoren za raspravu, povratne informacije i rasprave. Zato, molim vas, podijelite svoja razmišljanja. Uskoro pišem precizniji članak o načinu na koji smo stvorili naš dizajnni sustav, ali u međuvremenu, molim vas kontaktirajte me ako želite više informacija! )