26 koraka dizajna proizvoda i nadzorne ploče

Što sam naučio tijekom svog četverogodišnjeg putovanja dizajnera proizvoda i dizajnera ploče

Posljednje četiri godine nastavio sam dizajnirati nadzorne ploče i aplikacije i naučio sam se baviti različitim odjelima i koristiti njihovo znanje kako bih dizajnirao proizvode i bolje i efikasnije.
 
Danas ću podijeliti sve korake koje sam naučio i uključio u svoju svakodnevnu rutinu. Ovi su koraci za koje vjerujem da su mi postali puno bolji dizajner i želim ih podijeliti s vama.

1. Predradnja

Dobijte što više informacija (Zatražite tri primjera)

Za mene ništa mi ne daje veću jasnoću od gledanja stvarnog radnog primjera. Kada radim s novim klijentom ili na potpuno novoj odredišnoj stranici za proizvod, smatram da je najlakše tražiti od klijenta da mu pruži tri ili četiri stranice za nadahnuće, jer to zaista pomaže obema stranama. Navođenje klijenta da stavi ideje na stol pruža vam mogućnost da lako shvati što im se sviđa i što očekuju od gotovog dizajna.
 
Ako radite s više timova, trebali biste nastojati potrošiti što više vremena s programerima na proizvodu kao s kolegama iz dizajnera. Ono što sam naučio radeći na Tapdaqu, ključno za donošenje učinkovite dizajnerske odluke jest osigurati da razgovarate s timom za razvoj što je više moguće. U mom slučaju, uvijek postoje slučajevi za rješenje problema oko kojih sam ne bi mogao doći do tog rješenja. Cilj je reći ukloniti što je moguće više pitanja prije nego što krenete u razvoj.

Saznajte više o osobama

U početku moram reći da sam bio skeptičan prema osobama, ali sada mi sve to ima smisla.
 
Dakle, u potpunoj suprotnosti s mojim starijim postupkom, vidim kako su personalije izuzetno važne tijekom rada na značajkama proizvoda, posebno kada rješenje ima mnogo različitih rubnih slučajeva. Pomaže vam da shvatite za koga zapravo dizajnirate. Cilj mi je oko četiri do pet persona. Na najbolji način da imate personale kao stvarni korisnici, to vam može pomoći da identificirate probleme dok razgovarate ili prolazite kroz razgovor sa njima ili osobno putem.

Predložak persona - preuzmite ga ovdje: http://janlosert.com/assets/persona-template.zip

Postavljanje točnih ciljeva - što točno trebamo pratiti?

Mislim da većina dizajnera / klijenata zanemaruje ovaj korak, ali jedan od najvažnijih aspekata dizajna za obje strane je razumijevanje ciljeva proizvoda koji dizajnirate. Skloni smo skakanju ravno u piksele i brzo izvučemo korisničko sučelje projekta. Ako je u pitanju potpuno nova web lokacija ili nova značajka, budite sigurni da postavite jasne ciljeve onoga što želite postići.
 
Budući da se sve može pratiti, govorite o točnim točkama koje ćete pratiti. Na primjer, to se može kretati u rasponu od novih prijava, do većeg broja kupaca koji koriste Paypal u odnosu na kupovinu kreditnim karticama. Uvijek pazite da znate na kojoj visokoj razini ciljate u startu!
 
p.s. - Ovo će vam svejedno trebati za postavljanje tokova na Mixpanelu kasnije u ovom postupku.

Struktura projekta

Postavljanje mape projekta i započnite sakupljati Moodboard

Puno je mjesta za inspiraciju - Dribbble, Behance, Pttrns, Pinterest itd. Doista je lako pronaći slične projekte kao na onome na kojem radite. Uz to, možda već postoji rješenje problema koji imate i pokušavate riješiti.
 
Kad počnem raditi na novom projektu, uvijek postavljam mapu s mapama pod nazivom - Izvorne datoteke, Zasloni i Izvoz, Inspiracija i resursi. Sve što pronađem na Internetu spremim u mapu Inspiration kako bih ga kasnije mogao koristiti za izradu osnovnih tabla raspoloženja. Ta se mapa može popuniti bilo čime, dodacima, uzorcima ili čak čitavim studijama slučaja tvrtke Behance.

2. Slaba vjernost

Bijela ploča

Ako se itko može sjetiti, mene nije bilo mnogo briga za kvalitetu žičara u mom prethodnom članku. Metode koje sada koristim su sljedeće:
 
