Tutto ciò che devi sapere su UX Sketching

Se hai svolto qualsiasi tipo di lavoro creativo serio, conosci fin troppo bene il blocco creativo. Sembra di sbattere contro un muro di mattoni: nessuna delle idee che sei in grado di visualizzare è abbastanza buona o non può funzionare nella vita reale.

Per i designer, la sensazione è fin troppo familiare. Tuttavia, come qualsiasi problema complicato senza una soluzione chiara, un processo intelligente può fare tutte le differenze. È qui che entra in gioco lo sketch UX.

Lo sketch UX è un aspetto cruciale, ma spesso trascurato, della progettazione dell'esperienza utente. Lo schizzo è un modo molto efficiente per comunicare il design, consentendo ai designer di provare una moltitudine di idee e di ripeterle prima di stabilirne una.

In questo post, intendo coprire tutto ciò che devi sapere sullo sketch UX, inclusi i seguenti punti:

• Introduzione agli schizzi UX e ai wireframe
• Nozioni di base, strumenti e tecniche di sketch UX
• Schizzi chiarificatori con note, annotazioni, numeri
• Suggerimenti e trucchi per disegnare UX
• Mini-metodi progettati per aumentare la qualità e la produttività
• Tutto quello che devi sapere su Wireflows
• Una guida rapida allo sketch del flusso UX

UX Sketching è un processo in due fasi

Molte opzioni devono essere considerate nella progettazione, il che si traduce nella scelta e nell'esecuzione di quella migliore. I designer considerano le loro opzioni, quindi procedono all'elaborazione dei dettagli, rendendo così la progettazione dell'esperienza utente un processo in due fasi:

• Generazione di idee

Nella fase iniziale vengono generate più idee, ma poiché non possono essere completamente modellate, non è raro che alcuni elementi siano incompleti o mancanti. La cosa principale è considerare diversi approcci e decidere quale è il più efficiente nel contesto del tuo compito e dei vari vincoli del progetto.

• Aggiunta di dettagli e raffinamento

Passo dopo passo, stabilisci alcune varianti promettenti e procedi a elaborare i dettagli, rendendo così alcune idee inadatte.

Schizzi UX e Wireframe: Introduzione e Classificazione

I tuoi wireframe possono differire a seconda di fattori come il livello di dettaglio desiderato, i colori e lo stile, se li mostrerai a qualcuno e così via.

Ho individuato i seguenti tipi di schizzo:

• Schizzo: generazione di idee

Questi sono i primi schizzi. I dettagli di livello inferiore vengono semplicemente annotati. Viene impiegato un numero limitato di colori.

Disegno molti schizzi di base per considerare il problema da diverse angolazioni e per considerare diverse soluzioni. Mentre disegno tali schizzi, mi sto anche sforzando di generare quante più varianti di soluzione possibili.

In questo particolare passaggio, l'incompletezza libera la mia mente, motivo per cui è così importante evitare di impantanarsi nelle minuzie in questa fase. Il mio obiettivo è generare quante più idee possibili e scegliere quelle più promettenti.

• Wireframe: specifica, fase dettagliata

Di solito scelgo schizzi promettenti e vado oltre i dettagli, dopodiché scelgo la variante migliore e la elaboro in modo più dettagliato.

Tuttavia, questo non significa ogni singolo dettaglio . Si possono solo notare cose ovvie. Inoltre, alcuni aspetti saranno difficili da descrivere sulla carta.

A questo punto disegno tutti i dettagli importanti , ma non disegno ancora wireframe in Balsamiq. Dopo che tutto è stato fatto sulla carta, inizio a disegnare in Sketch.

Gli strumenti digitali offrono molta più libertà creativa rispetto alla carta e puoi facilmente spostare l'attenzione su cose minori. Ad esempio, puoi concentrarti sulla "lucidatura dei pixel" anziché sul design.

• Bozza di progettazione visiva

Questo è un approccio usato raramente, ma a volte può essere utile. Nella fase iniziale del progetto vengono prese in considerazione varie soluzioni visive, ma la creazione di schizzi digitali per tutte potrebbe richiedere molto tempo. Questo è il motivo per cui disegno prima gli schizzi di progettazione su carta, per considerare diverse opzioni e scegliere una direzione di progettazione visiva.

