26 trin til produkt- og instrumentbrætdesign

Hvad jeg har lært i løbet af min 4-årige rejse af en Product Designer & Dashboard Designer

I de sidste fire år har jeg fortsat med at designe dashboards og applikationer, og jeg har lært, hvordan jeg skal håndtere forskellige afdelinger og bruge deres viden for at gøre produktdesign både bedre og mere effektivt.
 
I dag vil jeg dele alle de trin, jeg har lært og integreret i min daglige rutine. Disse trin tror jeg har bidraget til at gøre mig til en meget bedre designer, og jeg vil dele dem med dig.

1. Forproces

Få så meget information som muligt (Bed om tre eksempler)

For mig giver intet mig mere klarhed end at se et rigtigt fungerende eksempel. Når jeg arbejder med en ny klient eller på en helt ny destinationsside for et produkt, finder jeg det nemmeste at bede klienten om at give tre eller fire inspirerende sider, fordi dette virkelig hjælper begge parter. At få din klient til at lægge ideer på bordet giver dig en mulighed for let at forstå, hvad de kan lide, og hvad de forventer af det færdige design.
 
Hvis du arbejder med flere teams, skal du søge at bruge lige så meget tid sammen med udviklerne på et produkt, som du gør med dine designerkolleger. Hvad jeg har lært, mens jeg arbejdede på Tapdaq, nøglen til at tage en effektiv designbeslutning er at sikre, at du taler med dev-teamet så meget som du kan. I mit tilfælde er der altid tilfælde af en løsning på et problem, hvor jeg ikke selv kunne komme med den løsning. Jeg vil sige, at målet er at fjerne så mange spørgsmål som muligt, inden du går over i udvikling.

Lær om personas

Først må jeg sige, at jeg var skeptisk til personer, men nu giver det mig mening.
 
Så i fuld kontrast til min ældre proces, kan jeg se, hvordan personaer er ekstremt vigtige, mens jeg arbejder med produktfunktioner, især når løsningen har mange forskellige kanter. Det hjælper dig med at forstå, hvem du virkelig designer. Jeg sigter mod at have omkring fire til fem personer. På den bedste måde at have personas som faktiske brugere, kan dette hjælpe dig med at identificere problemer, mens du chatter eller går gennem din løsning med dem på et opkald eller personligt.

Persona skabelon - Download den her: http://janlosert.com/assets/persona-template.zip

Opsætning af nøjagtige mål - hvad skal vi spore nøjagtigt?

Jeg tror, ​​at de fleste designere / klienter ignorerer dette trin, men et af de vigtigste aspekter ved design for begge parter er at forstå målene for det produkt, du designer. Vi har en tendens til at hoppe direkte i pixels og hurtigt udskille UI'et for projektet. Hvis det er et helt nyt websted eller en ny funktion, skal du sørge for at opstille klare mål for, hvad du vil opnå.
 
Da alt kan spores, kan du tale om de nøjagtige punkter, du vil spore. For eksempel kan disse variere fra nye tilmeldinger til et antal kunder, der bruger Paypal vs. køb med kreditkort. Sørg altid for at vide, hvor højt du sigter mod i starten!
 
P. S. - Du har brug for dette alligevel til opsætning af tragte på Mixpanel senere i denne proces.

Projektstruktur

Opsæt projektmappe og start indsamling af Moodboard

Der er masser af steder til inspiration - Dribbble, Behance, Pttrns, Pinterest osv. Det er virkelig nemt at finde lignende projekter som dem, du skal arbejde på. Derudover kan der allerede være en løsning på et problem, du oplever og forsøger at løse.
 
Når jeg begynder at arbejde på et nyt projekt, konfigurerer jeg altid en mappe med mapper med navnet - Kildefiler, skærmbilleder og eksport, inspiration og ressourcer. Jeg gemmer alt, hvad jeg finder på internettet, i mappen Inspiration for at kunne bruge det senere til at oprette grundlæggende moodboards. Denne mappe kunne være fyldt med alt fra plugins, farveprøver eller endda fulde casestudier fra Behance.

2. Going Low Fidelity

Tavle

