26 steg till perfekt produktdesign
Under de senaste fyra åren har jag utformat instrumentpaneler och applikationer, och jag har lärt mig hur man hanterar olika avdelningar och utnyttjar deras kunskaper för att göra produktdesignen effektivare.
Idag ska jag dela alla de steg som jag har byggt in i min dagliga rutin, som jag tror har gjort mig till en bättre designer.
Pre-process
1. Få så mycket information som möjligt (fråga om tre exempel)
För mig ger ingenting tydligare än att se ett verkligt fungerande exempel. När jag jobbar med en ny klient eller på en helt ny målsida för en produkt, finner jag att den enklaste utgångspunkten är att be klienten att ge tre eller fyra inspirerande sidor, eftersom det verkligen hjälper båda parterna. Att få din klient att lägga idéer på bordet ger dig möjlighet att lätt förstå vad de tycker om, och vad de förväntar sig av den färdiga designen.
Om du arbetar med flera lag ska du sträva efter att spendera så mycket tid med utvecklarna på en produkt som du gör med dina designerkollegor. Vad jag har lärt mig är att nyckeln till ett effektivt designbeslut är att se till att du pratar med dev team så mycket du kan. I mitt fall har det funnits fall där en lösning på ett problem hittades, att jag inte kunde klara av mig själv.
Målet är att eliminera så många frågor som möjligt innan du går in i utvecklingen.
2. Lär dig om personas
Till att börja med måste jag säga att jag var skeptisk till personas, men nu är det allt förnuftigt för mig.
Så i fullständig kontrast till min äldre process kan jag se hur personuppgifter är super viktiga när man arbetar med produktegenskaper, särskilt när lösningen har många olika kantfall. Det hjälper dig att förstå vem du verkligen utformar för. Jag strävar efter att ha runt fyra till fem personer.
3. Ställ in exakta mål - vad ska vi spåra exakt?
Jag tror att de flesta designers / klienter ignorerar detta steg, men en av de viktigaste aspekterna av design för båda parter är att förstå målen för den produkt du designar. Vi brukar hoppa direkt i pixlar och snabbt krossa projektets användargränssnitt. Om det är en helt ny webbplats eller en ny funktion, se till att du ställer upp tydliga mål för vad du vill uppnå först.
Eftersom allt är spårbart talar du om de exakta punkterna du ska spåra. Till exempel kan dessa sträcka sig från nya registreringar till ett antal kunder som använder Paypal kontra inköp med kreditkort. Se alltid till att du vet hur högt du syftar till i början!
(Du behöver det ändå för att konfigurera tåg på Mixpanel senare i denna process.)
4. Ställ in en projektmapp och börja bygga ett moodboard
Det finns gott om platser för inspiration - Dribbble , Behance , Pttrns etc. Det är väldigt enkelt att hitta liknande projekt till den du arbetar med. Dessutom kan det redan finnas en lösning på ett problem du upplever och försöker lösa.
När jag börjar jobba med ett nytt projekt, installerar jag alltid en mapp med mappar som heter - Källfiler , Skärmar och Exportera , Inspiration och Resurser . Jag sparar allt jag hittar på internet till Inspiration-mappen för att kunna använda den senare för att skapa grundläggande moodboards. Den här mappen kan fyllas med allt från plugins, korrigeringar eller till och med fullständiga fallstudier från Behance.
Går låg trohet
5. Whiteboard
Om vi vill lägga till en ny funktion eller omforma en process sätter vi oss ner och alla på mötet börjar skissera idéer på whiteboard, papper eller till och med en iPad. Denna åtgärd låter oss sätta alla på laget i designerns position. Senare slutar vi med två designalternativ för att se vilken som fungerar bäst.
Vi försöker alltid att gå igenom hela upplevelsen och diskutera de flesta kantfallen under denna del av processen. Det är verkligen viktigt att ta itu med dem nu i motsats till under designfasen, eller ännu värre, under utvecklingsdelen. Det är då du kan förlora mycket tid och energi.
6. Karta ut alla dina skärmar (vilken data en användare behöver skriva in)
Det här är dags att gå bortom whiteboarden och lista alla användarens inmatningar och berättelser. Skriv ner vad exakt en användare ska infoga i en viss skärm och hur en användare kan uppnå sina önskade mål.
7. Skriv ner alla möjliga tillstånd
Eftersom alla instrumentbrädor, appar eller webbplatser har olika stater, är detta ett annat viktigt steg som du inte bör glömma.
Under utformningen måste vi vara säkra på att ta itu med dem alla. Det är trevligt att ha glänsande grafer och snygga profilbilder i våra Sketch-filer eller PSD-skivor. Men troligtvis kommer användarna att se motsatt sida av din app. Speciellt när de kommer till din produkt. Det är nödvändigt att vara förberedd. Nedan följer ett exempel på hur vi hanterar tomma tillstånd i en av våra datakomponenter.
8. Förbered ditt första diagram
Allt detta leder till den sista delen av låg trohet. Tack vare resultatet av whiteboard-uppgiften vet vi nu alla möjliga stater, användarens inkomster och mål. För att sammanfatta alla interaktioner skapar jag ett diagram och ärligt talat. Jag har ändrat stilen med att göra detta många gånger: Gå från Sketch-filer med rasteriserade layouter till bara rektanglar som symboliserar varje sida med deras namn nedan. Med detta sagt var processen alltid smärtsam, jag brukar hamna i en situation där vi vill ändra eller lägga till något senare i processen. Med dessa lösningar är jag vanligtvis tvungen att göra många fler steg; som att ändra positionerna för linjer, pilar och bilder.
Nyligen har jag använt Camunda Modeler , vilket är ett inte just ett designverktyg; det är en enkel app för att skapa tekniska diagram. Det låter konstigt, men den här appen är utvecklad för att hjälpa dig att bygga grundläggande diagram. Viktigast är allt skapat helt skalbart. Du kan enkelt dra och släppa någon punkt och det skapar automatiskt linjer och pilar för dig. Du kan också välja mellan olika typer av punkter som kan vara till hjälp för att markera när en användare exempelvis får ett e-postmeddelande från Intercom. Camunda exporterar till SVG vilket gör det enkelt att färgspårbara punkter i Sketch.
Arbete / Design
9. Moodboard
Jag kan börja med skapandet av humörbrädan, eftersom jag samlar alla bilder till min Inspiration-mapp. Jag använder mood boards främst för att diskutera mina tankar med kollegor och beskriva några av de visuella idéerna, innan jag börjar med pixel processen.
10. Första utkastet
Design är alltid en pågående process. Du kommer att iterera mycket på din väg till ett bra resultat. Med första utkastet är också ett sätt att samla feedback. Du behöver inte komma till perfekt design för pixlar för att börja få feedback från dina lagkamrater, kunder eller potentiella användare. För att få sina första tankar och att starta en diskussion blandar jag vanligtvis skärmar från våra nuvarande mönster. Detta gör det möjligt för oss att börja spela med riktigt snygga mönster på mindre än en dag. Du kan göra en första enkel prototyp för att testa om sakerna går bra ihop.
11. Skriv din kopia
Kopiering är en av de viktigaste aspekterna av användarnas beslut och jag tar det som en viktig del av designen. Det finns inget värre än en fin design med förvirrande dialoger där användarna kämpar för att hitta nästa steg.
12. Första interntest
Med ditt första utkast kan du snabbt skapa en prototyp i förundras eller Invision . Detta är något jag började göra nyligen och det visar sig att det är en annan fantastisk validering aspekt. Med en prototyp kan du nu enkelt skapa ett samtal med 3 eller 4 personer från ditt team och dela prototyplänken med dem och försök att ställa några frågor medan du testar på dem specifika flöden / scenarier.
På så sätt kan du enkelt testa dina frågetecken och självklart testa dina designbeslut på verkliga användare utan att oroa dig för slöseri och tid. Jag brukar välja människor som inte är så mycket involverade i instrumentbrädans utveckling. Försök också att undvika att se någon som redan har haft chans att spela med prototypen innan.
13. Etikett
Vi vet alla hur svårt det är att vara städad. Så här levererar du en annan funktion. Detta leder vanligtvis till en rörig Sketch- eller PSD-fil. Jag har lärt mig mycket om skillnaderna mellan att arbeta som en formgivare i en start, jobba i team eller arbeta på mina digitala digitala produkter.
När du arbetar i ett lag, tänk på din PSD som att du skapar dem för någon annan. Jag använder regeln om att du ska skapa en ny om du har mer än 8 lager i en mapp.
Jag hittade ett bra plugin för Sketch, som sparade mig timmar medan jag arbetade på mina UI-paket: Byt namn på den .
Tips: Sätt på allt på duken. Jag har alltid kämpat med att utforma fina rubriker medan jag resten av duken var vit. Under designen lärde jag mig att lägga allt innehåll på plats först - bara spela med layout och typografi. Det är mycket lättare att utforma fina detaljer och spela med hela konceptet med innehållet på plats.
14. Skapa UI-element och börja spela med Lego
Jag är förmodligen sent till festen och det hörs redan gammal när jag skriver det. Anledningen till att vi inte har gjort någon trådframställning på resan här är enkel. Sketch 39 kommer med något som jag har hittat otroligt och det är "former med resizing properties". Detta är något som gör det enkelt för alla på laget att designa. Vår Sketch-fil är ren dra och släpp nu. Du kan enkelt ge någon av dina lagkamrater en tom duk och de kan skapa nästan högkvalitativa utkast. Tack vare det här kan vi hoppa över alla trådverktyg och börja med nästan riktiga pixlar.
Detta går också hand i hand med att vi faktiskt kan konvertera wireframes till riktiga mönster. Varje PM kan skapa en wireframe och då kan jag enkelt ta över den och omvandla till högfidelity.
Tillgångar och leverans
När du är klar med att designa och iterera baserat på första feedback är du inte klar än. Nu kommer tiden att överlämna dina mönster till dina ingenjörer / devs.
15. Specifikationer
Ett av mina huvudsyfte är att alltid kunna kommunicera mina beslut med laget och kunna minska svårigheterna för våra utvecklare så mycket jag kan för att ge dem bästa möjliga resurser. Det för mig är definitivt den viktigaste delen av mitt jobb som designer.
Eftersom vi dokumenterat all interaktion och har allt klart från början av vår process, är skapande av specs en bit kaka. Jag brukar skriva specs i Google Dokument eller under skärmarna i Sketch files. Det är trevligt att hantera dina mönster med förklaringar på alla funktioner så att någon kan ta tag i din fil i framtiden.
16. Diagram
Denna teknik är trevlig för att skriva ut mönster och diskutera dem med laget. Men nuförtiden tror jag att det finns bättre alternativ. Såsom att ha redo den sista prototypen.
17. Slutlig prototyp
En av de viktigaste sakerna för mig är att alltid ha all interaktion redo i prototyp. Jag brukar sluta ha 3-5 prototyper på väg till den sista för den lilla sessionen med lagkamrater eller för att visa vissa flöden. Jag tenderar att förbereda alla stater i Sketch i en tavla och sedan duplicera dessa tavlor så att varje stat är redo när den exporteras.
Det är bra att lägga till kommentarer till delar av dina mönster för att utöka din specifikation mycket mer så att även en copywriter enkelt kan gå och kolla in riktiga pixlar och flyter om varje kopia och dialog fungerar efter behov.
18. Quicktime Video> Anteckningar
När jag inte presenterar saker i Hangout till teamet eller en klient skickar jag en skärmdelsvideo av mig och går igenom prototypen och förklarar allt vad jag har designat. Det är en bra bekräftelse för mig innan någon presentation som jag vet svaret på någon fråga och möjliga snygga interaktioner jag har bestämt mig för att designa. Kan också användas snyggt när man arbetar i avlägsna lag. Alla har tillgång till att spela hela interaktionstänkandet när som helst.
19. animera
Som en fin sista touch kan du använda Bieffekter eller Princip . Det är bra att förklara hur du vill att den här eller den ska flytta.
20. Styleguide
En annan viktig punkt för ingenjörer är att veta hur saker kommer att reagera i olika scenarier. Tänk på felstatus i inmatning eller var du ska visa felmeddelanden. På samma sätt hur är den inaktiverade staten för en inlämningsknapp ser ut, var man ska placera en spinnare etc.
Det är super lätt för ingenjörer att gå igenom dina Symbols-tavlor och stilelement en efter en innan de ens börjar koda alla skärmar tack vare att du har en Sketch-fil som Lego-block.
Slutlig testning
Eftersom vi är färdiga med att överlämna våra mönster till ingenjörer kan vi fokusera på den sista delen av processen - testa våra beslut!
21. Inspektör / HotJar
Efter att designen har blivit till arbetskod glöm inte att inkludera din Inspectlet eller HotJar JS-fragment. Jag är alltid upphetsad (eller frustrerad) för att se hur användarna navigerar via vår instrumentpanel eller vad gör de på min portföljsida. Inspectlet är fantastiskt för att fånga hela din användarsession. Fungerar bra för större projekt också.
Det kommer med lätt "/ sida" filtrering som hjälper dig att titta på sessioner av en viss funktion eller flöde.
22. Mixpanel
Mixpanel fungerar bra för att validera våra mål (de som vi ställer in i början av vår process). Mixpanel hjälper till att se hur många användare slutför särskilda flöden. Hur många användare tappade innan du startade kontot. Hur många personer som gick från huvudsidan för att lagra och till vår mest värdefulla produkt.
23. Google Analytics
Jag kan inte koda stora saker, men åtminstone kan jag arbeta med CSS-filer och med enkel kod. Senast var jag intresserad av att se var användarna klickar och medan man tittar på Hotjar värmekartor så har jag bestämt mig för att installera basklikspårare i Google Analytics också. Du kan enkelt spåra alla användares klick på din webbplats också.
Detta hjälper mig att enkelt kartlägga användarens beteende. Till exempel fick jag reda på att folk använde toppnavigering på min sida 5x mer över den markerade länken i introtext. Tyvärr räknar det inte med klick från användare med AdBlock.
24. Intercom
När vi kom överens om våra första flöden talade vi om en del av flödena där användaren får ett mail från intercom . Vårt ansvar här är att se till att allt kopia och meddelandet själv är meningsfullt och verkligen är till hjälp för besökaren. Var säker på att dina e-postmeddelanden guidar din användare till ditt positiva resultat och försök alltid att ge specifika supportartiklar och information om hur du fortsätter i flödet.
De sista orden
25. Lämna dribbble bakom
Från vad jag har lärt mig och hur min design har förändrats under de senaste 4 åren har jag kommit till den punkt där Dribbble inte nödvändigtvis är den plats du vill skapa dina mönster för. Jag har alltid försökt att ha fina pixlar med sexiga profilbilder, men det är inte vad riktiga användare behöver och kommer att använda.
Här är ett exempel, till vänster ser du något jag designade för Dribbble. Till höger ser du något jag designade när jag tillbringade tid på att titta på personer som redigerade sina profiler och insåg att min vision inte levererade vad de behövde.
Du kan få 500 gillar för ljust galen animering av en potatis eller glidande pizza, men det som verkligen är viktigt är att dina användare kommer att hitta hur man hanterar frekvensen av företagsemail eller hur man filtrerar deras prestationsanalyser.
[- Detta inlägg skrevs ursprungligen på medium , publiceras med författarens tillåtelse. -]