26 passaggi per perfezionare la progettazione del prodotto
Negli ultimi quattro anni ho progettato dashboard e applicazioni, e ho imparato come trattare con diversi reparti e utilizzare le loro conoscenze per rendere più efficiente la progettazione del prodotto.
Oggi condividerò tutti i passaggi che ho integrato nella mia routine quotidiana, che credo mi abbiano reso un designer migliore.
Pre-processo
1. Ottieni quante più informazioni possibili (chiedi tre esempi)
Per me, niente offre più chiarezza di un vero esempio di lavoro. Quando lavoro con un nuovo cliente o su una nuova pagina di destinazione per un prodotto, trovo che il punto di partenza più semplice è chiedere al cliente di fornire tre o quattro pagine di ispirazione, perché questo aiuta davvero entrambe le parti. Portare il tuo cliente a mettere le idee sul tavolo ti dà l'opportunità di capire prontamente cosa gli piace e cosa si aspettano dal design finito.
Se lavori con più team, dovresti mirare a trascorrere più tempo con gli sviluppatori su un prodotto che con i tuoi colleghi designer. Quello che ho imparato è che la chiave per prendere una decisione di progettazione efficace è assicurarsi di parlare con il team di sviluppo il più possibile. Nel mio caso, ci sono stati casi in cui è stata trovata una soluzione a un problema, che non ho potuto inventare da solo.
L'obiettivo è eliminare il maggior numero possibile di domande prima di passare allo sviluppo.
2. Scopri le persone
All'inizio, devo dire che ero scettico nei confronti delle persone, ma ora per me ha senso.
Quindi, in completo contrasto con il mio vecchio processo, posso vedere come le persone siano super importanti mentre si lavora sulle funzionalità del prodotto, specialmente quando la soluzione ha molti casi limite. Ti aiuta a capire per chi stai veramente progettando. Il mio obiettivo è di avere da quattro a cinque persone.
3. Stabilisci gli obiettivi esatti: cosa dovremmo tracciare esattamente?
Penso che molti designer / clienti ignorino questo passaggio, ma uno degli aspetti più importanti del design per entrambe le parti è capire gli obiettivi del prodotto che si sta progettando. Tendiamo a saltare direttamente in pixel e ad arricchire rapidamente l'interfaccia utente del progetto. Se si tratta di un sito web nuovo di zecca o di una nuova funzionalità, accertarsi di definire obiettivi chiari su ciò che si desidera ottenere per primi.
Dal momento che tutto è rintracciabile, parla dei punti esatti che stai per tracciare. Ad esempio, questi potrebbero variare da nuove iscrizioni, a un numero di clienti che utilizzano Paypal rispetto agli acquisti con carte di credito. Assicurati sempre di sapere quanto in alto miri all'inizio!
(Avrai comunque bisogno di questo per configurare le canalizzazioni su Mixpanel più avanti in questo processo.)
4. Configura una cartella del progetto e inizia a costruire un moodboard
Ci sono molti siti per l'ispirazione - Dribbble , Behance , Pttrns ecc. È davvero facile trovare progetti simili a quello su cui stai lavorando. Inoltre, potrebbe esserci già una soluzione a un problema che stai riscontrando e che stai cercando di risolvere.
Quando inizio a lavorare su un nuovo progetto, installo sempre una cartella con le cartelle denominate - File di origine , Schermate ed esportazione , Ispirazione e risorse . Salvare tutto ciò che trovo su Internet nella cartella Inspiration per poterlo usare in seguito per creare i moodboard di base. Questa cartella può essere riempita con qualsiasi cosa, da plugin, campioni o persino studi di casi completi da Behance.
Andando bassa fedeltà
5. Lavagna
Se vogliamo aggiungere una nuova funzionalità o riprogettare un processo, ci sediamo e tutti alla riunione iniziano a disegnare idee su una lavagna, su carta o persino su un iPad. Questa azione ci consente di mettere tutti nella squadra nella posizione del progettista. Più tardi ci ritroveremo con due opzioni di design per vedere quale funziona meglio.
Cerchiamo sempre di passare attraverso l'intera esperienza e discutere la maggior parte dei casi limite durante questa parte del processo. È davvero cruciale affrontarli ora piuttosto che durante la fase di progettazione, o anche peggio, durante la parte di sviluppo. Questo è quando puoi perdere molto tempo ed energia.
6. Mappare tutte le schermate (quali dati deve essere inserito dall'utente)
Questo è il momento di andare oltre la lavagna e elencare tutti gli input e le storie dell'utente. Annota cosa esattamente un utente dovrebbe inserire in una determinata schermata e in che modo un utente può raggiungere gli obiettivi desiderati.
7. Annota tutti gli stati possibili
Poiché tutte le forme di dashboard, app o siti Web hanno stati diversi, questo è un altro passaggio importante da non dimenticare.
Durante la progettazione dobbiamo essere sicuri di indirizzare tutti loro. È bello avere grafici brillanti e immagini di profilo fantastiche nei nostri file di schizzo o PSD. Tuttavia, molto probabilmente, gli utenti vedranno il lato opposto della tua app. Soprattutto quando arrivano al tuo prodotto. È necessario essere preparati. Di seguito è riportato un esempio di come trattiamo gli stati vuoti in uno dei nostri componenti di dati.
8. Prepara il tuo primo diagramma
Tutto ciò porta alla parte finale della bassa fedeltà. Grazie al risultato del compito della lavagna, ora conosciamo tutti gli stati possibili, gli input e gli obiettivi dell'utente. Per riassumere tutte le interazioni creo un diagramma e per essere sincero ho cambiato lo stile di fare questo molte volte: passando da file di Sketch con layout rasterizzati a rettangoli che simboleggiano ciascuna pagina con i loro nomi sotto. Detto questo, il processo è stato sempre doloroso, di solito finisco in una situazione in cui vogliamo cambiare o aggiungere qualcosa più avanti nel processo. Con queste soluzioni di solito sono costretto a fare molti più passi; come cambiare le posizioni di linee, frecce e immagini.
Recentemente ho usato Camunda Modeler , che non è esattamente uno strumento di progettazione; è una semplice app per creare diagrammi tecnici. Sembra strano, ma questa app è stata sviluppata per aiutarti a creare diagrammi di base. Soprattutto, tutto ciò che è stato creato è completamente scalabile. Puoi facilmente trascinare e rilasciare qualsiasi punto e automaticamente creerà linee e frecce per te. È inoltre possibile scegliere tra diversi tipi di punti che possono essere utili per l'evidenziazione quando, ad esempio, un utente riceve una e-mail da Intercom. Camunda esporta in SVG, il che semplifica la colorazione di punti tracciabili in Sketch.
Lavoro / Design
9. Moodboard
Sono in grado di iniziare con la creazione di mood board, mentre raccolgo tutte le immagini nella mia cartella Inspiration. Uso le mood board principalmente per discutere i miei pensieri con i colleghi e descrivere alcune delle idee visive, prima di iniziare con il processo dei pixel.
10. Prima bozza
La progettazione è sempre un processo continuo. Stai andando a scorrere molto lungo la tua strada verso un grande risultato. Con la prima bozza è anche un modo per raccogliere feedback. Non è necessario venire al design perfetto dei pixel per iniziare a ricevere feedback dai compagni di squadra, dai clienti o dai potenziali utenti. Per avere le prime idee e iniziare una discussione, di solito mescolo gli schermi dei nostri progetti attuali. Questo ci permette di iniziare a giocare con progetti dall'aspetto reale in meno di un giorno. Puoi fare un primo prototipo semplice per verificare se le cose si connettono bene.
11. Scrivi la tua copia
La copia è uno degli aspetti chiave delle decisioni degli utenti e la considero una parte cruciale del design. Non c'è niente di peggio di un bel design con finestre di dialogo confuse in cui gli utenti faticano a trovare il passo successivo.
12. Primo test interno
Con la tua prima bozza puoi creare rapidamente un prototipo in meraviglia o Invision . Questo è qualcosa che ho iniziato a fare di recente e si scopre che è un altro aspetto convincente. Con un prototipo è ora possibile impostare facilmente una chiamata con 3 o 4 persone dal proprio team e condividere il collegamento prototipo con loro e provare a porre alcune domande durante il test su particolari flussi / scenari.
In questo modo puoi testare facilmente le tue capacità di interrogatorio e ovviamente testare le tue decisioni di progettazione su utenti reali senza preoccuparti di sprecare tempo e risorse. Tendo a scegliere persone che non sono così tanto coinvolte nello sviluppo del dashboard. Cerca anche di evitare di guardare qualcuno che ha già avuto la possibilità di giocare con il prototipo prima.
13. Etichetta
Sappiamo tutti quanto sia difficile rimanere in ordine. Come consegnare ancora un'altra funzionalità. Questo di solito porta a un disordinato file Sketch o PSD. Ho imparato molto sulle differenze tra lavorare come singolo designer in una startup, lavorare in team o lavorare sui miei prodotti digitali.
Quando lavori in una squadra, pensa ai tuoi PSD come se li stessi creando per qualcun altro. Io uso la regola che se hai più di 8 strati in una cartella, dovresti crearne uno nuovo.
Ho trovato un ottimo plugin per Sketch, che mi ha consentito di risparmiare ore mentre lavoravo ai miei kit di interfaccia utente: Rinominalo .
Suggerimento: metti tutto sulla tela. Ho sempre faticato a progettare delle belle intestazioni mentre il resto della tela era bianca. Durante la progettazione ho imparato a mettere tutti i contenuti al loro posto - basta giocare con il layout e la tipografia. È molto più facile progettare dettagli piacevoli e giocare con l'intero concetto con il contenuto in atto.
14. Crea elementi dell'interfaccia utente e inizia a giocare con Lego
Probabilmente sono in ritardo per la festa e questo suonerà già obsoleto mentre lo sto scrivendo. Il motivo per cui non abbiamo fatto nessun wireframe sul viaggio qui è semplice. Lo schizzo 39 viene fornito con qualcosa che ho trovato incredibile e cioè "forme con proprietà di ridimensionamento". Questo è qualcosa che rende facile la progettazione per tutti i membri del team. Il nostro file di Sketch è puro drag-and-drop ora. Puoi dare facilmente a qualsiasi compagno di squadra una tela bianca e possono creare bozze quasi hi-fidelity. Grazie a questo siamo in grado di saltare tutti gli strumenti di wireframing e iniziare con pixel dall'aspetto quasi reale.
Ciò va anche di pari passo con la possibilità di convertire in realtà i wireframe in progetti reali. Qualsiasi PM può creare un wireframe e quindi posso facilmente prenderlo e trasformarlo in hi-fidelity.
Attività e consegna
Quando hai finito di progettare e iterare basandoti sul primo feedback, non hai ancora finito. Ora arriva il momento di consegnare i tuoi progetti ai tuoi ingegneri / sviluppatori.
15. Specifiche tecniche
Uno dei miei principali obiettivi è quello di essere sempre in grado di comunicare le mie decisioni con il team ed essere in grado di ridurre le difficoltà per i nostri sviluppatori il più possibile per fornire loro le migliori risorse possibili. Quella per me è sicuramente la parte più importante del mio lavoro di designer.
Dal momento che abbiamo documentato tutte le interazioni e abbiamo tutto pronto dall'inizio del nostro processo, la creazione di specifiche è un gioco da ragazzi. Tendo a scrivere specifiche in Google Documenti o sotto le schermate nei file di Sketch. È bello gestire i tuoi progetti con spiegazioni di tutte le funzionalità in modo che chiunque possa prendere il tuo file in futuro.
16. Schema
Questa tecnica è utile per stampare disegni e discuterne con il team. Ma al giorno d'oggi penso ci siano opzioni migliori. Come aver preparato il prototipo finale.
17. Prototipo finale
Una delle cose fondamentali per me è avere sempre tutte le interazioni pronte in prototipo. Di solito finisco per avere 3-5 prototipi sulla strada per quella finale per quelle piccole sessioni con i compagni di squadra o per mostrare alcuni particolari flussi. Io tendo a preparare tutti gli stati in Sketch in una tavola da disegno e quindi duplicare quelle tavole da disegno per rendere pronto ogni stato durante l'esportazione.
È fantastico aggiungere commenti a parti dei tuoi progetti per espandere le tue specifiche molto di più in modo che anche un copywriter possa facilmente andare a controllare i pixel reali e i flussi se ogni copia e finestra di dialogo funziona come richiesto.
18. Video Quicktime> Note
Quando non sto presentando roba in Hangout al team o a un cliente, sto inviando un video di condivisione di schermo di me che passa attraverso il prototipo e spiega tutto ciò che ho progettato. È una bella conferma per me prima di ogni presentazione che conosco la risposta su qualsiasi domanda e possibili interazioni di fantasia che ho deciso di progettare. Potrebbe anche essere ben utilizzato quando si lavora in team remoti. Ognuno ha accesso a ripetere l'intera interazione pensando in qualsiasi momento.
19. Animare
Come tocco finale puoi usare Effetti postumi o Principio . È bello spiegare come vuoi che questo o quello si spostino.
20. Styleguide
Un altro punto cruciale per gli ingegneri è sapere come reagiranno le cose in diversi scenari. Pensa agli stati di errore degli input o dove mostrare i messaggi di errore. Allo stesso modo come apparirà lo stato disabilitato di un pulsante di invio, dove mettere uno spinner, ecc.
È semplicissimo per gli ingegneri passare attraverso la tavola da disegno e gli elementi di stile dei simboli uno per uno, prima ancora che inizino a codificare tutti gli schermi grazie all'utilizzo di un file di Sketch come blocchi di Lego.
Test finali
Dal momento che abbiamo finito con la consegna dei nostri progetti agli ingegneri, siamo in grado di concentrarci sull'ultima parte del processo, testando le nostre decisioni!
21. Inspectlet / HotJar
Dopo che i disegni sono stati trasformati in codice funzionante, non dimenticare di includere il tuo Inspectlet o HotJar Frammenti JS. Sono sempre entusiasta (o frustrato) di vedere come gli utenti navigano attraverso la nostra dashboard o cosa stanno facendo nella mia pagina portfolio. Inspectlet è incredibile nel catturare tutta la tua sessione utente. Funziona alla grande anche per progetti più grandi.
Viene fornito con un semplice filtro "/ pagina" che ti aiuta a guardare le sessioni di una particolare caratteristica o flusso.
22. Mixpanel
Mixpanel funziona alla grande per la validazione dei nostri obiettivi (quelli che abbiamo impostato all'inizio del nostro processo). Mixpanel aiuta a vedere quanti utenti completano determinati flussi. Quanti utenti hanno perso prima di configurare l'account. Quante persone sono passate dalla pagina di destinazione principale per archiviare e al nostro prodotto più prezioso.
23. Google Analytics
Non sono in grado di codificare grandi cose, ma almeno sono in grado di lavorare con file CSS e con codice semplice. Ultimamente ero interessato a vedere dove gli utenti fanno clic e mentre osservano le heatmap di Hotjar, quindi ho deciso di impostare anche il click tracker di base in Google Analytics. Puoi facilmente tenere traccia di tutti i clic dell'utente sul tuo sito web.
Questo mi aiuta a tracciare facilmente il comportamento dell'utente. Ad esempio, ho scoperto che le persone hanno utilizzato la navigazione superiore sul mio sito 5 volte più sul link evidenziato nel testo introduttivo. Purtroppo non conta i clic degli utenti con AdBlock.
24. Citofono
Quando abbiamo concordato i nostri flussi iniziali, stavamo parlando di una parte dei flussi da cui l'utente riceve un'email Citofono . La nostra responsabilità qui è quella di garantire che tutte le copie e il messaggio stesso abbiano senso ed effettivamente siano utili per il visitatore. Assicurati che le tue e-mail stiano guidando il tuo utente verso il tuo acuto risultato e cerca sempre di fornire specifici articoli di supporto e informazioni su come continuare nel flusso.
Le ultime parole
25. Lascia indietro Dribbble
Da quanto ho appreso e da come è cambiato il mio design negli ultimi 4 anni, sono arrivato al punto in cui Dribbble non è necessariamente il luogo per cui vuoi creare i tuoi progetti. Ho sempre mirato ad avere dei bei pixel con le immagini sexy del profilo, ma non è quello che gli utenti reali hanno bisogno e useranno.
Ecco un esempio, a sinistra vedrai qualcosa che ho progettato per Dribbble. A destra, vedrai qualcosa che ho progettato quando ho passato un po 'di tempo a guardare le persone che modificano i loro profili e ho capito che la mia visione non stava fornendo ciò di cui avevano bisogno.
Potresti ricevere 500 mi piace per l'animazione pazzesca di una patata o di una pizza scorrevole, ma ciò che è veramente importante è che i tuoi utenti scopriranno come gestire la frequenza delle e-mail aziendali o come filtrare le loro analisi del rendimento.
[- Questo post è stato originariamente pubblicato su Medium , ripubblicato con il permesso dell'autore. -]