Ilustrirala ih je nevjerojatna Hannah Swann

Dizajn vremenske trake: Lekcije naučene na našem putovanju izvan Ganttove karte

U Asani tim za dizajn proizvoda smatramo jezgrom stvaranja pozitivnih rezultata za naše kupce i znamo da dobro dizajnersko razmišljanje uključuje razumijevanje tehničkih složenosti, razmatranja poslovanja i proizvoda i strateške odluke zasnovane na korisničkom iskustvu. Vjerujemo da dizajn treba informirati našu mapu puta i ohrabrujemo naše dizajnere da pomaknu granice i ponude nove ideje za poslovni softver. Ja ću istražiti kako smo primijenili ovu vrstu strategije dizajna proizvoda i razmišljanja o našoj značajki Timeline.

Naša misija s vremenskom linijom

Asana je platforma za upravljanje radom koja se koristi za praćenje rada kroz timove, a mnogi naši kupci navikli su se na tradicionalna, naslijeđena rješenja. No, kao i svi naši projekti, željeli smo da Timeline premaši očekivanja kupaca, a ne samo ispuni njihova očekivanja. Naš tim bio je u mogućnosti raditi kroz velike kompromise i donositi odluke utemeljene na dizajnu, orijentirane na upotrebljivost kako bi razvili sustav koji će našim korisnicima olakšati i nesmetano surađivati.

Istraživanje boli

Kada je započeo projekt Timeline, tim za dizajn proizvoda snažno je sinkronizirao s timovima koji su okrenuti kupcima, uključujući istraživanje korisničkog iskustva (UXR) i uspjeh korisnika. Već smo imali dobar osjećaj boli naših kupaca:

  • "Nemam vidljivost u cijelom svom projektu."
  • "Moram projekt podijeliti s šefom kako bi znali gdje smo."
  • "Moram vidjeti kako će moj rad utjecati na druge."

Svaka anegdota odražavala je temeljni problem: našim je kupcima bila potrebna vizualizacija koja im je mogla na prvi pogled pokazati što se događa u njihovim projektima, timovima i tvrtkama. Morali su vidjeti odnose između svog rada - čak i kad su zadaci bili vezani za različite odjele ili su imali različit status - kako bi mogli transparentno organizirati i raspoređivati ​​zadatke po timovima.

Ukopali smo se dublje u problem i primijetili kako su kupci često skakali između Asane i drugih alata. Neki su na Post -'s pisali zadatke i preslikavali ih na zid, a zatim to nekako pretočili u Asana. Ostali su koristili Excel proračunske tablice ili drugi Ganttov softver sličan tablici. No bez obzira na metodu, svi su tražili isto: holistički prikaz svojih projekata, upotpunjen vremenskim rokovima, zadacima i prekretnicama.

Nečiji je kalendar u Asani. Opisujući kako ispisuju kalendar i crtaju po duljini vremena.Netko koji koristi Excel za mapiranje svoje dugoročne vremenske trake

Tekuća tekućina

Bilo bi nam relativno jednostavno dodati tipičnu Ganttovu grafikon, to je vrsta trake koja prikazuje raspored projekta, uključujući ovisnosti između zadataka. Ali znali smo da to neće biti dovoljno da zadovolji sve naše kupce. Umjesto toga, željeli smo stvoriti fleksibilno korisničko sučelje - strukturu sličnu Ganttu, ali onu u kojoj bi korisnici lako mogli manipulirati zadacima na platnu. Nakon prikupljanja podataka od kupaca, došli smo do onoga što smo nazvali "Fluid" izgled.

Izgled tekućine

Izgled fluida izrađen je kao Ganttov grafikon, ali sa zaokretom: svaki je zadatak mogao biti raspoređen, međutim naši klijenti smatraju da je to stalo. Dizajn je bio fleksibilan, ali uredan - i diferencijator za Timeline. No, ovaj je pristup došao s novim izazovima u dizajnu.

Prvi nacrt zadataka na Vremenskoj traci s različitim trajanjem

Prelazak na tekućinu značio je uklanjanje lijevog stupca koji imaju većina tradicionalnih Ganttovih alata, a kao rezultat toga, kupci su imali poteškoće s razdvajanjem zadataka. Ako smo se željeli odmaknuti od tradicionalne Ganttove strukture i dalje biti pristupačni, morali smo se zapitati: Kako će korisnici moći pročitati ili razumjeti koji je zadatak što? Kako možemo učiniti očitim da korisnici mogu povući i ispustiti zadatke? Kako će sve ove interakcije djelovati na različitim razinama zumiranja?