Hvis nogen kan huske, var jeg ligeglad med kvaliteten af ​​wireframes i min forrige artikel. De metoder, jeg bruger nu, er følgende:
 
Hvis vi vil tilføje en ny funktion eller redesigne en proces, sætter vi os ned, og alle på mødet begynder at tegne ideer på et tavle, papir eller endda en iPad. Denne handling giver os mulighed for at sætte alle på teamet i designerens position. Senere ender vi med to designmuligheder for at se, hvilken der fungerer bedst. Vi prøver altid at gennemgå hele oplevelsen og diskutere de fleste af randsagerne i denne del af processen. Det er virkelig vigtigt at adressere dem nu i modsætning til i designfasen, eller endnu værre, under udviklingsdelen. Det er når du kan miste meget tid og energi i stedet.

Kortlægge alle dine skærminfo (hvilke data en bruger har brug for at indtaste)

Dette er tiden til at gå ud over tavlen og liste alle brugerens input og historier. Skriv, hvad der præcist skal en bruger indsætte i en bestemt skærm, og hvordan kan en bruger nå de ønskede mål.

Skriv alle mulige tilstande ned

Da alle dashboards, apps eller websides formularer har forskellige tilstande, er dette et andet vigtigt trin, du ikke skal glemme.
 
Under design skal vi være sikre på at adressere dem alle. Det er dejligt at have skinnende grafer og seje profilbilleder i vores Sketch-filer eller PSD'er. Dog vil sandsynligvis brugere 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 tilstande i en af ​​vores datakomponenter.

Tapdaq - Cross Promotions widgetstater

Forbered det første diagram

Alt dette fører til den sidste del af lav tro. Takket være resultatet af tavleopgaven kender vi nu alle de mulige tilstande, brugerens input og mål. For at opsummere alle interaktioner opretter jeg et diagram og for at være ærlig har jeg ændret stilen til at gøre dette mange gange: Fra Sketch-filer med rasteriserede layouts til bare rektangler, der symboliserer hver side med deres navne nedenfor. Når det er sagt, var processen altid smertefuld, jeg ender som regel i en situation, hvor vi vil ændre eller tilføje noget senere i processen. Med disse løsninger er jeg normalt tvunget til at gøre mange flere skridt; såsom ændring af positioner for linjer, pile og billeder.

Når alt kommer til alt endte vi med at bruge 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, hvad der er skabt, fuldstændigt skalerbar. Du kan nemt trække og slippe ethvert punkt, og det opretter automatisk linjer og pile til dig. Du kan også vælge mellem forskellige typer punkter, som for eksempel kan være nyttige til fremhævning, når en bruger modtager en e-mail fra Intercom. Camunda tillader eksport til SVG, der gør det let at farve sporbare punkter i Sketch.

Tapdaq Menu + skærmstruktur (eksport fra Camunda Modeler)

3. Arbejde / design

Humørtavle

Jeg er i stand til at starte med oprettelsen af ​​moodboard, da jeg samler alle billeder til min Inspiration-mappe. Jeg bruger moodboards hovedsageligt til at diskutere mine tanker med kolleger og beskrive nogle af de visuelle ideer, inden jeg begynder med pixelprocessen.

Moodboard med Chronicle Display og lyse blå farver

Første udkast

Design er altid en løbende proces. Du vil gentage meget på din vej til et fantastisk resultat. Med det første udkast indsamles også første feedback. Du behøver ikke komme til pixel-perfekt design for at begynde at modtage feedback fra dine teamkammerater, klienter eller potentielle brugere. For at få deres første tanker og for at starte en diskussion blander jeg normalt skærme fra vores nuværende design. Dette giver os mulighed for at begynde at spille med ægte design på mindre end en dag. Du kan lave en første simpel prototype for at teste, om ting forbinder godt sammen.

Skriv din kopi (tone)

Kopi er et af de vigtigste aspekter af brugernes beslutninger, og jeg tager det som en vigtig del af designet. Jeg er ikke en native speaker, men jeg er stadig i stand til at indstille tonen på kopien. Der er intet værre end et pænt design med forvirrende dialoger, hvor brugerne kæmper for at finde det næste trin.

Første Interntest

