Predstavljamo uniform.hudl.com

Izradom dokumentacijskog mjesta za naš dizajnerski sustav, Uniform, bilo je potrebno mnogo istraživanja, tona iteracija i samo malo valjanja kockica. Razgovarajmo o tome kako smo iz više izvora istine prešli na samo jedan i što smo naučili na tom putu.

Definirajte naše ciljeve

Neko smo vrijeme znali da nam nedostaju stari dokumenti. Nismo znali koliko mu nedostaje i koliko je korisnik stalo. Tek kad smo proveli internu anonimnu anketu, dobili smo ideju. Na naše iznenađenje, ljudi nisu zahtijevali više komponenti ili imovine - htjeli su bolju dokumentaciju.

Komentari poput ovog pomogli su nam da odredimo prioritete u samoj dokumentaciji.

Ne samo što su nam višestruki izvori istine postali teret za održavanje, nego su postali i teret za korištenje. Stoga smo iskoristili ovo kvalitativno istraživanje, posegnuli za našim korisnicima da se dublje iskopaju o nekim stvarima i odlučili što novo web mjesto treba postići:

  1. Spoji sve. Ovo je bio onaj koji ne misli. Naši su korisnici bili umorni od posjećivanja više web lokacija i nisu pronašli ono što su tražili.
  2. Izradite to koristeći naše stvari. Imamo robustan sustav dizajna. Zašto ga ne biste dobro iskoristili?
  3. Kontekstualizirajte ga. Stranica je trebala služiti i dizajnerima i programerima, a da pritom ne preoptereti jedno ili drugo. Također smo se htjeli pozabaviti platformama izvan interneta kako bismo osigurali da svaki tim može pronaći ono što mu treba.
  4. Napravite ispravnu stvar, jednostavno. Želimo da naši unutarnji korisnici usvoje naš sustav dizajna za boljitak vanjskih korisnika, a olakšavanje toga je najbolji način da se to i dogodi.

Izgradite jedno mjesto za sve

Naši su korisnici to najbolje rekli: Dokumentacija je bila posvuda. Uputili smo se na Vodiče za početak konfluence, detalje implementacije komponenata u GitHubu i isječke koda na potpuno zasebnom internom mjestu. Sve je to fliper uzimao danak na korisnika.

Kad korisnici moraju razmišljati o tome gdje pronaći informacije, to radite pogrešno.

Lako možete upasti u ovu zamku kada izgradite nešto tako složeno kao dizajnerski sustav, posebno onaj koji služi toliko proizvoda i platformi. Nije imala čvrstu strategiju dokumentacije velika zamka. Postao je najkritičniji komentar koji smo dobili - zbog čega je najvažnije ispraviti.

Naše bilješke o izdanju izvrstan su primjer sadržaja koji bi prethodno bio razasut po cijelom stvaranju. Sada su na jednom mjestu sa svim informacijama i uputama koje bi korisnici mogli trebati.

Srećom, problem je lako riješiti - potreban nam je samo jedan spot da bismo sve to postavili. Umjesto da objasnimo stvari na našoj internoj stranici i preusmerimo naše korisnike na GitHub ili Confluence, trebali bismo im dati sve informacije s jedne dobro izgrađene stranice.

Koristite naše postojeće stvari

Iako je stara web lokacija slijedila Uniformni izgled i izgled, nije izgrađena s našim komponentama React-a. Ovo je bilo krivo. Postoji mnogo različitih načina izrade stranica dokumenata, no znali smo da iz vlastitih razloga koristimo vlastitu torbu iz nekoliko razloga:

  1. To je sjajan način da pokažete koliko dobro funkcionira. Kad korisnik vidi nešto tako opsežno kao što je web mjesto izgrađeno pomoću komponenti koje smo napravili posljednjih godinu dana, to gradi povjerenje u sustav i tjera ljude da ga žele koristiti.
  2. Koji je bolji način da svoj sustav stavite kroz zaštitnu pločicu nego da ga sami koristite? Pronašli smo greške, poboljšanja i ideje za nove komponente samo pomoću postojećeg sustava.
  3. Omogućilo nam je izradu sjajnih interaktivnih dijelova stranice koji možda nisu bili mogući da smo započeli od nule ili koristili postavljanje treće strane.

