Izgradnja vizualnog jezika: iza kulisa našeg dizajnerskog sustava Airbnb

Radeći na razvoju i dizajniranju softvera, od nas se često traži isporuka jednokratnih rješenja. Ponekad radimo u vremenskim ograničenjima, a ponekad se još nismo dogovorili o naprijed. Ova jednokratna rješenja nisu sama po sebi loša, ali ako nisu izgrađena na čvrstom temelju, na kraju ćemo se morati vratiti otplaćenim tehničkim i dizajnerskim dugovima.

Vizualni jezik je poput bilo kojeg drugog jezika. Nesporazumi nastaju ako jezik ne dijele i ne razumiju svi koji ga koriste. Kako proizvod ili tim raste, tako su i izazovi unutar tih modaliteta.

Dizajn se oduvijek uglavnom odnosio na sustave i kako stvoriti proizvode na skalabilan i ponovljiv način. Od boja Pantone do Philips vijaka, ovi sustavi omogućuju nam upravljanje kaosom i stvaranje boljih proizvoda. Digitalni su proizvodi možda najplodnije tlo za implementaciju ovih sustava, ali to se često ne smatra prioritetom.

Jedinstveni sustav dizajna ključan je za bolju i bržu izgradnju; bolje, jer kohezivno iskustvo korisnici lakše razumiju i brže jer nam pruža zajednički jezik za rad.

Zašto su nam potrebni sustavi dizajna

Airbnb je tijekom godina doživio velik rast. Trenutno se naš odjel za dizajn sastoji od gotovo desetak timova s ​​funkcijama i ishodima. Postalo je jasno da su nam potrebni sustavniji načini za usmjeravanje i iskorištavanje naših kolektivnih napora. Iako smo prepoznali ove izazove u tvrtki, vjerujem da su simptomi većih problema softverske industrije.

Premalo ograničenja
Dizajn softvera ima malo fizičkih ograničenja u odnosu na mnoge druge dizajnerske discipline. Ovo omogućava mnoštvo rješenja za svaki zadani izazov, ali otvara je i za neusklađena korisnička iskustva. Kao vlasnici proizvoda i dizajneri moramo stvoriti i slijediti vlastita ograničenja.

Višestruki dizajneri i dionici
Softver ljudi često grade ekipe, ponekad nevjerojatno velike ekipe. Izazov stvaranja koherentnih iskustava množi se eksponencijalno jer se više ljudi dodaje u kombinaciju. Također s vremenom, bez obzira koliko je tim malen ili dosljedan, različiti će ljudi pridonositi novim rješenjima i stilovima, dovodeći do različitog iskustva.

Mnoštvo platformi
Naš proizvod moramo isporučiti na mnoštvu platformi i uređaja. Održavanje sinkroniziranih značajki i dizajna iziskuje značajan napor, često zahtijeva da se isti rad ponavlja na svim ovim platformama.

Softver kao kontinuum
Još jedna jedinstvena stvar softvera je ta da se, iako se može smatrati proizvodom, zapravo ne troši i zamjenjuje se poput tradicionalnih potrošačkih proizvoda. Šifra i dizajni stvoreni prije mnogo godina još uvijek postoje na mnogim mjestima, čak i nakon što se krajolik tvrtke i njen proizvod značajno promijenio. To zahtijeva stalno održavanje i nadogradnju.

Početak posla

Da bismo riješili ove izazove i ubrzali proces donošenja odluka, okupili smo malu grupu dizajnera i inženjera [2]. Počistili smo kalendare, rezervirali vanjsko studijsko mjesto tik izvan sjedišta Airbnb-a i posvetili se dizajniranju i izgradnji dizajnerskog jezičnog sustava (DLS).

Cilj koji smo postavili za DLS bio je stvaranje ljepšeg i pristupačnijeg dizajnerskog jezika. Naši bi dizajni trebali biti unificirane platforme koje postižu veću učinkovitost kroz dobro definirane i višekratne komponente. Da bismo fokusirali svoje napore, smanjili smo početni opseg stvaranja sustava prvo na matičnim platformama (iOS i Android).

Započeli smo s revizijom i ispisom mnogih naših dizajna, i starih i novih. Postavljajući tokove jedan pored drugog na jednoj ploči, mogli smo vidjeti gdje su se i kako prekinula iskustva i gdje je potrebno započeti promjene. Shvatili smo da je najbolji način za početak rješavanjem problema. Svatko od nas se fokusirao na redizajn zaslona ili područja proizvoda, a uspostavili smo nekoliko principa koji će nas voditi prema tim individualnim dizajnom:

Jedinstveni: Svaki komad dio je veće cjeline i treba pozitivno pridonijeti sustavu u razmjeru. Ne bi trebalo biti izoliranih značajki ili odljevaka.

