26 Pași de proiectare a produsului și a tabloului de bord

Ce am învățat în timpul călătoriei mele de 4 ani a unui designer de produse și a unui tablou de bord

În ultimii patru ani am continuat să proiectez tablouri de bord și aplicații și am învățat cum să mă descurc cu diferite departamente și să le folosesc cunoștințele pentru a face proiectele de produse atât mai bune cât și mai eficiente.
 
Astăzi, voi împărtăși toți pașii pe care i-am învățat și i-am încorporat în rutina mea de zi cu zi. Acești pași cred că m-au ajutat să mă fac un designer mult mai bun și vreau să le împărtășesc cu voi.

1. Pre-proces

Obțineți cât mai multe informații (cereți trei exemple)

Pentru mine, nimic nu îmi oferă mai multă claritate decât să văd un exemplu real de lucru. Când lucrez cu un client nou sau pe o pagină de destinație complet nouă pentru un produs, consider că este cel mai ușor să cer clientului să furnizeze trei sau patru pagini de inspirație, deoarece acest lucru ajută cu adevărat ambele părți. Obținerea clientului dvs. pentru a pune idei pe masă vă oferă posibilitatea de a înțelege cu ușurință ce le place și ce se așteaptă de la designul finalizat.
 
Dacă lucrați cu mai multe echipe, ar trebui să vă doriți să petreceți cât mai mult timp cu dezvoltatorii pe un produs, așa cum faceți cu colegii dvs. de proiectare. Ceea ce am învățat în timp ce lucrez la Tapdaq, cheia pentru luarea unei decizii eficiente de proiectare este să vă asigur că vorbiți cu echipa de profesionisti cât puteți. În cazul meu, există întotdeauna cazuri de soluție la o problemă prin care nu puteam să rezolv singură această soluție. Aș spune că obiectivul este de a elimina cât mai multe întrebări posibil înainte de a vă deplasa în dezvoltare.

Aflați mai multe despre Personas

La început, trebuie să spun că am fost sceptic cu privire la personas, dar acum totul are sens pentru mine.
 
Prin urmare, în contrast complet cu procesul meu mai vechi, pot vedea cum persoanele sunt super importante în timp ce lucrează la caracteristicile produsului, mai ales atunci când soluția are multe cazuri diferite. Te ajută să înțelegi pentru cine proiectezi cu adevărat. Îmi propun să am în jur de patru până la cinci persoane. În cel mai bun mod de a avea persoane ca utilizatori efectivi, acest lucru vă poate ajuta să identificați probleme în timp ce discutați sau mergeți prin soluția dvs. cu ei la un apel sau în persoană.

Șablon Persona - Descărcați-l aici: http://janlosert.com/assets/persona-template.zip

Configurarea obiectivelor exacte - Ce anume ar trebui să urmărim?

Cred că majoritatea proiectanților / clienților ignoră acest pas, dar unul dintre cele mai importante aspecte ale proiectării pentru ambele părți este să înțeleagă obiectivele produsului pe care îl proiectezi. Avem tendința să sărim direct în pixeli și să eliminăm rapid UI-ul proiectului. Dacă este un site nou, sau o caracteristică nouă, asigurați-vă că setați obiective clare despre ceea ce doriți să atingeți.
 
Deoarece totul este urmăriți, vorbiți despre punctele exacte pe care le urmăriți. De exemplu, acestea ar putea varia de la noi înregistrări, la un număr de clienți care folosesc Paypal vs. achiziții cu carduri de credit. Asigurați-vă întotdeauna că știți cât de mare vizați la început!
 
P.S. - Veți avea nevoie de acest lucru oricum pentru configurarea canalelor pe Mixpanel mai târziu în acest proces.

Structura proiectului

Configurați Folderul de proiecte și începeți colectarea Moodboard

Există o mulțime de site-uri de inspirație - Dribbble, Behance, Pttrns, Pinterest etc. Este foarte ușor să găsești proiecte similare cu cea la care vei lucra. În plus, este posibil să existe deja o soluție la o problemă pe care o întâmpinați și încercați să o rezolvați.
 
Când încep să lucrez la un proiect nou, întotdeauna configurez un folder cu folderele numite - Fișiere sursă, Ecrane și export, Inspirație și resurse. Salvez tot ce găsesc pe internet în folderul Inspiration pentru a-l putea folosi ulterior pentru a crea tabele de spirit de bază. Acest folder ar putea fi completat cu orice, de la pluginuri, mostre sau chiar studii complete de caz de la Behance.

2. Mergând la fidelitate scăzută

Whiteboard

Dacă cineva își amintește, nu m-a interesat prea mult de calitatea firelor electrice din articolul precedent. Metodele pe care le folosesc acum sunt următoarele:
 
