Svaki loš handoff dizajnera gotovo se može osjetiti. Negdje u daljini, barem jedan developer tragično izdahne. Inspirirana ovom bolnom stvarnošću i željom da spasim pokoji živac (ili život), odlučila sam se u ovom članku posvetiti temi organizacije dizajnerskih dokumenata i kvalitetnog handoffa.

Handoff je inovativan proces koji ne ovisi samo o dizajnerima, već i o developerima. Prvo vrijedi razumijevati na što su developeri u timu naviknuli i što očekuju. Ne postoji univerzalni model koji savršeno funkcionira za sve timove. Zajedničkom komunikacijom se ovaj proces uvijek razvija i nadograđuje.

Svaki handoff bi trebao početi rano u procesu, a ne na kraju kada već imamo stotine dizajniranih ekrana. S ovim na pameti valja voditi računa kako ćeš unaprijed organizirati svoje dokumente i kako ćeš svaki dio dizajna iskomunicirati s development timom.

Struktura dizajnerskih dokumenata

Svaki ozbiljan razvojni tim trebao bi imati style guide, component library, icon library (da, da, štedim te hrvatskih izvedenica) te dokumentaciju istraživanja. No, da bismo pojednostavili temu, u ovom članku fokusirat ćemo se isključivo na dizajn datoteke. Budući da u radu koristim Figmu, primjere ću prikazati upravo kroz nju.

Lijevo – Thumbnail za Designer Workspace, koji sadrži ključne informacije: naziv ticketa, status, naslov i kratak opis. Sredina – Thumbnail za Feedback File, s istim ključnim informacijama kao Designer Workspace. Desno – Postavljanje thumbnaila: desni klik na naziv boarda → odaberi “Set as thumbnail”. – Autorica N. Jerković

Kod razvoja većih funkcionalnosti ili cijele aplikacije, lako se nakupi hrpa ekrana koje treba smisleno organizirati. Najbolje ih je razdvojiti u jasne kategorije: 

• Designer Workspace: prostor za dizajnerske eksperimente i alternative koje ostaju unutar dizajnerskog tima (ne mora javnost sve znati haha).
• Feedback File: finalni dizajn ili verzije vrijedne pregleda od strane product ownera i developera.

Velike datoteke mogu se dodatno organizirati tako da stranice nose broj i naziv ticketa/user storyja. Time tim lakše prati zadatke i može jednostavno povezati Figmine stranice s ticketima unutar alata za upravljanje projektima (Jira, ClickUp ili slično).

Lijevo – Primjer organizacije Figma stranica u Cash App timu. Desno – Primjer organizacije Figma stranica u Dropbox timu. (Izvor:Figma)

Kod manjih tema unutar aplikacije, dovoljno je koristiti jednu Figma datoteku, gdje se Designer Workspace i Feedback Page mogu razdvojiti na zasebne stranice. Tako se zadržava preglednost bez potrebe za dodatnim datotekama.

Primjer kako su Designer Workspace i Feedback Page organizirani na različitim stranicama unutar iste Figma datoteke. – Autorica N. Jerković

Figma podržava emojije u naslovima datoteka i stranica tako da svakodnevno “štemanje” možeš učiniti zabavnijim u tih 30ak sekundi dok biraš primjereni emoji. Ne samo da su zabavni, emojiji pomažu timu da brže vizualno registrira sadržaj stranica.

Može se dogoditi da na istoj temi radiš desetke izmjena dizajna ili surađuješ s više dizajnera. Vrlo lako može nastati kaos i nesporazum u komunikaciji ako se ne evidentira tko je što i kad radio prošlog ljeta. Ostavimo loš millennial humor po strani i dotaknimo se sekcija. Figma je ovu chef’s kiss funkcionalnost uvela prije okruglo dvije godine. Sekcije su ubrzale proces i olakšale kategorizaciju ekrana.

Primjer Figma sekcija. – Autorica N. Jerković

Struktura handoffa

Interakcije:

Kako bi dizajn bio jasniji i priča konzistentna, važno je dodati tijek interakcija na ekranima. Unutar zadanog korisničkog toka treba prikazati što se događa na svakom sljedećem ekranu kada korisnik klikne na određeni element. Time se olakšava razumijevanje funkcionalnosti i osigurava precizniji handoff za development tim.

Strelice, označene žutim krugovima, prikazuju korisničke interakcije i upućuju na to što će se dogoditi na sljedećem ekranu desno od trenutačnog. – Autorica N. Jerković

Interakcije možeš vizualizirati pomoću mouse pointera, uz očekivani tijek akcije na svakom sljedećem ekranu s desne strane. Svaki novi case postavlja se u novi redak, gdje predstavljamo korisnikove klikove (ili tapove na mobilnom ekranu) s lijeva na desno.

Primjer:

• U jednom retku prikazuješ što se događa kada korisnik klikne na Login.
• U sljedećem retku ispod prikazuješ tijek za Sign Up.
• Daljnji redci mogu pokriti error handling, npr. unos krive lozinke i odgovarajuće poruke o grešci.

Flow sa strelicama koje služe kao indikatori korisničkih interakcija, prikazujući smjer i tijek radnje prema sljedećem ekranu.  (Izvor:Overflow)

