Un tutorial sul flusso di lavoro di progettazione per gli sviluppatori: offrire una migliore UI/UX in tempo

Nota del redattore: Lubos Volkov è un designer esperto che ha lavorato in remoto con numerosi sviluppatori nel corso della sua carriera. In qualità di product designer di Toptal, Lubos interagisce quotidianamente con i membri del team di diversi dipartimenti, tra cui ingegneria, community e contenuti. È un designer di talento le cui capacità comunicative contribuiscono al suo successo. In questo tutorial, Lubos condivide le sue esperienze e i modi per ottimizzare i flussi di lavoro dell'interfaccia utente e dell'esperienza utente di designer-sviluppatori che portano a prodotti di qualità consegnati entro o prima della scadenza.

Lavorare con un grande designer o team di progettazione può essere una risorsa inestimabile per qualsiasi team. Con canali di comunicazione chiari e una cooperazione fluida, il progettista dovrebbe darti tutto ciò di cui hai bisogno per accelerare il processo di costruzione e limitare il più possibile le domande e la confusione.

Cosa puoi fare tu, sviluppatore UX, per assicurarti che il prodotto che hai creato sia distribuito in modo tempestivo senza sacrificare la qualità dell'interfaccia utente e dell'esperienza utente?

La mia risposta: coinvolgi i tuoi designer sin dal primo giorno e tienili coinvolti durante l'intero processo di sviluppo dell'interfaccia utente/UX. Assicurati di stabilire linee di comunicazione chiare e messaggi coerenti tra sviluppatori e designer.

Hai tutto ciò di cui hai bisogno?

La cosa peggiore che può accadere durante l'implementazione di qualsiasi interfaccia utente è __mancanza di comunicazione tra il designer e lo sviluppatore __(a meno che non siano la stessa persona). Alcuni designer pensano che il loro lavoro sia terminato una volta inviato il PSD. Ma è semplicemente sbagliato! È necessario creare un flusso di lavoro di comunicazione sempre attivo che duri oltre la consegna dei PSD.

In molti casi, ci vorrà del tempo prima che i progettisti vedano l'effettiva implementazione della progettazione UI/UX. Con loro sorpresa, la build è spesso completamente diversa dalla presentazione iniziale. (Mi è successo più di una volta. Ho inviato file di origine con descrizioni complete e prototipi di interazione, ma quando finalmente ho visto il progetto, mesi dopo, aveva un layout diverso, colori diversi e nessuna interazione in atto.)

Alcuni designer potrebbero odiarmi per questo, poiché questo flusso di lavoro di progettazione richiede molto lavoro "extra" da parte loro. Tuttavia, creare e fornire risorse e informazioni complete, in modo organizzato, è meglio per il progetto e il team nel suo insieme.

Se uno sviluppatore ha tutto ciò di cui ha bisogno davanti a sé, accelererà il processo. Un PSD pulito non è sufficiente.

Di cosa hai bisogno per portare a termine il lavoro in modo efficace ed efficiente?

Queste sono le risorse che uno sviluppatore dovrebbe aspettarsi dal progettista per portare un design UI/UX all'implementazione:

• File di risorse : il progettista deve inserire ogni elemento dell'app in un file. Questo file dovrebbe contenere pulsanti, caselle di controllo, stili di intestazione, caratteri, colori, ecc. Fondamentalmente, in base alle informazioni in questo file, lo sviluppatore dovrebbe essere in grado di ricreare qualsiasi interfaccia da zero. È molto più facile per uno sviluppatore esportare qualsiasi elemento da un singolo PSD, piuttosto che cercarlo in più file.

• Risorse : assicurati che gli sviluppatori ottengano tutte le risorse richieste, poiché i file di origine non dovrebbero più essere toccati.

• Prototipi di interazione - I giorni degli "schermi statici" sono ormai lontani. L'utilizzo di interazioni e animazioni intelligenti per semplificare il flusso di lavoro e l'implementazione della progettazione dell'esperienza utente è ormai una pratica comune. Ma non puoi semplicemente dire "questo scorrerà da sinistra" a uno sviluppatore. Il progettista dovrebbe creare il prototipo reale di tale interazione. Il prototipo dovrebbe includere informazioni come velocità, velocità, ecc. e il progettista dovrebbe specificare ciascuno di questi valori.

• Convenzione di denominazione : richiede una struttura di denominazione dei file per mantenere le cose organizzate. Semplificherà la navigazione tra i file per entrambi. (A nessuno piace avere le cose nascoste in una cartella in background.)

