Sketching, disegnando nuove idee


Ogni volta che affronto la progettazione di un nuovo sito o applicazione dedico molto tempo e molta cura alla fase dello sketching, una tecnica a mio parere fondamentale dell’UX Design Process che comporta diversi benefici tra cui la possibilità di esplorare velocemente svariate soluzioni progettuali, di condividere in modo efficace le idee con il team e di ridurre i tempi e gli errori di progettazione.

In rete si possono trovare molte risorse a questo proposito, qui una sintesi di quelle che ho trovato più utili e alcuni spunti per chi volesse approfondire l’argomento.

Cosa è?

Sketching significa disegnare a mano le pagine del prodotto (sito o l’applicazione) per permetterci di avere un’idea, in uno stadio ancora embrionale, sia dell’intero impianto progettuale sia dell’aspetto delle singole interfacce. Questa tecnica è quindi un ottimo strumento per individuare quali saranno le funzionalità “cardine” del prodotto e quale sarà il “percorso dell’utente” (customer journey) attraverso le varie pagine.

Come si fa?

Gli strumenti necessari sono solo 2: carta e matita.

Di solito è sufficiente disegnare la struttura delle pagine principali ad esempio per un e-commerce la home page, la listing product page, la product page e il carrello con il check out; inizieremo inserendo gli elementi basilari di ogni interfaccia come la navbar, le immagini, i testi e le CTA per aggiungere via via maggiori dettagli come i titoli delle pagine, i testi, gli UI pattern (carousel, slide show..) e la tipologia di gesture (tap, swipe…).

Prima di iniziare a disegnare conviene farsi un’idea di come gli altri hanno disegnato soluzioni per prodotti simili al nostro, non necessariamente competitors; a questo proposito possono risultare molto utili i siti che raccolgono le tipologie di “patterns” come le login, il check out, le pagine lista ecc.: Collect UIInspired UIPttrnsLovely UI.

Poiché è difficile trovare fin da subito la giusta soluzione, è necessario, soprattutto per le pagine più importanti come la home page, realizzare più versioni (quello che viene definito sketching divergente) per poi arrivare a una soluzione ottimale che sia la sintesi delle varie versioni precedentemente realizzate (sketching convergente).

Una volta disegnate un numero tale di pagine sufficienti a simulare il flusso dell’utente (ad esempio dalla HP al check out) è il momento di condividere gli sketches con il team con lo scopo di illustrare le idee di base, discuterle insieme e raccogliere i feedback. Finita la fase di condivisione sarà necessario rimettere mano agli sketches per modificarli inserendo le correzioni emerse dal brainstorming: a questo punto può convenire disegnare digitalmente le interfacce usando strumenti come Freehand di Invision o creare i wireframe sempre su Invision (Studio) o Adobe XD .

Benefici

Facilita il brainstorming sia con i colleghi che con i clienti: essendo infatti un documento “non strutturato” facilita la discussione, l’empatia e i feedbackPermette di concentrarsi non sui dettagli (cosa che accade quando guardiamo i mockup grafici) ma sulle funzionalità principali e sul flusso dell’utente tra le varie pagineLo si realizza in tempi rapidi e altrettanto rapidamente lo si può modificareTeam building: tutto il team partecipa alla ideazione del progetto contribuendo con idee e suggerimentiRisparmio di tempo & costi: già in una fase iniziale del progetto permette di avere un’idea abbastanza realistica riguardo al numero delle pagine e alle funzionalità da implementare. Il team è quindi in grado di valutare la mole di lavoro, calcolando i tempi di consegna e i costi uomo.

Risorse utili

Articoli. Ci sono tanti articoli sull’argomento, i migliori a mio parere sono: UI/UX sketching techniques 101 su UXPlanet, 7 reasons for sketching in UX design sul blog di Invision e sul Blog di Adobe l’ottimo articolo di Nick Babich.

Corso on line su Udemy per imparare le basi dello sketching.

Vari strumenti su UI Stencil utili per lo sketching come i famosi “stampini” per disegnare elementi delle interfacce, matite, pennarelli insomma un vero marketplace per gli amanti degli UX tools.

Libri: “My mission is to help people draw their stories, conversations and ideas. To externalize the imagination and clarify the complex. To connect. Because when we connect amazing things become possible” è l’introduzione al libro Draw a Better Business di di Cara Holland . Un’altra lettura molto interessante, anche se di qualche anno fa, è Sketching User Experiences: The Workbook di Sheelagh Carpendale.

Fogli da stampare per disegnare sia per mobile che  desktop su templare monster

5 visualizzazioni