Kako bismo bili sigurni da će Timeline biti intuitivna i jednostavna za upotrebu, mapirali smo sve scenarije zadatka i razvili detaljna pravila za njegov izgled i funkciju u svakoj instanci.

Mapiranje svih scenarija zadataka

Predstavili smo ove nove dizajne našim korisnicima i time učinili svijet. Bili bismo na sasvim drugom mjestu da nismo nastavili slušati naše korisnike i izrađivali brze iteracije o dizajnu - čak i kad smo već razvijali vremensku traku. Nastavili smo ispravljati nacrte tijekom cijelog projekta.

Moć prototipova

Izazov s kojim smo se suočili dok smo istraživali Fluid pristup bio je kako opisati interakcije koje će vremensku traku učiniti moćnom i drugačijom od tradicionalnih Ganttovih ljestvica. Željeli smo da korisnici imaju fleksibilnost za povlačenje i spuštanje zadataka s lijeva na desno i gore-dolje, višestrukog odabira i / ili umetanja zadataka u redove.

Naš tim ima sjedište u NYC-u, što je otežalo opisati suigrače iz SF-a kako želimo da interakcije djeluju. Naše rasprave generirale su romane s objašnjenjima, pitanjima i nedoumicama putem Slack-a ili komentiranja, što je oduzelo puno vremena. Dakle, budući da smo dizajnirali nešto potpuno novo za Asanu, odlučili smo artikulirati koncepte animacija najlakšim opisivanjem interakcija prototipom. Framer smo koristili za demonstraciju složenih interakcija. Isprobajući nekoliko sati za animiranje ključnih koncepata, uspjeli smo brzo potvrditi ideje i dobiti kotizacije od naših kolega u svim odjelima - i širom zemlje - kao i od naših kupaca.

Ako niste upoznati s alatima za izradu prototipa, mogli biste reći da je teško naučiti novi program dok ste sredi dizajniranja projekta. Ali rekli bismo da sjedenje s nekim tko je upoznat s alatom za izradu prototipa ili inženjerom koji brzi s Javascriptom potpuno vrijedi vremena! Ako stvari držite na zalogaj, bez previše detalja, može vam pomoći da brže idete u svojim prototipima.

Primjer interakcije vremenske trake sa zadacima

Pravljenje kompromisa

Nakon višemjesečnog razvoja i stotina sati razgovora s kupcima, Timeline je bio spreman za beta izdanje. Tijekom beta verzije, neprestano su se pojavila dva kritična pitanja: kako su kupci kategorizirali svoj rad i kako bi intuitivna i pristupačna bila vremenska traka.

kategorizacija

Razvrstavanje rada odvijalo se u više oblika, uključujući i organiziranje projekta po fazama. (Primjer fazne kategorizacije bio bi raspored produkcije filma: Casting → Snimanje → Montaža.) Drugi oblici kategorizacije bi bili dodavanje odjeljaka, razvrstavanje i provjeravanje statusa. Većinu ovih pristupa uspjeli smo riješiti, ali najveći je bio presjek - ili drugim riječima, vizualno razlikovanje hrpe posla.

Primjeri kako vremenska traka može kategorizirati rad

otkrivanja

Beta izdanje otkrila je da ljudi nisu otkrivali interakcije zadataka za Fluid iskustvo. Na primjer, mnogi korisnici nisu shvatili da mogu kliknuti i povući rubove zadatka kako bi produžili njegov rok. Trebale su nam brze pobjede da bismo bili sigurni da je naš korisnički interfejs dovoljno dostupan da bi ljudi razumjeli kako koristiti vremensku traku.

Pobrinite se da je korisničko sučelje jednostavno za korištenje

Nažalost, vrijeme nije bilo na našoj strani. Datum puštanja bio je u tijeku i znali smo da nećemo moći riješiti i probleme s kategorizacijom rada i problemima s pristupačnošću prije datuma lansiranja. Prije lansiranja morali smo odabrati jedno područje koje ćemo rješavati, a drugo naknadno pratiti. Kroz mnoge rasprave sa kupcima i suigračima zaključili smo da nam treba više uvida u to kako timovi kategoriziraju svoj rad i da bi nam neposredni prioritet trebao pružiti korisnicima visokokvalitetno iskustvo putem pristupačnosti.