• Risorse HDPI - Viviamo in "tempi difficili", con l'enorme densità degli schermi. Assicurati che il designer fornisca immagini con tutte le risoluzioni richieste, in modo che la tua applicazione appaia nitida ovunque. Nota: usa quanti più vettori possibile; ti aiuterà molto (svg).

Se trovi qualcos'altro mancante durante l'implementazione, non aver paura; eseguire il ping del designer e richiederlo. Non saltare mai e non lesinare mai! Siete membri della stessa squadra e il vostro compito è fornire il miglior prodotto possibile. Se un designer fallisce, fallisci anche tu.

Lavori in corso

Utilizza i tuoi designer durante il processo di sviluppo UI/UX. Non tenerli in disparte aspettandoti che si limitino a "spingere i pixel". Un designer vede possibili innovazioni anche prima dell'inizio dell'implementazione. Per trarne vantaggio, tienili aggiornati. Fornisci loro l'accesso per vedere e testare il lavoro in corso. So bene che a nessuno piace condividere progetti incompiuti. Ma è molto più facile apportare modifiche nel mezzo di una build che alla fine. Ciò potrebbe farti risparmiare tempo e prevenire lavori non necessari. Una volta che dai al progettista la possibilità di testare il progetto, chiedigli di compilare un elenco di problemi e soluzioni e di suggerire miglioramenti.

Cosa fare quando uno sviluppatore ha un'idea che cambierebbe l'aspetto di un'applicazione? Discutere con il progettista e non consentire mai a uno sviluppatore di modificare il progetto senza consultare il progettista. Questo flusso di lavoro di progettazione assicurerà che la build rimanga in linea. Un grande designer ha una ragione per ogni elemento sullo schermo. Togliere un solo pezzo, senza capire perché è lì, potrebbe rovinare l'esperienza dell'utente del prodotto.

Gestione del progetto di progettazione UI/UX

I designer pensano che gli sviluppatori possano dare vita a un progetto in un giorno o anche in un'ora. Ma, come un grande design, un grande sviluppo richiede tempo e fatica. Tieni a bada il tuo designer ansioso facendogli vedere i progressi della costruzione. L'utilizzo di un software di gestione dei progetti esterno, per assicurarsi che ogni revisione venga tenuta in considerazione, è un ottimo modo per assicurarsi di non perdere informazioni importanti discusse in una conversazione e-mail o in una sessione Skype. E siamo onesti: a volte i cambiamenti e le attività non vengono nemmeno comunicati finché non accadono.

Qualunque sia la soluzione che utilizzi, assicurati di scegliere un processo di flusso di lavoro che l'intero team adotterà e utilizzerà in modo coerente. Nel nostro team, ho provato a spingere Basecamp perché era quello che stavo usando, ma i nostri sviluppatori front-end pensavano che avesse funzionalità limitate. Stavano già utilizzando altri software di gestione dei progetti per tenere traccia di bug, progressi, ecc., come JIRA, GitHub e persino Evernote. Ho capito che il monitoraggio e la gestione del progetto dovrebbero essere mantenuti il ​​più semplici possibile, quindi ho migrato il mio flusso di lavoro di progettazione dell'interfaccia utente a JIRA. Volevo assicurarmi che capissero il mio flusso di lavoro e i miei progressi, ma non volevo che pensassero che il design fosse un'altra cosa da gestire.

Ecco alcuni suggerimenti per uno strumento di gestione dei progetti:

• Basecamp - Tiene traccia dello stato di avanzamento delle attività di progettazione e sviluppo correlate e consente di esportare facilmente le attività. Ha anche un semplice client mobile.
• JIRA - Una piattaforma completamente personalizzabile in cui puoi facilmente impostare schede personalizzate per diverse aree. Ad esempio, organizza le bacheche per tenere traccia di attività come back-end, front-end, design, ecc. Penso che il client mobile sia un po' debole, ma è un'ottima soluzione per i team più grandi e include una funzione di tracciamento dei bug.
• Email - Questo è ottimo per impostare una conversazione o inviare immagini. Ma fai attenzione se usi l'e-mail per il feedback. Le cose possono facilmente perdersi.

Puoi anche provare Trello e altri software di gestione dei progetti, ma i più utilizzati nel nostro settore sono Basecamp e JIRA. Ancora una volta, la cosa più importante è trovare un sistema di gestione dei progetti che tutti possano utilizzare in modo coerente, altrimenti è un punto controverso.

Progettazione e sviluppo UX si uniscono

Il designer e lo sviluppatore sono una potente combinazione. Assicurati di fare brainstorming su UI e UX insieme il più spesso possibile. Gli sviluppatori dovrebbero essere disposti ad aiutare un designer a concepire idee, mentre un designer dovrebbe avere almeno una conoscenza di base della tecnologia utilizzata.

