26 stappen naar perfect productontwerp
In de afgelopen vier jaar heb ik dashboards en applicaties ontworpen en heb ik geleerd om met verschillende afdelingen om te gaan en hun kennis te gebruiken om productontwerp efficiënter te maken.
Vandaag ga ik alle stappen die ik in mijn dagelijkse routine heb ingebouwd delen, waarvan ik geloof dat hij mij tot een betere ontwerper heeft gemaakt.
Pre-proces
1. Krijg zoveel mogelijk informatie (vraag om drie voorbeelden)
Voor mij biedt niets meer duidelijkheid dan een echt werkend voorbeeld te zien. Wanneer ik met een nieuwe klant werk of op een gloednieuwe bestemmingspagina voor een product, vind ik het als het gemakkelijkste uitgangspunt om de klant te vragen drie of vier inspirerende pagina's te geven, omdat dit echt beide partijen helpt. Door je klant ideeën op tafel te laten zetten, kun je meteen begrijpen wat ze leuk vinden en wat ze verwachten van het voltooide ontwerp.
Als u met meerdere teams werkt, moet u proberen zoveel mogelijk tijd met de ontwikkelaars aan een product te besteden, net als aan uw collega's van ontwerpers. Wat ik heb geleerd is dat de sleutel tot het maken van een effectieve ontwerpbeslissing is ervoor te zorgen dat je zoveel mogelijk met het ontwikkelaars team spreekt. In mijn geval zijn er gevallen geweest waarin een oplossing voor een probleem werd gevonden, die ik zelf niet kon bedenken.
Het doel is om zoveel mogelijk vragen te elimineren voordat je in ontwikkeling gaat.
2. Meer informatie over persona's
In het begin moet ik zeggen dat ik sceptisch was over persona's, maar nu is het allemaal logisch voor mij.
Dus in volledig contrast met mijn oudere proces, kan ik zien hoe persona's super belangrijk zijn tijdens het werken aan productfuncties, vooral wanneer de oplossing veel verschillende randgevallen heeft. Het helpt je te begrijpen voor wie je echt ontwerpt. Ik streef ernaar om ongeveer vier tot vijf persona's te hebben.
3. Stel exacte doelen in - wat moeten we precies bijhouden?
Ik denk dat de meeste ontwerpers / klanten deze stap negeren, maar een van de belangrijkste aspecten van ontwerp voor beide partijen is het begrijpen van de doelen van het product dat je ontwerpt. We hebben de neiging om direct in pixels te springen en de UI van het project snel uit te werken. Als het een gloednieuwe website is of een nieuwe functie, moet u duidelijke doelen stellen van wat u eerst wilt bereiken.
Aangezien alles traceerbaar is, spreekt u over de exacte punten die u gaat traceren. Deze kunnen bijvoorbeeld variëren van nieuwe aanmeldingen tot een aantal klanten die Paypal gebruiken versus aankopen met creditcards. Zorg er altijd voor dat je weet hoe hoog je aan het begin bent!
(Je hebt dit hoe dan ook nodig voor het instellen van trechters op Mixpanel later in dit proces.)
4. Stel een projectmap in en begin met het bouwen van een moodboard
Er zijn tal van sites voor inspiratie - Dribbble , Behance , Pttrns etc. Het is heel eenvoudig om vergelijkbare projecten te vinden als degene waaraan je werkt. Bovendien is er mogelijk al een oplossing voor een probleem dat u ondervindt en probeert op te lossen.
Wanneer ik aan een nieuw project begin te werken, stel ik altijd een map in met de mappen: Source Files , Screens & Export , Inspiration & Resources . Ik bewaar alles wat ik vind op het internet in de map Inspiration om het later te kunnen gebruiken om basis moodboards te maken. Deze map kan worden gevuld met alles van plug-ins, stalen of zelfs volledige casestudy's van Behance.
Gaat weinig trouw
5. Whiteboard
Als we een nieuwe functie willen toevoegen of een proces opnieuw willen ontwerpen, gaan we zitten en begint iedereen op de vergadering met het schetsen van ideeën op een whiteboard, papier of zelfs een iPad. Met deze actie kunnen we iedereen in het team in de positie van de ontwerper plaatsen. Later krijgen we twee ontwerpopties om te zien welke het beste werkt.
We proberen altijd de hele ervaring door te nemen en bespreken de meeste randgevallen tijdens dit deel van het proces. Het is echt van cruciaal belang om ze nu aan te pakken, in tegenstelling tot tijdens de ontwerpfase, of erger nog, tijdens het ontwikkelingsgedeelte. Dat is wanneer je veel tijd en energie kunt verliezen.
6. Breng al uw schermen in kaart (welke gegevens een gebruiker moet invoeren)
Dit is het moment om verder te gaan dan het whiteboard en alle input en verhalen van de gebruiker te vermelden. Schrijf op wat een gebruiker precies moet invoegen in een bepaald scherm en hoe een gebruiker zijn gewenste doelen kan bereiken.
7. Noteer alle mogelijke toestanden
Omdat alle dashboards, apps of websitesformulieren verschillende toestanden hebben, is dit een andere belangrijke stap die u niet moet vergeten.
Bij het ontwerpen moeten we er zeker van zijn om ze allemaal aan te pakken. Het is fijn om glanzende grafieken en coole profielfoto's te hebben in onze Sketch-bestanden of PSD's. Waarschijnlijk zien gebruikers de andere kant van uw app. Vooral als ze bij je product komen. Het is noodzakelijk om voorbereid te zijn. Hieronder ziet u een voorbeeld van hoe wij omgaan met lege toestanden in een van onze gegevenscomponenten.
8. Bereid je eerste diagram voor
Dit alles leidt tot het laatste deel van low-fidelity. Dankzij de uitkomst van de whiteboardtaak kennen we nu alle mogelijke toestanden, gebruikersinputs en doelen. Om alle interacties samen te vatten, maak ik een diagram en om eerlijk te zijn heb ik de stijl van dit vele malen veranderen: van Sketch-bestanden met gerasterde lay-outs naar alleen rechthoeken die elke pagina symboliseren met hun namen hieronder. Dat gezegd hebbende, het proces was altijd pijnlijk, ik belandde meestal in een situatie waarin we iets later in het proces willen veranderen of toevoegen. Met deze oplossingen ben ik meestal gedwongen om veel meer stappen te doen; zoals het veranderen van de posities van lijnen, pijlen en afbeeldingen.
Onlangs heb ik gebruikt Camunda Modeler , wat niet bepaald een ontwerptool is; het is een eenvoudige app voor het maken van technische diagrammen. Dat klinkt vreemd, maar deze app is ontwikkeld om u te helpen bij het opstellen van basisdiagrammen. Het belangrijkste is dat alles wat gecreëerd is volledig schaalbaar is. U kunt eenvoudig elk punt slepen en neerzetten en het zal automatisch lijnen en pijlen voor u maken. U kunt ook kiezen uit verschillende soorten punten die kunnen helpen bij het markeren wanneer een gebruiker bijvoorbeeld een e-mail van Intercom ontvangt. Camunda exporteert naar SVG, waardoor het eenvoudig is om traceerbare punten in Sketch te kleuren.
Werk ontwerp
9. Moodboard
Ik kan beginnen met het maken van een moodboard, terwijl ik alle afbeeldingen verzamel naar mijn Inspiration-map. Ik gebruik moodboards voornamelijk om mijn gedachten met collega's te bespreken en enkele visuele ideeën te beschrijven, voordat ik begin met het pixelproces.
10. Eerste ontwerp
Ontwerpen is altijd een continu proces. Je gaat veel herhalen op weg naar een geweldig resultaat. Met de eerste versie is ook een manier om feedback te verzamelen. U hoeft niet naar pixel perfect ontwerp te komen om feedback te ontvangen van uw teamgenoten, klanten of potentiële gebruikers. Om hun eerste gedachten te krijgen en een discussie te beginnen, mix ik meestal schermen van onze huidige ontwerpen. Hierdoor kunnen we binnen een dag beginnen met spelen met echt ogende ontwerpen. Je kunt een eerste eenvoudig prototype maken om te testen of dingen goed op elkaar aansluiten.
11. Schrijf uw exemplaar
Kopiëren is een van de belangrijkste aspecten van beslissingen van gebruikers en ik beschouw het als een cruciaal onderdeel van het ontwerp. Er is niets erger dan een mooi ontwerp met verwarrende dialogen waarin gebruikers moeite hebben om de volgende stap te vinden.
12. Eerste internentest
Met je eerste versie kun je snel een prototype maken in Wonder of invision . Dit is iets dat ik onlangs begon te doen en het blijkt weer een geweldig goed validerend aspect. Met een prototype kun je nu gemakkelijk een gesprek opzetten met 3 of 4 personen van je team en de prototypekoppeling met hen delen en proberen een paar vragen te stellen terwijl je ze test op bepaalde stromen / scenario's.
Op deze manier kunt u eenvoudig uw vragenvaardigheden testen en uiteraard uw ontwerpbeslissingen testen op echte gebruikers zonder u zorgen te maken over verspilling van middelen en tijd. Ik kies de neiging om mensen te kiezen die niet zo heel erg betrokken zijn bij de ontwikkeling van het dashboard. Probeer ook iemand te vermijden die al eerder de kans heeft gehad om met het prototype te spelen.
13. Etiquette
We weten allemaal hoe moeilijk het is om netjes te blijven. Hoe nog een andere functie te leveren. Dit leidt meestal tot een rommelige Sketch- of PSD-bestanden. Ik heb veel geleerd over de verschillen tussen werken als een enkele ontwerper in een startup, werken in teams of werken aan mijn eigen digitale producten.
Wanneer je in een team werkt, denk dan aan je PSD's alsof je ze voor iemand anders maakt. Ik gebruik de regel dat als je meer dan 8 lagen in een map hebt, je een nieuwe moet maken.
Ik vond een geweldige plug-in voor Sketch, wat me uren redde terwijl ik aan mijn UI-kits werkte: Hernoem het .
Tip: leg alles op het canvas. Ik heb altijd moeite gehad met het ontwerpen van mooie koppen terwijl ik de rest van het canvas wit had. Tijdens het ontwerpen heb ik geleerd om alle inhoud op de eerste plaats te plaatsen - speel gewoon met de lay-out en typografie. Het is veel eenvoudiger om leuke details te ontwerpen en met het hele concept te spelen met de inhoud op zijn plaats.
14. Creëer UI-elementen en speel met Lego
Ik ben waarschijnlijk te laat op het feest en dit zal al verouderd klinken terwijl ik het aan het schrijven ben. De reden waarom we hier op de reis geen wireframing hebben gedaan, is simpel. Schets 39 wordt geleverd met iets dat ik ongelooflijk heb gevonden en dat is "vormen met eigenschappen voor het wijzigen van de grootte". Dit is iets dat ontwerpen voor iedereen in het team gemakkelijk maakt. Ons schetsbestand is nu puur drag-and-drop. Je kunt je teamgenoten gemakkelijk een leeg canvas geven en ze kunnen bijna hi-fidelity-concepten maken. Dankzij dit kunnen we alle wireframing-tools overslaan en beginnen met bijna echt ogende pixels.
Dit gaat ook hand in hand met het feit dat we wireframes daadwerkelijk kunnen converteren naar echte ontwerpen. Elke PM kan een draadframe maken en dan kan ik het gemakkelijk overnemen en transformeren in hi-fidelity.
Activa en bezorging
Als je klaar bent met ontwerpen en itereren op basis van de eerste feedback, ben je nog niet klaar. Nu komt de tijd om uw ontwerpen aan uw ingenieurs / ontwikkelaars over te dragen.
15. Specificaties
Een van mijn belangrijkste doelen is om altijd mijn beslissingen met het team te kunnen communiceren en de problemen voor onze ontwikkelaars zo veel als ik kan te verminderen om hen de best mogelijke middelen te bieden. Dat is voor mij zeker het belangrijkste onderdeel van mijn baan als ontwerper.
Omdat we alle interactie hebben gedocumenteerd en alles klaar hebben vanaf het begin van ons proces, is het maken van specificaties een fluitje van een cent. Ik schrijf meestal specificaties in Google Documenten of onder de schermen in Sketch-bestanden. Het is leuk om je ontwerpen te verwerken met uitleg over alle functies, zodat iedereen je bestand in de toekomst kan pakken.
16. Diagram
Deze techniek is leuk om ontwerpen uit te printen en met het team te bespreken. Maar tegenwoordig denk ik dat er betere opties zijn. Zoals het klaar hebben van het laatste prototype.
17. Laatste prototype
Een van de belangrijkste dingen voor mij is om altijd alle interactie klaar te hebben in een prototype. Ik eindig meestal met 3-5 prototypen op weg naar de laatste voor die kleine sessie met teamgenoten of om een aantal specifieke stromen te laten zien. Ik heb de neiging om alle staten in Sketch in één tekengebied voor te bereiden en vervolgens die tekengebieden te dupliceren om elke status gereed te hebben bij het exporteren.
Het is geweldig om opmerkingen toe te voegen aan delen van je ontwerpen om je specificatie nog verder uit te breiden, zodat zelfs een copywriter gemakkelijk naar echte pixels en flows kan gaan en controleren als elk exemplaar en dialoogvenster naar wens werkt.
18. Quicktime video> Notities
Wanneer ik geen dingen in Hangout aan het team of een klant presenteer, stuur ik een video over het scherm waarin ik het prototype doorneem en uitleg over alles wat ik heb ontworpen. Het is een mooie bevestiging voor mij vóór een presentatie dat ik het antwoord weet op elke vraag en mogelijke mooie interacties die ik heb besloten te ontwerpen. Kan ook goed worden gebruikt bij het werken in teams op afstand. Iedereen heeft toegang om de hele interactie denkwerk op elk moment opnieuw te spelen.
19. Animeren
Als een leuke laatste touch die je kunt gebruiken After Effects of Beginsel . Het is goed om uit te leggen hoe je dit of dat wilt laten bewegen.
20. Styleguide
Een ander cruciaal punt voor ingenieurs is om te weten hoe de dingen zullen reageren in verschillende scenario's. Denk aan foutstaten van invoer of waar foutmeldingen worden weergegeven. Op dezelfde manier hoe de uitgeschakelde status van een submit-knop eruit zal zien, waar een spinner geplaatst wordt enz.
Het is supereenvoudig voor ingenieurs om één voor één uw Symbols-tekengebied en stijlelementen één voor één te doorlopen voordat ze zelfs alle schermen coderen dankzij een Sketch-bestand als Lego-blokken.
Laatste testen
Omdat we klaar zijn met het overhandigen van onze ontwerpen aan ingenieurs, kunnen we ons concentreren op het laatste deel van het proces - onze beslissingen testen!
21. Inspectlet / HotJar
Nadat de ontwerpen zijn omgezet in werkende code, vergeet dan niet om uw Inspectlet of HotJar JS-fragmenten. Ik ben altijd opgewonden (of gefrustreerd) om te zien hoe gebruikers door ons dashboard navigeren of wat ze op mijn portfolio-pagina doen. Inspectlet is geweldig in het vastleggen van al uw gebruikerssessies. Werkt ook uitstekend voor grotere projecten.
Het wordt geleverd met eenvoudige "/ page" -filters waarmee u sessies van een bepaalde functie of stroom kunt bekijken.
22. Mixpanel
Mixpanel werkt prima voor het valideren van onze doelen (die we aan het begin van ons proces hebben ingesteld). Mixpanel helpt om te zien hoeveel gebruikers bepaalde stromen voltooien. Hoeveel gebruikers zijn weggevallen voordat het account is ingesteld. Hoeveel mensen zijn van de hoofdbestemmingspagina naar de winkel gegaan en naar ons meest waardevolle product.
23. Google Analytics
Ik ben niet in staat om grote dingen te coderen, maar ik kan tenminste werken met CSS-bestanden en met eenvoudige code. De laatste tijd was ik geïnteresseerd om te zien waar gebruikers klikken en terwijl ik naar Hotjar-heatmaps kijk, dus ik heb besloten om ook de basiskliktracker in te stellen in Google Analytics. U kunt ook eenvoudig alle klikken van gebruikers op uw website bijhouden.
Dit helpt me om het gedrag van gebruikers eenvoudig in kaart te brengen. Ik ontdekte bijvoorbeeld dat mensen de topnavigatie op mijn site 5x meer gebruiken boven de gemarkeerde link in introtekst. Helaas telt het geen klikken van gebruikers met AdBlock.
24. Intercom
Toen we onze eerste stappen overeenkwamen, hadden we het over een deel van de stromen waar de gebruiker een e-mail van ontvangt intercom . Onze verantwoordelijkheid hier is ervoor te zorgen dat alle kopieën en het bericht zelf logisch zijn en echt nuttig voor de bezoeker. Zorg ervoor dat uw e-mails uw gebruiker begeleiden naar uw scherpe resultaat en probeer altijd specifieke ondersteuningsartikelen en informatie te bieden over hoe u verder kunt gaan in de stroom.
De laatste paar woorden
25. Laat Dribbble achter
Van wat ik heb geleerd en hoe mijn ontwerp de afgelopen vier jaar is veranderd, ben ik zover gekomen dat Dribbble niet noodzakelijk de plaats is waar je je ontwerpen voor wilt maken. Ik heb altijd naar mooie pixels met sexy profielfoto's gestreefd, maar dat is niet wat echte gebruikers nodig hebben en zullen gebruiken.
Hier is een voorbeeld, aan de linkerkant zie je iets dat ik voor Dribbble heb ontworpen. Aan de rechterkant ziet u iets dat ik heb ontworpen toen ik enige tijd bezig was met het bekijken van mensen die hun profielen bewerken en zich realiseerde dat mijn visie niet opleverde wat ze nodig hadden.
Je kunt 500 likes ontvangen voor felle gekke animatie van een aardappel of een sliding pizza, maar wat echt belangrijk is, is dat je gebruikers zullen vinden hoe ze de frequentie van bedrijfsmails moeten beheren of hoe ze hun prestatieanalyses kunnen filteren.
[- Dit bericht is oorspronkelijk gepost op Medium , opnieuw gepubliceerd met toestemming van de auteur. -]