Univerzalno: Airbnb koristi svijet širom svijeta. Naši proizvodi i vizualni jezik trebaju biti dobrodošli i dostupni.

Ikonični: fokusirani smo kada je u pitanju i dizajn i funkcionalnost. Naš rad bi trebao smjelo i jasno govoriti ovom fokusu.

Razgovorni: Korištenje pokreta ulijeva nam život u proizvode i omogućava nam komunikaciju s korisnicima na lako razumljiv način.

Polaganje temelja

Prije početka dizajna, već smo stvorili osnovni stilski vodič, koji smo nazvali temeljem. Ovaj je temelj slabo definirao našu tipografiju, boje, ikone, razmak i informacijsku arhitekturu. Zaklada se pokazala ključnom za usmjeravanje našeg rada u jedinstvenom smjeru, a istovremeno nam je omogućila da pojedinačno istražimo kreativna dizajnerska rješenja.

Na taj način osjetili smo da svi radimo zajedno, prema istoj ideji. Pregledavajući naš kolektivni rad na kraju svakog dana, počeli smo primjećivati ​​obrasce. Popravljali smo tečaj po potrebi i počeli definirati naše standardizirane komponente.

Stvaranje komponenata

Tradicionalno, mnogi stilski vodiči definiraju komponente kao atomske komponente, koje se zatim koriste za izgradnju složenijih molekula. U teoriji, ovo uspijeva u stvaranju koherentnih i fleksibilnih sustava. Međutim, u praksi se često događa da se ovi ponovni upotrebljivi atomi koriste na različite načine, omogućujući stvaranje svih vrsta molekula. Opet, ovo otvara vrata za sve vrste neskladnih iskustava i čini sustav težim za održavanje.

Umjesto da se oslanjamo na pojedinačne atome, počeli smo razmatrati naše komponente kao elemente živog organizma. Oni imaju funkciju i osobnost, definirani su skupom svojstava, mogu koegzistirati s drugima i mogu se samostalno razvijati. Jedinstveni jezik dizajna ne bi trebao biti samo skup statičkih pravila i pojedinačnih atoma, već ekosustav koji se razvija.

Objedinjeni jezik dizajna ne bi trebao biti samo skup statičkih pravila i pojedinačnih atoma; to bi trebao biti evolucijski ekosustav.

Na primjer, naš korisnički avatar avatar možda bi u početku bio definiran vodičem za stil, ali njegova krajnja upotreba na platformi može zahvatiti stotine permutacija, što otežava uspješno ažuriranje elementa avatar niz put. "Ako želimo promijeniti bilo koji od ovih stvari možemo biti sigurni da ne razbijamo druge ekrane.

Svaka komponenta definirana je potrebnim elementima (kao što su naslov, tekst, ikona i slika), a ponekad može sadržavati i fakultativne elemente. Ti su elementi definirani u dokumentu Sketch kao i u kodu. Umjesto da sami dopustimo razdjelnice, zahtijevamo da svaka komponenta ima djelitelj, koji je vidljiv ili skriven na temelju logike prikaza.

Sastavljanje knjižnice

Tijekom stvaranja ovih komponenti, prikupili smo ih u glavnoj datoteci koja se zove knjižnica, a na koju smo se pozivali tijekom procesa dizajniranja. Nakon tjedan ili dva počeli smo primjećivati ​​velike skokove produktivnosti koristeći knjižnicu prilikom ponavljanja dizajna. Jednog dana, zajedno sastavljajući last-minute prototip, naš tim je uspio stvoriti gotovo 50 ekrana u samo nekoliko sati, koristeći okvir koji nam je knjižnica pružila.

Dok je knjižnica rasla, počeli smo organizirati pojedine komponente u umjetničke ploče koje sadrže slične predmete. Te su ploče organizirane prema općim kategorijama u: Navigacija, Oznake, Sadržaj, Slika i Specijalnost.

Stvorili smo jedan skup ovih komponenti za telefone (iOS i Android) i odatle ih prilagodili veličinama tableta. Komponente tableta uglavnom su iste kao i one za mobilne uređaje, a na tehničkoj razini kod treba postojati samo jednom u dva različita stila. S ovim sustavom komponente se mogu razlikovati po izgledu i položaju, slično kao što djeluje brzi dizajn za web. Dizajneri mogu jednom dizajnirati zaslon koristeći uobičajene komponente, a može se lako prilagoditi različitim veličinama zaslona, ​​kao i iOS-u i Androidu.

Za tablet smo stvorili nekoliko jednostavnih koncepata izgleda, kao što su Focus Views, koji fokusira sadržaj na stranici, modalima i izgledima na 2 stupca i rešetki.