Capire insieme il flusso di lavoro di progettazione. Non limitarti a implementare ciecamente ciò che i tuoi designer creano. Sii proattivo e crea qualcosa che abbia un bell'aspetto e un'esperienza utente eccezionale, sfruttando le tue due diverse prospettive. I designer pensano fuori dagli schemi e vedono animazioni, idee, pixel e pulsanti folli, mentre gli sviluppatori vedono la tecnologia, i dossi e i limiti.

Secondo la mia esperienza, ogni designer va matto per i pixel e i concetti interessanti. Ma a volte, un designer arriva a un punto in cui ha un'idea, ma lo sviluppatore respinge e dice: “Non funzionerà bene una volta implementata. Ci saranno problemi di consumo di prestazioni”. Di recente, stavo cercando di implementare una finestra modale con uno sfondo sfocato, ma questa sfocatura ha causato tempi di caricamento pesanti. Per risolvere questo problema, lo sviluppatore ha suggerito di utilizzare una normale sovrapposizione a colori, che si carica più velocemente e mantiene la qualità dell'immagine. Designer, prestare attenzione: non compromettere l'esperienza dell'utente per il design.

Ciclo di feedback

Il feedback del designer è fondamentale e deve avvenire il più spesso possibile. Probabilmente è la cosa che farai più dispendio di tempo (ed energia). Ma è necessario adottarlo per essere in grado di fornire risultati perfetti. Ecco un paio di suggerimenti per la progettazione di UX e UI su come rendere perfetto il tuo feedback.

• Sii visivo : il feedback deve essere il più specifico possibile. Il modo migliore per renderlo accurato è fare un semplice screenshot ed evidenziare un problema che vuoi risolvere. Sarebbe ancora meglio se avessi le immagini di un'implementazione attuale rispetto a come dovrebbe apparire . La comunicazione visiva eliminerà il 50% delle domande.

• Sii descrittivo : il feedback dovrebbe essere accurato. Non puoi semplicemente dire "sposta questo pulsante verso l'alto". Il progettista deve specificare quanti pixel deve spostare un pulsante, quale riempimento deve essere utilizzato, ecc. Includere sempre una spiegazione del problema e la soluzione appropriata per esso. Ci vorrà molto tempo, ma ne vale la pena.

• Sii paziente - Tieni presente che il designer e gli sviluppatori non condividono lo stesso obiettivo. Se gli sviluppatori non comprendono appieno l'idea di un designer, può portare a confusione e decisioni sbagliate. In ogni caso, entrambe le parti devono essere pazienti e disponibili ad aiutare gli altri membri del team. A volte è davvero difficile, ma è un'abilità soft che ogni designer e sviluppatore dovrebbe imparare.

È abbastanza ovvio che queste cose devono essere combinate insieme per trasformarle in un flusso di lavoro di progettazione adeguato. Ma quale strumento può effettivamente aiutarti a fornire il feedback?

• Email - Non ho paura di dire che questa è ancora la piattaforma più comune per fornire il feedback. Va benissimo usarlo, se segui un paio di semplici regole.
  • Per prima cosa, usa un singolo thread di posta elettronica per il tuo feedback. Non modificare ogni singola e-mail con un oggetto diverso.
  • In secondo luogo, crea l'elenco delle correzioni. Prova a sederti e pensare a ogni ritocco o correzione che hai notato.
  • E infine, non inviare un elenco enorme in una volta. Prova a scomporlo in elenchi individuali più piccoli e vai parte per parte.

• Skype (Hangouts) - La voce è uno strumento davvero potente per il feedback. Puoi porre e rispondere immediatamente alle domande. Ma assicurati di prendere appunti e di inviare il messaggio di follow-up (e-mail) dopo la chiamata.

• Strumenti di collaborazione - Ad essere onesti, non sono un grande fan degli strumenti di collaborazione. Ma hanno un grande vantaggio. Ti aiutano a mantenere il feedback sul posto. Fare e rispondere alle domande è veloce e rimane lì per sempre.

Ecco alcuni degli ottimi strumenti:

Annotazione di feedback:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Strumenti di collaborazione:

• http://www.invisionapp.com/
• https://basecamp.com/

Conclusione

Stabilire un flusso di lavoro di progettazione di sistema e UI/UX che mantenga aperte le linee di comunicazione durante tutto il processo di progettazione e sviluppo. Ciò ti consentirà di implementare grandi idee, prevedere potenziali problemi e dare priorità a questioni importanti.

Lo sviluppatore e il designer possono creare grandi cose insieme, purché siano disposti a lavorare come una squadra . Impara gli uni dagli altri e progetta tutorial come questo!