Ako želimo dodati novu značajku ili redizajnirati postupak, sjednemo i svi na sastanku započinjemo skicirati ideje na bijelu ploču, papir ili čak i iPad. Ova radnja omogućava nam postavljanje svih u timu na položaj dizajnera. Kasnije završavamo s dvije mogućnosti dizajna kako bismo vidjeli koja od njih djeluje najbolje. Uvijek pokušavamo proći kroz cjelokupno iskustvo i raspravljati o većini rubnih slučajeva tijekom ovog dijela postupka. Izuzetno je važno riješiti se njih sada, za razliku od faze dizajniranja ili, još gore, tijekom razvojnog dijela. Tada možete izgubiti puno vremena i energije.

Iscrtavanje svih informacija o zaslonima (koje podatke korisnik treba unijeti)

Ovo je vrijeme za napuštanje bijele ploče i popis svih korisničkih unosa i priča. Zapišite što bi točno korisnik trebao umetnuti na određeni zaslon i kako korisnik može postići željene ciljeve.

Zapišite sva moguća stanja

Budući da svi obrasci nadzornih ploča, aplikacija ili web stranica imaju različita stanja, to je još jedan važan korak koji ne biste trebali zaboraviti.
 
Prilikom dizajniranja moramo biti sigurni da im se obratimo. Lijepo je imati sjajne grafikone i cool profilne slike u našim Sketch datotekama ili PSD-ovima. Međutim, najvjerojatnije će korisnici vidjeti suprotnu stranu vaše aplikacije. Pogotovo kad dođu do vašeg proizvoda. To treba biti pripremljeno. Ispod je primjer kako se bavimo praznim stanjima u jednoj od naših komponenti podataka.

Tapdaq - Državi križnog promocijskog stanja

Pripremite prvi dijagram

Sve to dovodi do završnog dijela male vjernosti. Zahvaljujući ishodnom rezultatu zadatka na ploči sada znamo sve moguće stavove, korisničke unose i ciljeve. Da sumiram sve interakcije, stvaram dijagram i da budem iskren, mnogo sam puta promijenio stil izvođenja: Prelazeći iz Sketch datoteka s rasterizovanim izgledima do samo pravokutnika koji simboliziraju svaku stranicu s donjim imenima. Kako je rečeno, postupak je uvijek bio bolan, obično završim u situaciji u kojoj kasnije želimo nešto promijeniti ili dodati. S ovim rješenjima sam obično prisiljen učiniti mnogo više koraka; poput promjene položaja linija, strelica i slika.

Uostalom, završili smo s korištenjem Camunda Modelera, koji nije baš dizajnerski alat. To je jednostavna aplikacija za izradu tehničkih dijagrama. Što zvuči čudno, ali ova je aplikacija razvijena kako bi vam pomogla u izgradnji osnovnih dijagrama. Najvažnije je da je sve što je stvoreno potpuno skalabilno. Bilo koju točku možete lako povući i ispustiti, a to će automatski stvoriti linije i strelice za vas. Također možete birati između različitih vrsta točaka koje mogu biti korisne, na primjer, za isticanje kada korisnik primi e-poštu od Intercoma. Camunda omogućuje izvoz u SVG koji olakšava bojanje točaka u programu Sketch.

Tapdaq izbornik + struktura zaslona (izvoz s Camunda Modelera)

3. Rad / dizajn

Moodboard

Moram započeti s stvaranjem moodboard-a dok skupljam sve slike u svoju mapu Inspiration. Koristim tablice sa raspoloženjem uglavnom za raspravljanje o svojim razmišljanjima s kolegama i opisivanje nekih vizualnih ideja, prije nego što započnem s postupkom piksela.

Moodboard s kroničnim zaslonom i svijetlo plavim bojama

Prvi nacrt

Dizajn je uvijek trajni proces. Puno ćete puta ponavljati do svog sjajnog rezultata. Uz prvi nacrt dolazi i prikupljanje prvih povratnih informacija. Ne morate doći do savršenog dizajna piksela da biste počeli dobivati ​​povratne informacije od svojih suigrača, klijenata ili potencijalnih korisnika. Da bi dobili svoje prve misli i započeli raspravu, obično miješam zaslone iz našeg trenutnog dizajna. To nam omogućava da se počnemo igrati sa stvarnim dizajnom za manje od jednog dana. Možete napraviti prvi jednostavan prototip kako biste testirali jesu li stvari dobro povezane.

Napišite svoju kopiju (ton)

Kopija je jedan od ključnih aspekata korisnikovih odluka i smatram to ključnim dijelom dizajna. Nisam izvorni govornik, ali još uvijek sam sposoban postaviti ton kopije. Ne postoji ništa gore od lijepog dizajna s zbunjujućim dijalozima u kojem se korisnici trude pronaći sljedeći korak.