Dacă dorim să adăugăm o caracteristică nouă sau să redimensionăm un proces, ne așezăm și toată lumea la întâlnire începe să schițeze idei pe o tablă, hârtie sau chiar un iPad. Această acțiune ne permite să punem toată lumea în echipă în poziția proiectantului. Mai târziu terminăm cu două opțiuni de proiectare pentru a vedea care funcționează cel mai bine. Încercăm mereu să parcurgem întreaga experiență și să discutăm cele mai multe cazuri de margine în această parte a procesului. Este într-adevăr crucial să le abordăm acum spre deosebire de în faza de proiectare, sau chiar mai rău, în timpul dezvoltării. În schimb, puteți pierde mult timp și energie.

Afișați toate informațiile de pe ecran (ce date trebuie să introducă un utilizator)

Acesta este momentul să depășim tablă și să enumerăm toate intrările și poveștile utilizatorului. Notați exact ce ar trebui să introducă un utilizator într-un anumit ecran și cum poate atinge obiectivele dorite.

Notează toate stările posibile

Deoarece toate tablourile de bord, aplicațiile sau formularele site-urilor web au diferite stări, acesta este un alt pas important pe care nu trebuie să-l uitați.
 
În timp ce proiectăm, trebuie să fim siguri că le abordăm pe toate. Este plăcut să avem grafice strălucitoare și imagini de profil cool în fișierele Sketch sau PSD-urile noastre. Cu toate acestea, cel mai probabil, utilizatorii vor vedea partea opusă a aplicației. Mai ales când vin la produsul tău. Este necesar să fie pregătit. Mai jos este un exemplu despre cum avem de-a face cu stările goale într-una din componentele noastre de date.

Tapdaq - State Widget de promovare încrucișată

Pregătiți prima diagramă

Toate acestea duc la partea finală a fidelității scăzute. Datorită rezultatului rezultatului sarcinii de pe tablă, acum cunoaștem toate stările posibile, contribuțiile și obiectivele utilizatorului. Pentru a rezuma toate interacțiunile, am creat o diagramă și pentru a fi sincer, am schimbat stilul de a face acest lucru de multe ori: mergând de la fișiere Sketch cu machete rasterizate la dreptunghiuri care simbolizează fiecare pagină cu numele lor de mai jos. Acestea fiind spuse, procesul a fost întotdeauna dureros, de obicei ajung într-o situație în care vrem să schimbăm sau să adăugăm ceva mai târziu în acest proces. Cu aceste soluții, de obicei sunt obligat să fac mai mulți pași; cum ar fi schimbarea pozițiilor liniilor, săgeților și imaginilor.

La urma urmei, am ajuns să folosim Camunda Modeler, care nu este tocmai un instrument de proiectare. Este o aplicație simplă pentru crearea diagramelor tehnice. Ceea ce sună ciudat, dar această aplicație este dezvoltată pentru a vă ajuta să construiți diagrame de bază. Cel mai important este tot scalabilul. Puteți trage și arunca cu ușurință orice punct și va crea automat linii și săgeți pentru dvs. Puteți alege, de asemenea, din diferite tipuri de puncte care pot fi utile, de exemplu, pentru evidențierea când un utilizator primește un e-mail de la Intercom. Camunda permite exportul la SVG, ceea ce facilitează colorarea punctelor de urmărire din Sketch.

Meniul Tapdaq + Structura ecranelor (export de la Camunda Modeler)

3. Lucrare / Proiectare

Moodboard

Pot să încep cu crearea de moodboard, în timp ce colectez toate imaginile în folderul meu Inspiration. Folosesc moodboard-uri în principal pentru a discuta gândurile mele cu colegii și a descrie unele dintre ideile vizuale, înainte de a începe procesul de pixeli.

Moodboard cu afișaj pentru cronică și culori albastre strălucitoare

Primul proiect

Proiectarea este întotdeauna un proces continuu. Vei itera mult pe parcursul tău pentru a obține un rezultat excelent. Cu primul proiect este de asemenea colectarea primului feedback. Nu trebuie să veniți la un design perfect pentru pixeli pentru a începe să primiți feedback de la coechipieri, clienți sau utilizatori potențiali. Pentru a-și lua primele gânduri și pentru a începe o discuție, am amestec de obicei ecrane din designurile noastre actuale. Acest lucru ne permite să începem să jucăm cu modele cu aspect real în mai puțin de o zi. Puteți face un prim prototip simplu pentru a testa dacă lucrurile se conectează bine între ele.

Scrieți-vă copia (ton)

Copierea este unul dintre aspectele cheie ale deciziilor utilizatorilor și o iau ca o parte crucială a proiectării. Nu sunt un vorbitor nativ, dar sunt în continuare capabil să stabilesc tonul copiei. Nu este nimic mai rău decât un design frumos, cu dialoguri confuze în care utilizatorii se luptă să găsească următorul pas.