Med dit første udkast kan du hurtigt oprette en prototype i Marvelapp 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 let oprette et opkald med 3 eller 4 personer fra dit team og dele prototypelinket med dem og prøve at stille et par spørgsmål, mens du tester dem bestemte strømme / scenarier. På denne måde kan du nemt teste dine spørgsmål til at stille spørgsmålstegn ved og selvfølgelig teste dine designbeslutninger på rigtige brugere uden at bekymre dig om spildte ressourcer og tid. Jeg har som regel en tendens til at vælge mennesker, der ikke er så meget involveret i dashboardudvikling. Prøv også at undgå at se nogen, der allerede har haft en chance for at lege med prototypen før.

Etikette

Vi ved alle, hvor svært det er at holde sig ryddig. Sådan leveres endnu en funktion. Dette fører normalt til en rodet Sketch- eller PSD-filer. Jeg har lært meget, mens jeg designede Dashboard UI Kit, især om forskelle mellem at arbejde som en eneste designer i en opstart, arbejde i teams eller arbejde på mine digitale produkter. Mens jeg arbejder i Tapdaq, er jeg overbevist om mine kollegers evner, og selv når jeg ved, at jeg prøver hårdt på at holde filer ryddige, er det nogle gange umuligt! Men når du arbejder i et team, tænker jeg på min PSD, som om jeg opretter dem til en anden. Jeg bruger reglen om, at hvis du har mere end 8 lag i en mappe, så skal du oprette et nyt.

Dashboard UI Kit - Mappers struktur

Jeg fandt et fantastisk plugin til Sketch, som sparer mig timer, mens jeg arbejdede på mine UI-sæt. Omdøb - https://github.com/rodi01/RenameIt
 
Du kan stadig se på disse gamle retningslinjer for etikette (I hvert fald fungerer de fleste point for enhver redigerer, du vil bruge.) - http://photoshopetiquette.com/

Tip - Læg alt i lærred

Jeg har altid kæmpet med at designe dejlige overskrifter, mens jeg resten af ​​lærredet var hvidt. Under design lærte jeg at placere alt indhold på plads først - bare lege med layout og typografi. Det er meget lettere at designe dejlige detaljer og lege med hele konceptet med indholdet på plads.

Opret brugergrænsefladeelementer og start med Lego

Jeg er sandsynligvis sent på festen, og dette vil allerede lyde forældet, mens jeg skriver det. Årsagen til, at vi ikke har udført nogen wireframing på rejsen her, er enkel. Sketch 39 kommer med noget, som jeg har fundet utroligt, og det er "figurer med ændringer i størrelse". Det tvang mig til endelig at genskabe alle 50+ Tapdaq-skærme. Dette er noget, der gør design let for alle på holdet. Vores skissefil er ren træk og slip nu. Du kan nemt give enhver af dine holdkammerater et tomt lærred, og de kan oprette næsten hi-fidelity-udkast. Takket være dette er vi i stand til at springe alle wireframing-værktøjer over og starte med næsten rigtigt udseende pixels.

Dette går også hånd i hånd med, at vi faktisk kan konvertere wireframes til ægte designs. Enhver PM kan oprette wireframe, og så kan jeg nemt overtage det og omdanne til hi-fidelity.

Træk & slip-elementer i Tapdaq-skitefil

4. 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 kommer tiden til at overdrage dine designs til dine ingeniører / devs.

specifikationer

Et af mine hovedmål er altid at være i stand til at kommunikere mine beslutninger med teamet og være i stand til at reducere vanskelighederne for vores udviklere så meget jeg kan for at give dem de bedst mulige ressourcer. Det for mig er bestemt den vigtigste del af mit job som designer.
 
Da vi dokumenterede al interaktion og har alt klar fra starten af ​​vores proces, er det at oprette specs et stykke kage. Jeg har en tendens til at skrive specifikationer i Google Dokumenter eller under skærmene i Sketch-filer. Det er dejligt at håndtere dine designs med forklaringer på alle funktioner, så enhver kan gribe din fil i fremtiden.

Diagram

Vi plejede at gøre denne teknik, mens jeg har arbejdet i Badoo til præsentationer med teamet og interessenter. Denne teknik er dejlig til at udskrive design og diskutere dem med teamet. Men i dag tror jeg, at der er bedre muligheder. Såsom at have klar den endelige prototype.