Prvi intern test

Sa svojim prvim nacrtom možete brzo stvoriti prototip u Marvelappu ili Invisionu. To sam počeo raditi nedavno, a ispada da je to još jedan nevjerojatan validacijski aspekt. S prototipom sada možete lako uspostaviti poziv s 3 ili 4 osobe iz vašeg tima i dijeliti vezu s prototipom s njima i pokušati postaviti nekoliko pitanja dok testirate na njima određene tokove / scenarije. Na ovaj način možete lako testirati svoje vještine ispitivanja i očito testirati svoje dizajnerske odluke na stvarnim korisnicima bez brige o izgubljenim resursima i vremenu. Obično biram ljude koji nisu toliko uključeni u razvoj nadzorne ploče. Također pokušajte izbjeći gledati nekoga tko je već imao priliku igrati se s prototipom.

Etiketa

Svi znamo koliko je teško ostati uredan. Kako dostaviti još jednu značajku. To obično dovodi do zbrkanih datoteka Sketch ili PSD. Naučio sam puno tijekom dizajniranja korisničkog sučelja Dashboard-a, posebno o razlikama između rada kao dizajnira koji je jedini u pokretanju, rada u timovima ili rada na mojim digitalnim proizvodima. Dok radim u Tapdaqu, uvjeren sam u vještine svojih kolega, pa čak i kad znam da se trudim održavati uredne datoteke, ponekad je i nemoguće! Međutim, kad radite u timu, razmišljam o svom PSD-u kao da ih stvaram za nekog drugog. Koristim pravilo da ako imate više od 8 slojeva u mapi, trebali biste stvoriti novi.

UI komplet nadzorne ploče - Struktura mapa

Pronašao sam jedan sjajan dodatak za Sketch, koji mi je uštedio sate dok sam radio na svojim UI setovima. Preimenovanje - https://github.com/rodi01/RenameIt
 
Još uvijek možete pogledati ove stare smjernice za etiketu (U svakom slučaju, većina točaka djeluje za bilo koji urednik koji koristite.) - http://photoshopetiquette.com/

Savjet - Stavite sve u platno

Uvijek sam se borio s dizajniranjem lijepih zaglavlja, dok sam ostatak platna bio bijel. Tijekom dizajniranja naučio sam staviti sav sadržaj na prvo mjesto - samo se igrajte s izgledom i tipografijom. Mnogo je lakše osmisliti lijepe detalje i igrati se sa cijelim konceptom sa sadržajem na mjestu.

Stvorite UI elemente i počnite se igrati s Legom

Vjerojatno kasnim na zabavu i ovo će već zvučati zastarjelo dok to pišem. Razlog zašto nismo napravili nijedno presvlačenje na ovom putovanju je jednostavan. Sketch 39 dolazi s nečim što sam smatrao nevjerojatnim, a to je "oblici s promjenjivim veličinama". Prisililo me da konačno stvorim svih 50+ Tapdaq ekrana. Ovo je dizajn koji olakšava svima u timu. Naša datoteka Sketch sada je čisto povuci i ispusti. Bilo kojem od svojih suigrača lako možete dati prazno platno i oni mogu stvoriti gotovo nacrtene nacrte. Zahvaljujući tome uspjeli smo preskočiti sve alate za izradu žičara i započeti s gotovo stvarnim pikselima.

To također ide ruku pod ruku s tim da smo u mogućnosti pretvoriti žičane okvire u stvarne dizajne. Bilo koji PM može stvoriti žičani okvir i onda ga lako mogu preuzeti i preobraziti u hi-vjernost.

Prevucite i ispustite elemente u datoteci skice Tapdaq-a

4. Imovina i dostava

Kad završite s dizajniranjem i ponavljanjem na temelju prvih povratnih informacija koje još niste. Sada dolazi vrijeme da svoj dizajn predate svojim inženjerima / vragovima.

Tehnički podaci

Jedan od mojih glavnih ciljeva je uvijek biti u mogućnosti komunicirati svoje odluke s timom i biti u mogućnosti smanjiti poteškoće za naše programere koliko god mogu kako bih im pružio najbolje moguće resurse. To je za mene definitivno najvažniji dio mog posla kao dizajnera.
 
Budući da smo dokumentirali svu interakciju i sve smo spremni od početka našeg procesa, izrada specifikacija je komad torte. Ja obično pišem specifikacije u Google Dokumente ili ispod ekrana u Sketch datotekama. Lijepo je rukovati se dizajnom objašnjenjima svih značajki kako bi ubuduće bilo tko mogao uhvatiti vašu datoteku.