Retrospektivno se radilo o dobrom kompromisu. Ako bi korisnici shvatili kako koristiti novi korisnički interfejs, mogli bismo naučiti kako žele kategorizirati svoj rad i dublje razumjeti što im treba. Prošlo je nekoliko tjedana više nego što smo planirali, ali čekanje na sučelje vrijedilo je pričekati.

Gledajući unatrag

Nakon pokretanja, bili smo ugodno iznenađeni koliko je kupaca brzo usvojilo Timeline, ali najbolji dio toga je bio kako su ga koristili. Ogromna većina zadataka - njih 94 posto - bila je izvršena povlačenjem i ispuštanjem, a kupci su u potpunosti iskoristili različite načine uređenja vremenske trake, uključujući bočno, slap i mentalno mapiranje. Znali smo rizike dizajniranja sustava koji nadilaze tradicionalni Ganttov grafikon, i bilo nam je izuzetno korisno kada smo se ti rizici isplatili, kako za naše kupce, tako i za naš tim.

Ne postoji stroga formula za oblikovanje novih značajki. Kao i svi novi projekti u Asani, bilo je važno započeti vremensku liniju s dubokim razumijevanjem bolnih točaka naših kupaca i problema koji pokušavamo riješiti. Evo nekoliko ključnih postupaka pomoću kojih smo naučili da donesemo dobre dizajnerske odluke o budućim projektima:

1. Nastavite slušati

Koliko god to očito zvučalo, neprekidno slušajući ono što su nam klijenti govorili tijekom cijelog projekta, tim je uspio prepoznati rješenja koja imaju smisla za niz radnih tijekova. Prihvaćajući istraživanja od samog početka, uspjeli smo zadovoljiti široku paletu potreba kupaca.

2. Prototipizacija je vrijedna toga

Komunikacija putem prototipa bila je najlakši način za prenošenje naših ideja i donošenje odluka. Animacije koje smo gradili bili su najbolji način da ilustriramo složenost nove značajke i pokažemo kakav bi zapravo bio osjećaj koristiti Timeline. Prototipovi su nam pomogli da kupimo sve dionike, uključujući naše suigrače i kupce. Budući da smo se uspjeli brzo uskladiti, svi su se osjećali osnaženi da doprinesu više cjelokupnom dizajnu.

3. Izvršite izračunate kompromise

Kad smo shvatili da Timeline neće biti spreman za naš planirani dan pokretanja, razmišljali smo o svojim prioritetima - uključujući i projekte koje smo pomaknuli s popisa. Priznali smo da je potrebno dodati ključne komponente kako bi značajka bila idealna za sve radne tijekove i shvatili da nam treba dodatnih vremena i resursa. Napravili smo proračunske kompromisne prijedloge dizajna kako bismo osigurali da smo lansirali visokokvalitetni proizvod, a isto tako pratili i druga pitanja premještajući našu mapu puta za sljedeće mjesece. U mnogim se tvrtkama malo vremena posvećuje ispravljanju bugova i poliranju značajke nakon što je pokrenete. U Asani smo posvećeni poboljšanju našeg proizvoda.

Za Timeline poboljšanja se nastavljaju i danas. I dalje dijelimo svoje dizajne i odluke s kupcima i drugim dionicima, a moramo još mnogo toga naučiti. Prilagođavanjem naših ciljeva tako da odražavamo te lekcije kako napredujemo, osjećamo se sigurnim da možemo pružiti sve korisniji, snažniji alat za naše kupce.

Saznajte više o vremenskoj traci.

Zainteresirani ste saznali više o Asani? Imamo urednu stranicu na https://asana.design s malo o tome tko smo i što radimo. U našem uredu u San Franciscu također angažujemo dizajnere dizajna i dizajnere proizvoda, jedno od najboljih mjesta za rad u SAD-u za 2018. godinu! (Možemo vas preseliti ako trenutno niste sa sjedištem u zaljevskom području.)

Ako ste uživali u ovom postu, možda ćete htjeti pratiti našu objavu za više priča iz Asana Design-a