Neka bude prijateljski prema bilo kojoj ulozi

Naša je web stranica trebala služiti i dizajnerima i programerima, ali kako to učiniti bez nepotrebno dugačkih stranica? Naše rješenje je bilo jednostavno: dajte im izbor.

Samo informacije koje su vam potrebne na temelju vrste posla koji obavljate.

Ako ste dizajner, sve što trebate je na strani Dizajna. Dat ćemo vam RGB vrijednosti za boje, mogućnost interakcije s komponentama u različitim kontekstima i smjernice za njihovo korištenje u vašem sučelju.

Kad ste spremni za razvoj, prebacite se na kodnu stranu za tamno mod prilagođen dev-u. Uzmite varijable, kopirajte isječak koda i naučite sve rekvizite komponente.

Isječci koda u stvarnom svijetu koji se ažuriraju na temelju platforme na kojoj radite.

Čak smo podijelili i neke platforme pomoću platforme, tako da vidite samo ono što vam treba.

Da bismo vam olakšali stvari, štedimo vašu ulogu i platformu dok se krećete po web mjestu. Ako ste programer za iOS, ne morate se prebacivati ​​na kodnu stranu i birati iOS iznova i iznova - učinite to jednom i to će biti upamćeno za svaku drugu stranicu.

Proveli smo dosta vremena razmatrajući ovaj način fokusiranja, na kraju ugradivši korisnika u sadržaj tako da stvari napravimo kontekstualno sa zadatkom koji je pri ruci. Stavljanje naglaska na njihove uloge i stvaranje prilagođenog njima čini ih lakšim i ugodnijim za upotrebu.

Učinite pravu stvar lako

Iznad svega, znali smo da stvari moramo pojednostaviti. Što je stvar lakša, to će je ljudi vjerovatnije koristiti. Morali smo prijeći dodatnu milju prije nego što smo ga učinili kontekstualnim da bismo ga učinili doista jednostavnim za korištenje.

Za početak, to je značilo olakšavanje pridošlicama. Naši vodiči za početak pružaju najmanje koraka potrebnih za početak korištenja Uniforme.

Za naše dizajnere to znači davanje jednostavnih smjernica o uporabi. To može biti bilo što, od progresivnog objavljivanja inačica gumba, do čišćenja Do i Donja kada se ispuštate u nešto poput zdravice.

I za dizajnere i za razvoj, naše je istraživanje pokazalo da žele usmjeriti ostale članove tima na mjesta lako, pa upravo zato svako zaglavlje na web mjestu ima funkciju kopiranja URL-a. Želite li pokazati svom devu zašto upotrebljavate veliki modal redovito? Bum! Usmjeravanje URL-a čak podržava tu bit suradnje ispravnim dodavanjem / dizajnom ili / koda do kraja, ovisno o odabranoj ulozi.

Mali detalji poput ove olakšavaju suradnju - članovi tima mogu jedni druge usmjeriti tamo gdje trebaju ići.

Što je sljedeće?

Početne su povratne informacije bile sjajne, ali naš je plan održati web mjesto s više ažuriranja i poboljšanja značajki nego što smo imali u prošlosti. Radujemo se što ćemo čuti od naših korisnika o tome što bi im moglo biti korisno. Također planiramo ponovo pokrenuti istraživanje kako bismo dobili ideju o tome koliko smo pomaknuli iglu. Konstantne povratne informacije i iteracija najbolji su način da postignemo pogodak svih ispravnih bilješki s našim korisnicima, pa potražite uskoro još ažuriranja. Oh, i prije nego zaboravimo - zapošljavamo se!