Dijagram

Nekada smo radili ovu tehniku ​​dok sam radio u Badoo na prezentacijama s timom i dionicima. Ova je tehnika lijepa za ispis dizajna i raspravljanje s timom. Ali danas mislim da postoje i bolje mogućnosti. Kao što je spremanje konačnog prototipa.

Potpuni dijagram aplikacije Sagram Analytics

Konačni prototip

Jedna od ključnih stvari za mene je uvijek imati sve interakcije spremne u prototipu. Obično imam 3–5 prototipa na putu do konačnog za one male seanse sa suigračima ili da pokažem neki određeni tok. Ja obično pripremam sve države na Sketch-u u jednoj ploči, a zatim ih dupliciram kako bi svaka država bila spremna prilikom izvoza.
Kao što je prethodno rečeno, možete koristiti ili Marvelapp ili Invision. Izvrsno je dodavati komentare dijelovima svog dizajna kako biste puno više proširili specifikaciju, tako da čak i copywriter može lako pregledavati stvarne piksele i tokove ako svaki primjerak i dijalog funkcioniraju prema potrebi.

Quicktime Video> Bilješke

Kad timu ili klijentu ne predstavljam stvari u Hangoutu, šaljem videozapis sa zaslona kako prolazi kroz prototip i objašnjavam sve što sam smislio. Lijepa mi je potvrda prije bilo kakve prezentacije da znam odgovor na bilo koje pitanje i moguće maštovite interakcije koje sam odlučila osmisliti. Može se lijepo upotrijebiti i u radu s timovima na daljinu. Svatko ima pristup ponavljanju cijelog razmišljanja o interakciji u bilo kojem trenutku.

Animirati

Lijep završni dodir vašeg dizajna koji možete koristiti After Effects ili Principom. Dobro je objasniti kako želite da se ovo i ono pomaknete ili lebdite.

Styleguide

Drugi ključni trenutak za inženjere je znati kako će stvari reagirati u različitim scenarijima. Razmislite o stanju unosa pogreške ili gdje prikazati poruku o pogrešci. Isto kao što će izgledati onemogućeno stanje gumba za slanje, gdje staviti spinner unos itd. Inženjeri su vrlo jednostavni samo kroz vaš grafikon i simboliraju jedan po jedan element prije nego što uopće započnu kodiranje svih zaslona zahvaljujući datoteci Sketch. kao što Lego blokira. Stilski vodič i vizualni pregled svih elemenata zapravo je jedna od najtraženijih značajki / dizajna za sljedeće ažuriranje korisničkog sučelja Dashboard-a.

Pregled UI Tapdaq - Styleguide

5. Završni i test

Budući da smo gotovim predali nacrte inženjerima, u stanju smo se usredotočiti na posljednji dio postupka - Teste naših odluka!

Inspektor / HotJar

Nakon što dizajni budu pretvoreni u radni kôd, ne zaboravite uključiti isječke inspektora ili HotJar JS. Uvijek sam uzbuđen (ili frustriran) kad vidim kako se korisnici kreću po našoj nadzornoj ploči ili što rade na mojoj stranici portfelja. Inspectlet je nevjerojatan u snimanju svih vaših sesija korisnika. Odlično djeluje i za veće projekte. Dolazi s jednostavnim filtriranjem "stranice" pomoću kojeg možete gledati sesiju određene značajke ili toka. Koristimo Inspectlet u Tapdaqu. Za svoj osobni portfelj koristim besplatne značajke HotJara za generiranje toplotnih karata i snimanje najmanje nekoliko korisnika koji pregledavaju moj portfelj.

Mixpanel

Mixpanel odlično funkcionira za potvrđivanje naših ciljeva (onih koje postavljamo na samom početku našeg procesa). Mixpanel pomaže vidjeti koliko korisnika završava određene tokove. Koliko je korisnika odustalo prije postavljanja računa. Koliko je ljudi prošlo od glavne odredišne ​​stranice do trgovine i do našeg najvrjednijeg proizvoda.

Google Analytics

Ne mogu kodirati velike stvari, ali barem mogu raditi s CSS datotekama i s jednostavnim kodom. U posljednje vrijeme me je zanimalo gdje korisnici kliknu i dok su gledali Hotjar toplotne karte odlučio sam postaviti i osnovni alat za praćenje klikova i u Google Analytics. Možete lako pratiti i sve klikove korisnika na vašoj web lokaciji. Evo primjera koda za praćenje klikova - http://pastebin.com/tdmFZN2k

`` `

** 1. Zalijepi skriptu na svoj kod **