Primul test intern

Cu primul proiect poți crea rapid un prototip în Marvelapp sau Invision. Este ceva ce am început să fac recent și se dovedește că este un alt aspect uimitor de validare. Cu un prototip, puteți configura cu ușurință un apel cu 3 sau 4 persoane din echipa dvs. și puteți împărtăși legătura prototipului cu aceștia și încercați să puneți câteva întrebări în timp ce testați pe ele anumite fluxuri / scenarii. În acest fel vă puteți testa cu ușurință abilitățile de interogare și, în mod evident, vă puteți testa deciziile de proiectare asupra utilizatorilor reali, fără să vă faceți griji pentru resursele și timpul pierdut. De obicei, tind să aleg oameni care nu sunt atât de implicați în dezvoltarea tabloului de bord. De asemenea, încercați să evitați să urmăriți pe cineva care a avut deja o șansă să se joace cu prototipul înainte.

Etichetă

Știm cu toții cât de greu este să rămâi ordonat. Cum să livrezi încă o caracteristică. Acest lucru duce de obicei la un fișier Sketch sau PSD dezordonat. Am învățat multe în timp ce proiectam Dashboard UI Kit, în special despre diferențele dintre a lucra ca un singur designer în cadrul unei startup, a lucra în echipe sau a lucra la produsele mele digitale. În timp ce lucrez în Tapdaq, sunt încrezător în abilitățile colegilor mei și chiar și atunci când știu că încerc din greu să păstrez fișierele în ordine, uneori este imposibil! Cu toate acestea, atunci când lucrați în echipă, mă gândesc la PSD-ul meu ca și cum le creez pentru altcineva. Folosesc regula conform căreia dacă aveți mai mult de 8 straturi într-un folder, ar trebui să creați unul nou.

Kit UI pentru tablou de bord - Structura folderelor

Am găsit un plugin excelent pentru Sketch, care m-a economisit ore întregi în timp ce lucram la UIT-urile mele. Redenumiți - https://github.com/rodi01/RenameIt
 
Puteți arunca în continuare o privire la aceste ghiduri vechi despre etichete (Oricum, majoritatea punctelor funcționează pentru orice editor pe care îl veți folosi.) - http://photoshopetiquette.com/

Sfat - puneți totul pe pânză

M-am străduit întotdeauna să proiectez anteturi frumoase, în timp ce restul pânzei eram alb. În timp ce proiectam, am învățat să pun tot conținutul pe locul întâi - trebuie doar să mă joc cu aspectul și tipografia. Este mult mai ușor să proiectați detalii frumoase și să vă jucați cu întregul concept, cu conținutul în loc.

Creați UI Elements și începeți să jucați cu Lego

Probabil am întârziat la petrecere și acest lucru va suna deja învechit în timp ce îl scriu. Motivul pentru care nu am efectuat niciun fel de filetare în călătorie este simplu. Schița 39 vine cu ceva ce mi s-a părut incredibil și care este „forme cu proprietăți de redimensionare”. M-a obligat să recreez în cele din urmă toate cele 50 de ecrane Tapdaq. Acesta este un lucru care face proiectarea ușoară pentru toți cei din echipă. Fișierul nostru Sketch este pur drag-and-drop acum. Puteți oferi cu ușurință oricărui coleg de echipă o pânză goală și pot crea schițe de aproape fidelitate. Datorită acestui fapt, putem sări peste toate instrumentele de filframizare și să putem începe cu pixeli cu aspect real.

Acest lucru merge, de asemenea, mână în mână cu noi, capabil de a converti fireframes în proiecte reale. Orice PM poate crea fireframe și apoi îl pot prelua cu ușurință și transforma în hi-fidelitate.

Eliminați și fixați elementele în fișierul schiță Tapdaq

4. Active și livrare

Când ați terminat cu proiectarea și iterarea pe baza primului feedback, nu ați făcut-o încă. Acum vine momentul să înmânați proiectele către inginerii / profesioniștii voștri.

Specificații

Unul dintre obiectivele mele principale este acela de a putea întotdeauna să-mi comunic deciziile cu echipa și să pot reduce dificultățile pentru dezvoltatorii noștri, atât cât pot, pentru a le oferi cele mai bune resurse posibile. Asta pentru mine este cu siguranță cea mai importantă parte a meseriei mele de designer.
 
Întrucât am documentat toată interacțiunea și avem totul gata de la începutul procesului nostru, crearea de specificații este o bucată de tort. Am tendința să scriu specificații în Google Docs sau sub ecranele din fișiere Sketch. Este plăcut să vă descurcați design-urile cu explicații despre toate funcțiile, astfel încât oricine să poată prelua fișierul dvs. în viitor.

Diagramă