• Ripartizione di componenti/elementi

Trovo questa tecnica utile quando ho già un'idea generale e sto pensando ad una particolare funzionalità di pagina o alle parti integranti dei componenti dell'interfaccia. Disegno diversi elementi della pagina, entrando nel dettaglio, e quindi disegno diverse possibili posizioni degli elementi della pagina.

Gli elementi, anche i più semplici, devono avere uno stato; un pulsante può essere premuto e ha un blocco di testo al passaggio del mouse che può essere o meno vuoto. Più è complesso, più stati ha.

Iniziare con le basi

• Prepara i tuoi strumenti. Trova il posto più comodo possibile, un grande tavolo con molto spazio. Prendi molta carta e prepara delle penne e dei pennarelli.
• Riscaldamento. Per prepararmi, ti consiglio di disegnare alcune linee, cerchi, modelli di base e icone.
• Definisci i tuoi obiettivi. Decidi cosa vuoi disegnare. Stabilisci il tuo obiettivo e decidi quale storia hai da raccontare. Determina il livello di dettaglio desiderato. Decidi se sei pronto per disegnare molto.
• Definisci il tuo pubblico di destinazione. Se lo stai facendo per te stesso, non devi preoccuparti dell'aspetto del tuo schizzo. Tuttavia, se intendi mostrare i tuoi disegni a un cliente, assicurati di concedere un po' di tempo in più per aggiungere ulteriori dettagli al tuo schizzo.
• Stabilisci un lasso di tempo. Avendo deciso la quantità di tempo che sei pronto da dedicare allo schizzo, diciamo 30 minuti, ti aiuterà a concentrarti sul tuo lavoro.

Ora sei pronto e puoi iniziare:

• Disegna i bordi. Disegna le cornici, una finestra del browser o del telefono, una parte dell'interfaccia e così via.

• Aggiungi gli elementi più grandi o di base: menu, piè di pagina, contenuto principale.

• Aggiungi dettagli. Aggiungi dettagli rilevanti, ma mantienili semplici in questa fase.

• Aggiungi annotazioni e note. Questi sono richiesti solo se hai intenzione di condividere gli schizzi. Tuttavia, possono essere utili anche se li stai facendo solo per i tuoi occhi.

• Schizzo alternative. Disegna alcune rapide alternative alla tua soluzione.

• Scegli la soluzione migliore. Scegli le migliori opzioni.

• Aggiungi ombra e smusso. Ciò è particolarmente importante ai fini della condivisione. Aggiungi un'ombra per rendere il tuo schizzo visivamente accattivante, il che è importante se prevedi di condividerlo con i membri del team e/o i clienti.

• Salva lo schizzo. Scatta una foto o mettila in una cartella. Ho alcuni vassoi di carta sul mio tavolo per gli schizzi.

• Condividere. Di solito utilizzo uno dei seguenti metodi di condivisione:
  • Scansiona gli schizzi tramite Evernote e fornisci un collegamento permanente ad altri membri del team o parti interessate.
  • Scatta una foto e caricala su InVision.
  • Carica e mappa le immagini su Realtimeboard.
  • O semplicemente invia una foto via e-mail.
• Rivedi gli schizzi e aggiungi note. Fai una pausa e poi torna ai tuoi schizzi un po' più tardi. Dai un'occhiata di nuovo a loro. Lo schizzo ha ancora senso per te? Un buon schizzo deve essere facile da seguire.

Chiarire gli schizzi con elementi aggiuntivi

Trova o disegna uno schizzo corretto, quindi aggiungi i seguenti dettagli:

1. Titolo. A volte, l'aggiunta di un titolo è una buona opzione. Scrivi una descrizione e una data, se necessario, nella parte superiore dello schizzo. Il titolo ti aiuterà a capire cosa stai guardando e se lo schizzo è rilevante o meno. Questo è particolarmente utile se hai molti schizzi o vuoi mostrarli ad altri.