Komplet diagram over Sagram Analytics-appen

Endelig prototype

En af de vigtigste ting for mig er altid at have al interaktion klar i prototype. Jeg ender som regel med at have 3-5 prototyper på vej til den sidste til den lille session med holdkammerater eller for at vise nogle bestemte strømme. Jeg har en tendens til at forberede alle stater i Sketch i et artboard og derefter duplikere disse artboards til at have hver stat klar, når de eksporteres.
Som sagt før, kan du enten bruge Marvelapp eller Invision. Det er dejligt at tilføje kommentarer til dele af dit design for at udvide din specifikation meget mere, så selv tekstforfatter nemt kan gå og tjekke rigtige pixels og strømme, hvis hver kopi og dialog fungerer efter behov.

Quicktime-video> Noter

Når jeg ikke præsenterer ting i Hangout for teamet eller en klient, sender jeg en skærmbillede af mig gennem prototypen og forklarer alt hvad jeg har designet. Det er en dejlig bekræftelse for mig inden enhver præsentation, at jeg ved svaret på ethvert spørgsmål og mulige smarte interaktioner, jeg har besluttet at designe. Kunne også bruges pænt, når man arbejder i eksternt baserede teams. Alle har adgang til at afspille hele interaktionstænkningen når som helst.

Animér

En dejlig sidste touch af dit design, du kan bruge After Effects eller Principle. Det er godt at forklare, hvordan skal du have dette og det for at bevæge eller svæve.

Styleguide

Et andet vigtigt punkt for ingeniører er at vide, hvordan tingene reagerer i forskellige scenarier. Tænk på fejltilstanden for input eller hvor der vises fejlmeddelelse. Det samme som hvordan deaktiveret tilstand af indsendelsesknap vil se ud, hvor man kan placere spinner i input osv. Det er super nemt for ingeniører at gå lige gennem dit symbolbords tegnebræt og stil et efter et element, før de endda begynder at kode alle skærme takket være at have en Sketch-fil som Lego blokke. Styleguide og visuel oversigt over alle elementer er faktisk en af ​​de mest efterspurgte funktioner / design til den næste opdatering af mit Dashboard UI Kit.

Tapdaq UI Oversigt - Styleguide

5. Final & Test

Da vi er færdige med at udlevere vores design til ingeniører, er vi i stand til at fokusere på den sidste del af processen - Test af vores beslutninger!

Inspectlet / HotJar

Når designene er omdannet til arbejdskode, skal du ikke glemme at inkludere dine Inspectlet- eller HotJar JS-kodestykker. Jeg er altid begejstret (eller frustreret) over at se, hvordan brugere navigerer gennem vores dashboard eller hvad de laver på min porteføljeside. Inspectlet er forbløffende, når du fanger al din brugersession. Fungerer også godt til større projekter. Det leveres med let “/ side” -filtrering, som hjælper dig med at se session af en bestemt funktion eller flow. Vi bruger Inspectlet i Tapdaq. Til min personlige portefølje bruger jeg HotJars gratis funktioner til at generere varmekort og registrere mindst et par brugere, der gennemser min portefølje.

Mixpanel

Mixpanel fungerer godt til validering af vores mål (de mål, vi konfigurerer i starten af ​​vores proces). Mixpanel hjælper med at se, hvor mange brugere der gennemfører bestemte strømme. Hvor mange brugere faldt inden opsætningen af ​​kontoen. Hvor mange mennesker gik fra den vigtigste destinationsside til butikken og til vores mest værdifulde produkt.

Google Analytics

Jeg er ikke i stand til at kode store ting, men i det mindste er jeg i stand til at arbejde med CSS-filer og med simpel kode. For nylig var jeg interesseret i at se, hvor brugere klikker, og mens jeg kiggede på Hotjar-varmekort, har jeg besluttet at konfigurere grundlæggende klikspor i Google Analytics. Du kan også nemt spore alle brugers klik på dit websted. Her er prøvekode til sporing af klik - http://pastebin.com/tdmFZN2k

`` `

** 1. Indsæt script til din kode **