Am făcut această tehnică în timp ce am lucrat în Badoo pentru prezentări cu echipa și părțile interesate. Această tehnică este plăcută pentru tipărirea desenelor și discutarea lor cu echipa. Dar în zilele noastre cred că există opțiuni mai bune. Cum ar fi pregătit prototipul final.

Diagrama completă a aplicației Sagram Analytics

Prototip final

Unul dintre lucrurile cheie pentru mine este să am întotdeauna gata toată interacțiunea în prototip. De obicei, ajung să am 3-5 prototipuri în drumul către ultima finală pentru acele mici sesiuni cu coechipieri sau pentru a arăta anumite fluxuri. Am tendința să pregătesc toate statele din Sketch într-o singură planșă și apoi să reproduc acele tablouri pentru a avea fiecare stat pregătit la export.
Așa cum am spus anterior, puteți utiliza fie Marvelapp, fie Invision. Este minunat să adăugați comentarii la anumite părți ale desenelor dvs. pentru a vă extinde specificația cu atât mai mult, încât chiar și redactorul poate merge cu ușurință și să verifice pixeli și fluxuri reale dacă fiecare copie și dialog funcționează după cum este necesar.

Video Quicktime> Note

Când nu prezint lucrurilor pe Hangout echipei sau unui client, îmi trimit un videoclip cu ecran de ecran care trece prin prototip și explică tot ce am proiectat. Este o confirmare plăcută pentru mine, înainte de orice prezentare, știu răspunsul la orice întrebare și posibile interacțiuni fanteziste pe care am decis să le proiectez. Ar putea fi, de asemenea, bine utilizat atunci când lucrați în echipe bazate de la distanță. Toată lumea are acces la redarea întregii gândiri de interacțiune oricând.

Anima

O ușoară atingere finală a designului pe care îl puteți utiliza After Effects sau Principiul. Este bine să explici cum vrei tu acest lucru și să te miști sau să te deplasezi.

Ghid stilistic

Un alt punct crucial pentru ingineri este să știe cum vor reacționa lucrurile în diferite scenarii. Gândiți-vă la starea de eroare de la intrare sau unde să afișați mesajul de eroare. La fel ca aspectul dezactivat al butonului de trimitere, unde să introducă spinner-ul la intrare etc. Este foarte ușor pentru ingineri să treacă prin artboard-ul și simbolul simbolurilor dvs. unul câte unul înainte să înceapă chiar să codifice toate ecranele datorită faptului că au un fișier Sketch cum blochează Lego. Ghidul de stil și imaginea de ansamblu vizuală a tuturor elementelor este de fapt una dintre cele mai solicitate caracteristici / design pentru următoarea actualizare a setului meu de bord UI.

Prezentare generală Tapdaq UI - Styleguide

5. Final & Test

Deoarece am terminat să predăm inginerilor proiectele noastre, suntem capabili să ne concentrăm pe ultima parte a procesului - Testele deciziilor noastre!

Inspectlet / HotJar

După ce designurile sunt transformate în cod de lucru, nu uitați să includeți fragmentele dvs. Inspectlet sau HotJar JS. Sunt întotdeauna încântat (sau frustrat) să văd cum navighează utilizatorii prin tabloul de bord sau ce fac pe pagina de portofoliu. Inspectlet este uimitor în captarea întregii sesiuni de utilizator. Funcționează excelent și pentru proiecte mai mari. Vine cu filtrare ușoară „/ pagina”, care vă ajută să urmăriți sesiunea unei anumite funcții sau fluxuri. Folosim Inspectlet în Tapdaq. Pentru portofoliul personal, folosesc funcțiile gratuite ale HotJar pentru a genera hărți de căldură și pentru a înregistra cel puțin câțiva utilizatori care navighează în portofoliul meu.

Mixpanel

Mixpanel funcționează excelent pentru validarea obiectivelor noastre (cele pe care le-am configurat chiar la începutul procesului nostru). Mixpanel vă ajută să vedeți câți utilizatori completează fluxuri particulare. Câți utilizatori au scăzut înainte de a configura contul. Câți oameni au mers de la pagina principală de destinație la magazin și la cel mai valoros produs al nostru.

Google Analytics

Nu sunt capabil să codific lucrurile mari, dar cel puțin sunt capabil să lucrez cu fișiere CSS și cu cod simplu. În ultima vreme am fost interesat să văd unde fac clic utilizatorii și, în timp ce mă uit la hărți de căldură Hotjar, am decis să configurez și trackerul de clicuri de bază în Google Analytics. Puteți urmări cu ușurință și fiecare dintre clicurile utilizatorului de pe site-ul dvs. web. Iată un exemplu de cod pentru urmărirea clicurilor - http://pastebin.com/tdmFZN2k

`` `

** 1. Lipiți scriptul la codul dvs. **