Sve komponente i pogledi izgrađeni su s našim vlastitim okvirom tehničkog pogleda koji upravlja tim stilovima, stanjima i prilagodljivošću. [2]

Naučene lekcije

Znali smo da je to izazovan projekt. To je značilo preoblikovanje i obnovu većine pogleda u našoj aplikaciji. Uspjeli smo ostvariti cilj stvaranja sustava i puštanja novih aplikacija 17. travnja. Kao i kod svakog projekta, postoje i stvari za koje bismo željeli da bismo učinili drugačije.

Nisu sve komponente stvorene jednakim. U većini aplikacija postoji skup komponenti koje se često ponavljaju. Za nas su te komponente redovi (ili ćelije tablice). Gledajući unatrag, volio bih da smo odvojili više vremena za razmišljanje o redovima i osmislili snažniji skup uzoraka i komponenti. Na kraju smo završili s mnogim različitim vrstama s nekim nedosljednostima.

Skica. U početku smo te komponente pokušali stvoriti kao simbole u Sketch-u, što je rezultiralo neredom. Čak i sada, naše datoteke Sketch ponekad su izazovne za održavanje. Krećući se naprijed, nadamo se da ćemo pronaći bolje načine održavanja i stvaranja novih komponenti. [3]

Dokumentacija. Ovaj projekt od nas je zahtijevao da djelujemo u vrlo kratkom roku, zbog čega smo previdjeli dio dokumentacijskog postupka. Nedostatak detaljne dokumentacije stvorio je zbrku koju je moguće izbjeći. Baš kao kod kodiranja, dokumentirani sustavi dok su stvoreni najvažniji su postupak. To se mora učiniti prije ili kasnije, a dokumentiranje tijekom procesa stvaranja omogućava jednostavnije donošenje odluka.

Zaključak

Budući da se jezik dizajna i kôd često dijele, sada možemo izrađivati ​​i puštati značajke na svim izvornim platformama otprilike u isto vrijeme. Razvoj je općenito brži jer se inženjeri proizvoda mogu više usredotočiti na pisanje logike značajki, a ne na kod za prikaz. Uz to, inženjeri i dizajneri sada imaju zajednički jezik.

Dizajneri su također bili uzbuđeni zbog sustava. Omogućuje da se recenzije proizvoda usredotoče na stvarne koncepte i iskustva dizajna, a ne na padding, boje i vrste izbora. DLS nam pruža zajedničko razumijevanje našeg vizualnog stila i pojednostavljuje doprinose jedinstvenom sustavu. Ovaj sustav također omogućuje svima nama prototipiranje i eksperimentiranje s idejama uz visoku vjernost brže i s nižim troškovima.

Vjerujem da se uz pomoć ovih sustava možemo više usredotočiti na stvarna korisnička iskustva i koncepte koje želimo stvoriti u budućnosti.

Odgovorio sam i na neka pitanja u vezi s Designer News AMA-om.

Ažuriranje: Za dodatne detalje i novija zbivanja oko našeg dizajnerskog sustava, pogledajte moj razgovor na konferenciji Design Systems 2018, Helsinki, Finska.

fusnote:

[1]: Mnogi veliki projekti odnose se na timove i uvijek ima previše ljudi koji bi im zahvalili, ali želio sam istaknuti malo ljudi koji su omogućili da se ovaj projekt dogodi:

Bek Stone, Adam Michela, Amber Cartwright, Alex Schleifer, Michael Bachand, Paul Kompfner, Sean Abraham, Salih Abdul-Karim, Michael Sui + mnogi drugi u dizajnerskim i inženjerskim timovima. Hvala Josh Leong, Sola Biu, Catherine Waite na čitanju ovog nacrta.

[2]: Ostavit ću ga jednom našem inženjeru da napiše više o tehničkoj strani DLS-a.

[3]: U našem slučaju želimo da ljudi mogu mijenjati veličinu simbola (npr. Da biste trebali dodati više sadržaja u zaglavlje). Ako trebate promijeniti ili slučajno promijeniti veličinu nečega, Sketch (2.5) će automatski promijeniti veličinu svake instance tog simbola. To će ubiti vašu skicu na nekoliko trenutaka i vjerojatno će zabrljati datoteku trajno (ponekad poništavanje ne radi). Zaključili smo stavljanje komponenti u grupe slojeva i puštali ljude da ih kopiraju i zalijepe.

Također koristimo git / github da olakšamo postupak ažuriranja datoteka. Mi ručno stvaramo i dodajemo nove komponente u našu datoteku skice matične knjižnice, te podnosimo zahtjeve za povlačenjem s zapisnikom promjena i generiranim png izvozom koji dokumentira promjene. Nakon toga datoteka Sketch završava u zajedničkoj mapi Box koja je povezana s predlošcima Sketch, tako da svi odmah imaju pristup novim komponentama.