Osim mouse pointera (ili finger tapa), možeš koristiti strelice, koje su u nekim slučajevima fleksibilnije. One omogućuju razgranavanje slučajeva s jednog ekrana. Na primjer, ako ekran sadrži dva različita linka koja vode na različite ekrane, strelicama možeš jasno prikazati oba smjera navigacije.

Jedno od brzih i pristupačnih rješenja je Figma plugin Autoflow. Jednostavno klikneš na komponentu, držiš SHIFT i klikneš mišem na sljedeći ekran. Strelice će se automatski prikazati. U ovom slučaju, odabrala sam drečavu zelenu kako bih zadovoljila onaj “add a pop of color” sindrom. – Autorica N. Jerković

Edge case-ovi

U prethodnom poglavlju pisala sam o interakcijama i načinu na koji ih možeš prikazati. Ti sljedovi mogu predstavljati edge case-ove. Koliko god nam developeri bili dragi, to ne znači da volimo njihove pozive u pomoć u kasnim satima ili dok se pokušavamo usredotočiti na nove zadatke.

Edge case je problem ili situacija izvan idealnih korisničkih tokova, a može uključivati i error handling. Ove dvije stvari često su viđene kao babaroge jer ih je lako zaboraviti i predvidjeti, a mogu izazvati kaos ako se o njima ne vodi računa unaprijed.

Nerijetko se događa da dizajner tek pri razradi edge case-ova shvati da mu logika od početka ne štima najbolje. Zato odvoji vrijeme za skiciranje ideja, case-ova, error handlinga, pa čak i tooltip-ova za različite scenarije, a zatim sve to prenesi u Figmu. To će kasnije pomoći tebi i developerima da steknete širu sliku, a ne samo scenarij sa sunčanim naočalama.

Napomene i opisi

Figma dokument s opisima i komentarima. – Autorica N. Jerković

Možeš naštancati komentare po Figma stranici, ali bolje je uredno posložiti opise ispod ekrana ili pored komponenti. Ako radiš u većem timu ili surađuješ s više dizajnera, obavezno dodaj svoje ime ispod opisa da ne bi bilo “ups od koga stiže ovo prosvjetljenje ili fix ideja”.

Opisi komponenti. (Izvor:Web accessibility annotation kit)

Za detaljne napomene i opise možeš koristiti besplatan Figma library nazvan Web Accessibility Annotation Kit. Ove komponente pomažu u prikazivanju namjere dizajna koje nije moguće prenijeti isključivo vizualnim putem. Iako je primarno napravljen za web korisnička iskustva, može se koristiti i u šire svrhe.

Ready for dev

Ova opcija zaslužila je svoj podnaslov jer sam na svoje oči svjedočila izdisaju developera nakon što je otvorio Figma dokument i ugledao sedam različitih dizajn opcija za istu web podstranicu. Neki od tih prijedloga bili su godinama stari, a nigdje nije bilo jasno naznačeno što je finalni dizajn. Očekivano, to je usporilo produkcijski proces i izazvalo nečiju duševnu bol.

Potaknuta ovim bolnim prizorima, moram se opet osvrnuti na Designer Workspace i Feedback File s početka ovog članka. 

• Designer Workspace služi za sve dizajnerske ideje i varijacije te ostaje kao arhiva i nakon završetka zadatka.
• Feedback File sadrži samo najnovije prijedloge koji idu u raspravu s timom, dok se sve starije varijacije brišu.

Nikoga ne zanima koje su ti ideje padale na pamet još u doba korone.

Lijevi klik na ‘</>’ ikonicu postavlja sekciju u status ‘Ready for dev’, a taj status postaje vidljiv i pored naslova stranice. – Autorica N. Jerković

Kada se tim usuglasi oko rješenja, dizajneru je dovoljno da na vrhu sekcije klikne na </> botun i voilà! Time se brzo smanjuje potreba za beskonačnim prevrtanjem poruka u kasne sate.

Eksportiranje

Opcionalno za dizajnere koji rade s developerima koji još nisu spremni na nekoliko dodatnih klikova unutar Figme: možeš im eksportati odabrane elemente (u x2 veličini zbog retine) ili SVG ikone i poslati ih odvojeno.

Primjer exporta ikonice. – Autorica N. Jerković

Povratne informacije i provjere

Još jedan način za smanjenje broja letećih poruka tipa “Možeš li uskočiti na brzi poziv?” jest jasna komunikacija unutar tima od samog početka rješavanja problema. Također, dizajner bi trebao prilikom handoffa uputiti developere na sve ključne pojedinosti.

Ponekad se dogodi da implementacija ne odgovara u potpunosti dizajnu. Zato je korisno uskočiti u staging fazi i provjeriti što su developeri pripremili.

Suma sumarum

Iz prakse je jasno da poboljšanje handoff procesa podiže učinkovitost proizvodnje i čuva zdrav razum UX/UI dizajnera, pa čak i cijelog tima.

Za kvalitetan handoff i mentalno zdravlje svih nas u IT-u, evo sažetka ključnih koraka:

• Organiziraj dizajnerske dokumente (posebne datoteke za dizajnere i za cijeli tim)
• Dodaj interakcije
• Uvrsti edge case-ove (error handlinge i tooltipove)
• Nadopiši napomene i opise
• Naznači “Ready for dev“
• Eksportiraj elemente (po potrebi)
• Komuniciraj i provjeri