26 trin til perfekt produktdesign
I løbet af de sidste fire år har jeg designet dashboards og applikationer, og jeg har lært at håndtere forskellige afdelinger og udnytte deres viden for at gøre produktdesign mere effektivt.
I dag vil jeg dele alle de trin, jeg har bygget ind i min daglige rutine, som jeg tror har gjort mig til en bedre designer.
Præ-proces
1. Få så mange oplysninger som muligt (spørg om tre eksempler)
For mig giver intet mere klarhed end at se et virkeligt fungerende eksempel. Når jeg arbejder med en ny klient eller på en helt ny destinationsside for et produkt, finder jeg det, da det enkleste udgangspunkt er at bede klienten om at give tre eller fire inspirerende sider, fordi det virkelig hjælper begge parter. At få din klient til at sætte ideer på bordet giver dig mulighed for nemt at forstå, hvad de kan lide, og hvad de forventer af det færdige design.
Hvis du arbejder med flere hold, skal du tilstræbe at bruge så meget tid med udviklerne på et produkt som du gør med dine designer kolleger. Hvad jeg har lært er, at nøglen til at lave en effektiv design beslutning er at sikre, at du snakker med dev team så meget som du kan. I mit tilfælde har der været tilfælde, hvor der blev fundet en løsning på et problem, at jeg ikke kunne komme op med mig selv.
Målet er at fjerne så mange spørgsmål som muligt, før du går ind i udvikling.
2. Lær om personas
Først må jeg sige, at jeg var skeptisk til persona, men nu giver det mig mening.
Så i fuld kontrast til min ældre proces kan jeg se, hvordan persona er super vigtige, mens du arbejder på produktegenskaber, især når løsningen har mange forskellige kantsager. Det hjælper dig med at forstå, hvem du virkelig designer for. Jeg har til formål at have omkring fire til fem personas.
3. Opsæt nøjagtige mål - hvad skal vi nøjes med?
Jeg tror, at de fleste designere / kunder ignorerer dette trin, men et af de vigtigste aspekter af design for begge parter er at forstå målene for det produkt, du designer. Vi har tendens til at springe lige ind i pixel og hurtigt kød ud af projektets brugerflade. Hvis det er et helt nyt websted eller en ny funktion, skal du sørge for at angive klare mål for, hvad du vil opnå først.
Da alt kan spores, tal om de nøjagtige punkter, du skal spore. For eksempel kan disse variere fra nye tilmeldinger, til en række kunder, der bruger Paypal vs. indkøb med kreditkort. Sørg altid for at vide, hvor højt du satser på i starten!
(Du har brug for det alligevel for at konfigurere tregner på Mixpanel senere i denne proces.)
4. Opret en projektmappe og begynd at opbygge et humørbræt
Der er masser af steder til inspiration - Dribbble , Behance , Pttrns osv. Det er virkelig nemt at finde lignende projekter til den, du arbejder på. Derudover kan der allerede findes en løsning på et problem, du oplever og forsøger at løse.
Når jeg begynder at arbejde på et nyt projekt, opsætter jeg altid en mappe med mapper, der hedder - Kildefiler , Skærme & Eksport , Inspiration og Ressourcer . Jeg gemmer alt, hvad jeg finder på internettet til Inspiration-mappen for at kunne bruge det senere til at oprette grundlæggende humørbræt. Denne mappe kan fyldes med alt fra plugins, farveprøver eller endda komplet case studies fra Behance.
Går lav troskab
5. Whiteboard
Hvis vi vil tilføje en ny funktion eller omdanne en proces, sætter vi os ned, og alle på mødet begynder at skitsere ideer på en tavle, papir eller endog en iPad. Denne handling gør det muligt for os at sætte alle på holdet i designers position. Senere slutter vi med to design muligheder for at se, hvilken der virker bedst.
Vi forsøger altid at gennemgå hele oplevelsen og diskutere de fleste af kantsagerne under denne del af processen. Det er virkelig vigtigt at tage fat på dem nu i modsætning til i designfasen, eller endnu værre, under udviklingsdelen. Det er da du kan miste meget tid og energi.
6. Kortlæg alle dine skærme (hvilke data en bruger skal indtaste)
Dette er tid til at gå ud over whiteboardet og liste alle brugerens input og historier. Skriv ned, hvad en bruger skal indsætte i en bestemt skærm, og hvordan en bruger kan nå deres ønskede mål.
7. Skriv ned alle mulige tilstande
Fordi alle dashboards, apps eller websites formularer har forskellige stater, er dette et andet vigtigt skridt, du bør ikke glemme.
Under design skal vi være sikre på at adressere dem alle. Det er rart at have skinnende grafer og kølige profilbilleder i vores Sketch-filer eller PSD'er. Men sandsynligvis vil brugerne se den modsatte side af din app. Især når de kommer til dit produkt. Det er nødvendigt at være forberedt. Nedenfor er et eksempel på, hvordan vi håndterer tomme stater i en af vores datakomponenter.
8. Klargør dit første diagram
Alt dette fører til den sidste del af lav troskab. Takket være resultatet af whiteboard-opgaven kender vi nu alle de mulige stater, brugerens input og mål. For at opsummere alle interaktioner skaber jeg et diagram og for at være ærlig har jeg ændret stilen ved at gøre dette mange gange: Gå fra Sketch-filer med rasteriserede layouter til bare rektangler, der symboliserer hver side med deres navne nedenfor. Når det er sagt, var processen altid smertefuld, jeg slutter som regel i en situation, hvor vi ønsker at ændre eller tilføje noget senere i processen. Med disse løsninger er jeg normalt tvunget til at gøre mange flere trin; som f.eks. ændring af positioner af linjer, pile og billeder.
For nylig har jeg brugt Camunda Modeler , som ikke er et designværktøj; det er en simpel app til oprettelse af tekniske diagrammer. Hvilket lyder underligt, men denne app er udviklet til at hjælpe dig med at opbygge grundlæggende diagrammer. Vigtigst er alt skabt, helt skalerbart. Du kan nemt trække og slippe et hvilket som helst punkt, og det vil automatisk skabe linjer og pile for dig. Du kan også vælge mellem forskellige typer punkter, som kan være nyttige for at fremhæve, når en bruger f.eks. Modtager en email fra Intercom. Camunda eksporterer til SVG, hvilket gør det nemt at farve sporbare punkter i Sketch.
Arbejde / Design
9. Moodboard
Jeg kan begynde med oprettelsen af humørbræt, da jeg samler alle billeder til min Inspirations mappe. Jeg bruger mood boards hovedsageligt til at diskutere mine tanker med kolleger og beskrive nogle af de visuelle ideer, før jeg starter med pixel processen.
10. Første udkast
Design er altid en løbende proces. Du vil iterere meget på din vej til et godt resultat. Med første udkast er også en måde at indsamle feedback på. Du behøver ikke at komme til pixel perfekt design for at begynde at modtage feedback fra dine holdkammerater, klienter eller potentielle brugere. For at få deres første tanker og for at starte en diskussion blander jeg som regel skærmbilleder fra vores nuværende design. Dette giver os mulighed for at begynde at spille med rigtige udseende på mindre end en dag. Du kan lave en første simpel prototype for at teste om tingene forbinder godt sammen.
11. Skriv din kopi
Kopiering er et af de vigtigste aspekter ved brugernes beslutninger, og jeg tager det som en afgørende del af designet. Der er ikke noget værre end et flot design med forvirrende dialoger, hvor brugerne kæmper for at finde det næste skridt.
12. Første interntest
Med dit første udkast kan du hurtigt oprette en prototype i Marvel eller invision . Dette er noget, jeg begyndte at gøre for nylig, og det viser sig, at det er et andet fantastisk valideringsaspekt. Med en prototype kan du nu nemt oprette et opkald med 3 eller 4 personer fra dit team og dele prototypeforbindelsen med dem og forsøge at stille et par spørgsmål, mens du tester dem om de pågældende strømme / scenarier.
På den måde kan du nemt teste dine spørgsmålstegn ved at teste dine designbeslutninger på rigtige brugere uden at bekymre dig om spildte ressourcer og tid. Jeg har tendens til at vælge folk, der ikke er så meget involveret i dashboardudvikling. Prøv også at undgå at se nogen der allerede har haft chancen for at spille med prototypen før.
13. Etiquette
Vi ved alle, hvor svært det er at holde sig ryddeligt. Sådan leverer du endnu en funktion. Dette fører normalt til en rodet Sketch eller PSD-filer. Jeg har lært meget om forskellene mellem at arbejde som en enkelt designer i en opstart, arbejde i teams eller arbejde på mine egne digitale produkter.
Når du arbejder i et hold, skal du tænke på din PSD, som om du skaber dem for en anden. Jeg bruger reglen om, at hvis du har mere end 8 lag i en mappe, skal du oprette en ny.
Jeg fandt et stort plugin til Sketch, som reddede mig timer, mens jeg arbejdede på mine brugerdefinerede udgaver: Omdøb det .
Tip: Sæt alt på lærredet. Jeg har altid kæmpet med at designe flade overskrifter, mens jeg resten af lærredet var hvid. Under designen lærte jeg at sætte alt indhold på plads først - bare spil med layout og typografi. Det er meget nemmere at designe flotte detaljer og spille med hele konceptet med indholdet på plads.
14. Opret UI-elementer og begynde at spille med Lego
Jeg er nok sent til festen, og det lyder allerede forældet, mens jeg skriver det. Årsagen til, at vi ikke har gjort nogen wireframing på rejsen her er enkel. Skitse 39 kommer med noget, jeg har fundet utroligt, og det er "former med resizing properties". Dette er noget der gør det nemt for alle at lave design på holdet. Vores Sketch-fil er ren træk-og-slip nu. Du kan nemt give nogen af dine holdkammerater et blankt lærred, og de kan skabe næsten høje troskabskoncept. Takket være dette er vi i stand til at springe over alle wireframingværktøjer og starte med næsten virkelige udseende pixels.
Dette går også hånd i hånd med, at vi faktisk kan konvertere wireframes til rigtige designs. Enhver PM kan oprette en wireframe, og så kan jeg nemt tage den over og omdanne til hi-fidelity.
Aktiver og levering
Når du er færdig med at designe og iterere baseret på første feedback, er du ikke færdig endnu. Nu er det tid til at aflevere dine designs til dine ingeniører / devs.
15. Specifikationer
Et af mine hovedmål er altid at kunne kommunikere mine beslutninger med holdet og være i stand til at reducere vanskeligheder for vores udviklere så meget som muligt for at give dem de bedst mulige ressourcer. Det for mig er helt sikkert den vigtigste del af mit job som designer.
Da vi dokumenterede hele samspillet og har alt klart fra starten af vores proces, skaber specs et stykke kage. Jeg har tendens til at skrive specs i Google Docs eller under skærmbillederne i Sketch files. Det er rart at håndtere dine designs med forklaringer på alle funktioner, så alle kan få fat i din fil i fremtiden.
16. Diagram
Denne teknik er god til at udskrive design og diskutere dem med holdet. Men i dag tror jeg, at der er bedre muligheder. Som at have klar den endelige prototype.
17. Endelig prototype
En af de vigtigste ting for mig er at altid have al interaktion klar i prototype. Jeg ender med at have 3-5 prototyper på vej til den endelige for den lille session med holdkammerater eller for at vise nogle bestemte strømme. Jeg har tendens til at forberede alle stater i Sketch i ét tavle og derefter duplikere disse tavler for at få hver stat klar til eksport.
Det er dejligt at tilføje kommentarer til dele af dine designs for at udvide din specifikation meget mere, så selv en tekstforfatter nemt kan gå og tjekke ægte pixels og flyder, hvis hver kopi og dialog fungerer efter behov.
18. Quicktime Video> Noter
Når jeg ikke præsenterer ting i Hangout til holdet eller en klient, sender jeg en screenshare-video af mig, der går igennem prototypen og forklarer alt, hvad jeg har designet. Det er en god bekræftelse for mig før nogen præsentation, at jeg kender svaret på ethvert spørgsmål og mulige fancy interaktioner, jeg har besluttet at designe. Kan også være pænt brugt, når du arbejder i fjerntliggende hold. Alle har adgang til at afspille hele interaktionstanken når som helst.
19. animere
Som en fin endelig touch kan du bruge Eftervirkninger eller Princip . Det er godt at forklare, hvordan du vil have dette eller det at flytte.
20. Styleguide
Et andet vigtigt punkt for ingeniører er at vide, hvordan tingene vil reagere i forskellige scenarier. Tænk på fejltilstande af input eller hvor du skal vise fejlmeddelelser. Ligeledes hvordan den handicappede tilstand for en indsende knap vil se, hvor man skal sætte en spinner mv.
Det er super nemt for ingeniører at gå lige igennem dine Symbols-tavle og stilelementer en efter en, før de selv begynder at kode alle skærmbilleder takket være at have en Sketch-fil som Lego-blokke.
Afsluttende test
Da vi er færdige med at overdrage vores designs til ingeniører, er vi i stand til at fokusere på den sidste del af processen - teste vores beslutninger!
21. Inspektør / HotJar
Når designene er omdannet til arbejdskode, glem ikke at medtage din Inspectlet eller HotJar JS uddrag. Jeg er altid begejstret (eller frustreret) for at se, hvordan brugere navigerer gennem vores dashboard eller hvad laver de på min porteføljeside. Inspectlet er fantastisk til at fange hele din brugersession. Fungerer også godt til større projekter.
Det kommer med let "/ side" filtrering, som hjælper dig med at se sessioner af en bestemt funktion eller flow.
22. Mixpanel
Mixpanel fungerer fint til at validere vores mål (dem, som vi opsætter i starten af vores proces). Mixpanel hjælper med at se, hvor mange brugere der gennemfører bestemte strømme. Hvor mange brugere faldt, før du oprettede kontoen. Hvor mange mennesker gik fra hovedlandingsside til butik og til vores mest værdifulde produkt.
23. Google Analytics
Jeg er ikke i stand til at kode store ting, men i det mindste kan jeg arbejde med CSS-filer og med simpel kode. I sidste øjeblik var jeg interesseret i at se, hvor brugere klikker og mens man ser på Hotjar heatmaps, så jeg har besluttet at opsætte basic click tracker i Google Analytics også. Du kan også nemt spore alle brugerens klik på din hjemmeside.
Dette hjælper mig med at kortlægge brugerens adfærd. For eksempel fandt jeg ud af, at folk brugte øverste navigation på mit websted 5x mere over det fremhævede link i introtekst. Desværre tæller det ikke med klik fra brugere med AdBlock.
24. Intercom
Da vi var enige om vores indledende strømme, talte vi om en del af strømmen, hvor brugeren modtager en email fra Samtaleanlæg . Vores ansvar her er at sikre, at alt kopier og meddelelsen selv giver mening og er faktisk nyttigt for den besøgende. Sørg for, at dine e-mails styrer din bruger til dit gode resultat og altid forsøge at levere specifikke supportartikler og information om, hvordan du fortsætter i strømmen.
De sidste få ord
25. Forlad dribbble bagved
Fra hvad jeg har lært og hvordan mit design er ændret i løbet af de sidste 4 år, har jeg kommet til det punkt, hvor Dribbble ikke nødvendigvis er det sted, du vil oprette dine designs til. Jeg har altid haft til formål at have flotte pixels med sexede profilbilleder, men det er ikke, hvad virkelige brugere har brug for og vil bruge.
Her er et eksempel til venstre, vil du se noget, jeg har designet til Dribbble. Til højre ser du noget, jeg designede, når jeg brugte lidt tid på at se folk redigere deres profiler og indså, at min vision ikke leverede, hvad de havde brug for.
Du kan modtage 500 lignende til lys skør animation af en kartoffel eller glidende pizza, men det er virkelig vigtigt, at dine brugere vil finde, hvordan man styrer hyppigheden af firmaets e-mails eller hvordan man filtrerer deres ydeevneanalyser.
[- Dette indlæg blev oprindeligt indsendt på medium , genudgivet med forfatterens tilladelse. -]