2. Annotazioni. Le annotazioni sono nomi e note posizionati vicino a un elemento, per spiegarne il contenuto o altri attributi. Aggiungono dettagli che chiariscono altri elementi e di solito sono difficili da disegnare. Ad esempio, potrebbe essere il nome del blocco, alcuni dettagli di interazione, la spiegazione di un'immagine, alcune idee per future variazioni di design e così via. Puoi dare un'occhiata a uno dei miei esempi per vedere come appare uno schizzo di annotazione.

3. Numeri. Numera gli elementi del tuo schizzo o gli schizzi stessi. Puoi decidere come ordinarli (ad es. per flusso di interazione, l'ordine in cui li hai creati, ecc.). Può anche essere utile durante le discussioni (soprattutto le discussioni a distanza), poiché i tuoi colleghi e clienti possono semplicemente indicare il numero dello schizzo nel loro feedback e capirai a quale si riferiscono i loro commenti.

4. Frecce. È possibile utilizzare le frecce per indicare le transizioni dello schermo. Possono anche essere usati per collegare diverse parti di schizzi, per indicare una sequenza di azioni e così via. Poiché il significato di una freccia può variare, appena sopra la freccia puoi aggiungere una descrizione o una spiegazione del significato della freccia. Ecco un esempio di uno schizzo di base che mostra una transizione e diversi stati diversi.

5. Appunti. Proprio come le annotazioni, le note vengono utilizzate per spiegare i concetti. Tuttavia, le note differiscono dalle annotazioni nella loro posizione. Non sono attaccati a un elemento o situati vicino all'elemento descritto, come in questo esempio. Le note possono essere posizionate nella parte superiore o inferiore della pagina. Possono anche descrivere elementi che non sono inclusi nel design, domande che potresti avere, spiegazioni generali, idee non abbozzate e così via.

6. Gesti. I gesti sono rilevanti nel caso del design del dispositivo touch. Disegnare un gesto della mano può richiedere pratica. Esistono diverse varianti di gesti utilizzati per indicare diversi tipi di azioni, quindi è meglio decidere in anticipo come designare una determinata azione (se non è ovvia, ovviamente) ed esercitarsi a disegnarla.

7. Risposta. Potresti ricevere suggerimenti per correggere o migliorare lo schizzo dopo averlo mostrato ad altri o dopo averlo esaminato di nuovo tu stesso. Spesso è utile contrassegnare tale feedback con un colore diverso in modo da differenziare il feedback dallo schizzo originale.

È possibile utilizzare colori diversi per diversi tipi di elementi. A volte, uso il nero per i disegni, il blu per i collegamenti, il verde scuro per le note, il rosso per i titoli e il feedback. Prova a usare colori diversi nei tuoi schizzi, ma assicurati che la tua scelta di colori sia coerente!

Suggerimenti e trucchi più specifici

1. Non preoccuparti della qualità. Non guardare gli schizzi su Dribbble; parlano di qualcosa di completamente diverso . Tieni presente che lo scopo principale degli schizzi è aiutarti a pensare in modo più chiaro, trovare soluzioni migliori e risparmiare tempo.

2. Pratica. Per cominciare, puoi provare a disegnare alcune app. Apri un'app web o mobile e prova a copiare lo schermo, descrivendo gli elementi nelle note. Ogni volta che hai del tempo libero, esercitati a disegnare gli elementi costitutivi di base dei tuoi progetti. In generale, la pratica rende perfetti. Tra un po', diventerà parte del tuo io designer.

3. Acquista una cartella. Spesso non lavoro dal mio ufficio, ma piuttosto da un bar o da casa mia. Gli schizzi di carta sono molto soggetti a danni, quindi acquista una semplice cartella per mantenerli sani e salvi.

4. Porta gli strumenti con te ovunque tu vada. Questo aiuta a garantire che tu possa catturare la tua idea su carta in qualsiasi momento, altrimenti potresti semplicemente perdere il pensiero o non essere in grado di ricordarla in modo sufficientemente dettagliato. Ho sempre un blocco note, alcuni fogli A4 e penne con me.

5. Condividi con gli altri. È molto importante coinvolgere altre persone e comunicare con il tuo team. Coinvolgere gli altri e ottenere il loro feedback, soprattutto all'inizio, aiuta a risparmiare tempo e risorse a lungo termine. Puoi anche incoraggiare gli altri a disegnare il modo in cui immaginano il design.

6. Vassoi di carta. Pensa di posizionare i vassoi della carta sul tuo tavolo di lavoro. Ad esempio, ne ho tre: per le attività in arrivo, per gli schizzi e i fogli di carta puliti.

7. Sperimenta e personalizza. I miei consigli sono basati sulla mia esperienza. Col tempo, scoprirai cosa ti si addice di più; quali metodi, quale sequenza di passaggi, cosa soddisfa esattamente il tuo potenziale creativo. Ci arriverai solo se provi costantemente qualcosa di nuovo, motivo per cui è importante sperimentare formati, stili diversi e provare nuovi modelli.

8. Usa i modelli. I modelli faranno risparmiare tempo e terranno implicitamente conto delle restrizioni di formato, liberando più tempo per concentrarsi su ciò che è importante.

Mini-metodi aggiuntivi per migliorare i tuoi schizzi

Questi non sono necessariamente suggerimenti e trucchi, ma sono una raccolta di metodi, strumenti e suggerimenti che dovrebbero aumentare la tua produttività o migliorare la qualità dei tuoi schizzi.

1. Crea una tavola da disegno. Uno dei maggiori vantaggi dell'utilizzo di carta e penna invece di uno strumento di disegno digitale è che puoi effettivamente attaccarlo a un muro. Tutti i membri del tuo team possono vederlo e partecipare (anche se consiglio di impostare sessioni di revisione).
   
   • Vedrai tu stesso i tuoi schizzi e questo stimolerà il tuo pensiero e ti permetterà di vedere il quadro generale, non pezzi isolati, ma l'intero sistema. Vedrai le interazioni tra le parti e il modo in cui si adattano l'una all'altra.
     
   • Crea la lavagna da disegno: allega i tuoi schizzi sulla lavagna. Se non c'è una lavagna nel tuo ufficio, puoi usare del nastro adesivo di dimensioni doppie o dei fogli di post-it per attaccare i tuoi schizzi al muro. Se non vuoi attaccarti al muro, puoi invece trovare un grosso pezzo di cartone. Consiglio vivamente di utilizzare le tavole da disegno, in quanto sono uno dei migliori strumenti di progettazione.
2. Usa una lavagna. Una lavagna è un ottimo strumento di disegno. Ha una serie di vantaggi:
   • È collaborativo ed è facile coinvolgere altri membri del team nella discussione e anche nel disegno. Anche se le loro idee non si adattano bene, capirai il loro modo di pensare e ti aiuterà a essere sulla stessa pagina.
     
   • I pennarelli non ti permettono di concentrarti sui dettagli, devi pensare alle cose generali. Gli schizzi sono aperti all'interpretazione.
     
   • Una lavagna è facile da pulire e apportare correzioni.
     
   • C'è molto spazio e puoi facilmente pensare all'intero flusso del sistema.
     
   • È possibile allegare schizzi, stampe e materiali di riferimento utilizzando i magneti.

3. Prototipi. Crea un prototipo cliccabile per valutare il tuo design. Prova a ottenere feedback su alcuni elementi. Funziona particolarmente bene quando utilizzi i modelli: i tuoi schizzi hanno le stesse dimensioni. Ovviamente, sarà molto più facile disegnare schizzi della stessa dimensione se stai usando un modello. Cercherò di renderlo ancora più semplice fornendoti alcuni modelli che puoi scaricare e utilizzare: Mobile, Browser multi-finestra, Browser scroll, Personas.

   

4. Usa la tua stampante e scanner. Disegna la struttura a mano (puoi usare il righello per disegnare in modo più accurato), quindi esegui la scansione utilizzando uno scanner o un'app mobile e stampala. È possibile modificare il modello nel redattore di immagini prima della stampa. Puoi rimuovere dettagli non necessari o duplicare alcuni elementi. Puoi anche stampare una pagina del sito già pronta, foto e altri elementi descrittivi. Puoi incollare i ritagli nel tuo schizzo.

5. Usa Evernote per la scansione. Evernote è un ottimo strumento di progettazione. Puoi conservare e condividere i tuoi schizzi al suo interno, puoi creare temi e utilizzare i tag per organizzare i tuoi schizzi. Le capacità della modalità "Scanner" sono particolarmente impressionanti. Metti il ​​​​tuo schizzo di fronte ad esso e lo "scansiona", quindi ottieni la copia dello schizzo. Quindi puoi invitare i tuoi colleghi su Evernote e fornire loro il link della tua nota. Poiché esiste un'app mobile per tablet e telefoni, puoi sempre avere i tuoi schizzi a portata di mano.

6. Schizzo ibrido. Per dare vita e realismo ai tuoi schizzi, puoi combinarli con le foto. Ciò significa che devi scattare una foto e poi disegnare una storia con elementi di interfaccia su di essa. Questo può anche aiutarti a notare alcuni problemi e dettagli di interazione.

7. Tracciare il mondo reale. Se devi creare uno storyboard, illustrare un'esperienza in un contesto specifico (ad esempio, una persona che utilizza uno smartphone alla stazione degli autobus), devi includere rappresentazioni di persone, luoghi e vari oggetti della vita reale. Questi possono essere difficili da disegnare, soprattutto se non hai padronanza delle abilità di disegno, ma ecco un semplice consiglio: scatta una foto dell'oggetto o della situazione, quindi ottieni il contorno degli oggetti chiave usando un editor di immagini. Puoi usare il contorno risultante nei tuoi schizzi in seguito. Ovviamente, se hai un tablet e uno stilo , sarà ancora più semplice.

Wireflow: delineare il flusso e la ramificazione del sistema

Il wireflow è essenzialmente una sequenza del flusso del sistema, schermo dopo schermo, con rami e punti di decisione. Dovremmo considerare come un utente affronta il proprio compito, il modo in cui si sposta da uno schermo all'altro e la sua esperienza complessiva del prodotto nel tempo.

Wireflow, o ciò che stai disegnando e il modo in cui è connesso, potrebbe essere organizzato secondo i seguenti approcci:

• Sequenza. Una sequenza è un viaggio diretto, schermo dopo schermo. Può anche essere una storia con punti di decisione; mostri non solo il percorso, ma anche i punti decisionali e i diversi percorsi che l'utente può scegliere. Puoi mostrare la struttura dell'interazione con lo schermo.
• Cambiamenti di stato. Raffigurano diversi stati dello schermo di alcuni elementi e le condizioni o le azioni che causano le transizioni tra questi stati.
• Schermo vs. elementi dello schermo. Puoi disegnare l'intero schermo o considerare micro-interazioni e interazioni.
• Piattaforme. Puoi considerare un'esperienza su una piattaforma o più piattaforme.
• Scopo. Rappresenterai una parte del percorso dell'utente o l'intero viaggio? Interazione di un utente con il sistema o interazioni di più utenti?

In genere cerco di definire i seguenti tipi di wireflow, a seconda dell'organizzazione e dell'uso pratico:

1. Mappatura del flusso complessivo e del flusso di alto livello. Disegna prontamente i cambiamenti dello schermo e disegna il percorso generale dell'utilizzo del tuo prodotto. Qui puoi includere del contesto e, facoltativamente, puoi mostrare alcune interazioni dell'utente. Ad esempio, un servizio di shopping eCommerce è un viaggio piuttosto lungo che può includere molti passaggi: come l'utente ha trovato il negozio, i passaggi che ha seguito per ordinare il prodotto, come ha pagato e così via.

2. Flusso dello schermo. Questo si concentra su un flusso funzionale specifico attraverso il sistema. Potrebbe essere una piccola sequenza rettilinea di schermate o un viaggio con ramificazioni. Ad esempio, un utente che carica alcune foto o un video.

3. Schema di navigazione. Disegna il tuo schermo e le opzioni che contiene. Questo non dovrebbe mappare il viaggio. Questo passaggio include informazioni che mostrano le opzioni che un utente può scegliere, le indicazioni stradali che gli utenti hanno e varie parti dell'app. Di solito creo uno schema di navigazione all'inizio di un progetto. Serve a capire come dovrebbe essere strutturata la navigazione (quali punti dovrebbero essere inseriti, quanti livelli sono necessari).

4. Stati dello schermo. Disegna lo schermo o gli stati degli elementi (un esempio potrebbe essere una finestra di dialogo per il caricamento di file). In questo caso, ad esempio, lo schermo avrà i seguenti stati:

   • Vuoto
   • Un utente estrae il file nell'area attiva
   • Il file è in caricamento
   • Il file viene caricato
   • C'è un errore

Sketching UX Flow: una guida rapida

Il processo di progettazione wireflow è simile a quello wireframe. Molti passaggi sono simili o identici, ma ci sono alcune differenze importanti:

Definisci cosa devi disegnare. Decidi esattamente cosa vuoi disegnare (ad esempio, la storia generale o un frammento del tuo disegno). Vuoi generare diverse opzioni o pensare ai dettagli di un viaggio? Decidi se mostrare i tuoi schizzi a qualcun altro o meno.

Definisci quali fotogrammi chiave e transizioni dovresti includere nel tuo disegno. Se aggiungi tutti gli schermi e i turni, il tuo wireflow sarà molto lungo e complesso. Considera quali schermate chiave dovresti mostrare per trasmettere l'essenza dell'interazione che aiuta a portare a termine il tuo compito. Lo stesso vale per i cambiamenti dello schermo. Devi scegliere quali turni saranno più utili per esprimere la tua idea. Dai un'occhiata a questo esempio come riferimento.

Definisci il punto di partenza. Quale sarà il punto di partenza del tuo viaggio? Puoi iniziare con il punto di ingresso, ovvero l'inizio del viaggio, ad esempio, ciò che un utente vede quando accede alla tua app. In alternativa, puoi iniziare dal punto medio o con le schermate o le fasi del processo più interessanti/difficili/importanti. Oppure puoi iniziare dalla fine, con il risultato finale ottenuto da un utente, e descrivere i passaggi che l'utente ha compiuto per arrivare a questo punto.

Decidi cosa verrà dopo. Dopo aver disegnato i passaggi iniziali, decidi cosa succede dopo rispondendo alle seguenti domande:

• In che modo questo passaggio conduce gli utenti?
• Da che parte vuoi che vadano?
• Cosa devono fare per arrivarci?

Disegna percorsi alternativi, voci. Pensa a modi alternativi in ​​cui l'utente può accedere a ogni passaggio:

• Cosa succede se la connessione Internet dell'utente si interrompe?
• Quali altre opzioni hanno?
• Cosa può andare storto in caso di errore dell'utente o dell'app, cosa accadrà?
• Cosa succede se l'utente chiude l'app in questo passaggio?
• Da dove inizierà l'utente la prossima volta che avvierà l'app?

Pensa ai flussi alternativi. Analizza la cronologia, progetta un flusso alternativo e disegnalo.

Aggiungi annotazioni, note, dettagli. Aggiungi gli elementi esplicativi che chiariranno dettagli non ovvi.

Salva. Fai una copia digitale dello schizzo.

Condividere. Condividi lo schizzo (ad esempio, tramite Evernote o InVision).

Suggerimenti e trucchi per lo schizzo del flusso UX essenziale

Disegna prima un wireflow. Se hai intenzione di pensare a un viaggio piuttosto lungo, faresti meglio a fare uno schizzo veloce per capire di quanto spazio hai bisogno e per non perdere alcuni passaggi o dettagli importanti. Sarebbe difficile aggiungerli allo schizzo su carta in seguito.

Non creare una mappa enorme con troppi dettagli. Gli schizzi di carta non hanno un pulsante Annulla , quindi sarà difficile apportare modifiche. Potresti disegnare i dettagli in modo troppo accurato e questo distrarrà la tua immaginazione dalla generazione di diverse varianti di alto livello. Invece di creare uno schema enorme che illustri l'intero sistema, prova a concentrarti sugli script chiave e prova a dedicare una pagina individuale a ogni script.

Taglia i dettagli non necessari e combina vari livelli di dettaglio. Non è necessario disegnare tutte le descrizioni delle interazioni, quindi cerca di utilizzare solo gli elementi chiave del tuo viaggio. Mentre si disegna un'enorme mappa delle interazioni, non è necessario elaborare in dettaglio ogni singola schermata. Alcuni schermi potrebbero essere rappresentati solo da più quadrati e altri schermi chiave potrebbero essere elaborati in dettaglio.

Prova diversi formati di carta. Prova diversi formati di carta, A3 o A5. Le dimensioni del foglio di carta ti limiteranno e influenzeranno il tuo processo in diversi modi. Un piccolo foglio di carta non ti permetterà di aggiungere molte schermate o dettagli, ma può aiutarti a concentrarti sulle idee principali. Usando un grande foglio di carta, puoi disegnare un viaggio enorme, molti dettagli e note aggiuntive. In alternativa, puoi posizionare un numero di piccoli viaggi su di esso.

Anche i post-it possono aiutare. Puoi anche provare a usare i post-it. Puoi disegnare schermate separate o alcune note a piè di pagina su di esse, oppure puoi disegnare stati aggiuntivi degli elementi del tuo schizzo. Il loro vantaggio è che possono essere facilmente sostituiti, puoi anche semplicemente spostare la nota da qualche altra parte. Ad esempio, nel caso in cui il flusso sia cambiato, puoi semplicemente modificare l'ordine dei tuoi post-it.

Usa i modelli. Prova a usare i modelli. Faranno risparmiare tempo e ti permetteranno di creare prototipi più cliccabili e di alta qualità.

Prova a usare una lavagna. Una lavagna presenta numerosi vantaggi. Sta diventando sempre più popolare perché ti permette di disegnare un viaggio enorme con molti rami. Puoi disegnare molti componenti dell'applicazione su carta e quindi attaccarli alla lavagna usando i magneti, aggiungendoli al viaggio.

Disegnare un'ombra. Le ombre possono aiutarti a contrassegnare elementi importanti e aggiungono attrattiva visiva al tuo schizzo. Uso tre diversi tipi di ombre:

• Linee che seguono la direzione della luce: questo non è sempre bello, ma puoi usare la graduazione e raccogliere gli oggetti a diverse "altezze".
• Delineare una parte con un colore più scuro (solo la parte inferiore o la parte inferiore e il lato destro)
• Usando il Pro-marker (o il suo equivalente nell'app che usi per disegnare)

Componenti del disegno. Un'obiezione come "Non so disegnare così bene" potrebbe soffocare la tua iniziativa. In realtà è più facile di quanto sembri. Anche gli schizzi più complessi sono generalmente composti da un certo numero di blocchi di base, come in questo esempio. Se riesci a disegnare un punto, una linea, un triangolo, un quadrato e un cerchio, allora hai gli elementi costitutivi essenziali di cui hai bisogno per disegnare qualsiasi cosa per il tuo schizzo.

Mettere tutto insieme. Gli elementi di base, i pulsanti, i pulsanti di opzione e i menu a discesa sono composti da elementi di base. Dopo aver imparato a disegnare questi elementi, puoi combinarli e disegnare blocchi e componenti complessi.

Incartare

L'obiettivo di questo post non era quello di creare la guida definitiva e valida per tutti gli schizzi UX o gli schizzi in generale, perché i designer hanno esigenze e preferenze personali diverse.

Come puoi vedere, questo è molto da coprire. I designer utilizzano una miriade di strumenti, tecniche e approcci per produrre schizzi UX, ed è piuttosto soggettivo. Alcune tecniche possono funzionare o meno per persone diverse che lavorano su progetti diversi. Se hai appena iniziato, dovresti assolutamente sperimentare. La pratica costante e la sperimentazione ti aiuteranno a trovare ciò che funziona per te.

Sta a te scegliere i suggerimenti e le tecniche che meglio si adattano al tuo progetto e al tuo approccio al design. Hai altri suggerimenti per gli schizzi per gli altri utenti? Sentiti libero di condividerli nella sezione commenti.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche