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 UI, Inspired UI, Pttrns, Lovely UI.

Collect 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

1. Facilita il brainstorming sia con i colleghi che con i clienti: essendo infatti un documento “non strutturato” facilita la discussione, l’empatia e i feedback
2. Permette 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 pagine
3. Lo si realizza in tempi rapidi e altrettanto rapidamente lo si può modificare
4. Team building: tutto il team partecipa alla ideazione del progetto contribuendo con idee e suggerimenti
5. Risparmio 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.
Infografica: disegnata da Krisztina Szerovay, illustra i benefici e gli step dello sketching. Sul sito trovate molte altre infografiche dedicate ai temi più importanti del UX Design Process.

Krisztina Szerovay

Corso on line su Udemy per imparare le basi dello sketching

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

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.

Vuoi realizzare sketch, prototipi, mockup e wireframe? UX Boutique può aiutarti!

Costanza Mosi
UX Designer
LinkedIn