Sketching, tecnica di progettazione sito web

Sketching: disegnare a mano

Quando si progetta un nuovo sito web va fatta particolare attenzione alla fase dello sketing. Questa è una tecnica fondamentale dell’UX Design Process che apporta molti benefici tra i quali: esplorare soluzioni progettuali velocemente, condividere idee con il team efficacemente e abbattere gli errori e i tempi di progettazione. Vi consigliamo di approfondire l’argomento benefici leggendo anche come migliorare la UX.

Navigando in rete troverete molte risorse in merito a questo argomento, ora faremo un piccolo riepilogo di quelle più utili e di spunti per chi ha voglia di approfondire il tema.

Che cosa è sketching

La parola significa disegnare a mano le varie pagine del sito o dell’applicazione. Per capirci in uno stato ancora primitivo avere un’idea dell’impianto progettuale e delle singole interfacce. La tecnica di cui parliamo permette di capire quali saranno per il prodotto le funzionalità cardine e per l’utente il percorso o customer journey attraverso le pagine.

Prime fasi di partenza

Il web designer deve avere a disposizione due soli elementi e sono la carta e una matita. Basta di solito disegnare per le pagine principali la struttura. Se parliamo di un e-commerce lavoreremo sulla home page, listing product page, product page e infine il carrello e il check out. Il check out spesso non viene ben strutturato e questo comporta l’uscita del cliente senza aver effettuato l’acquisto. Per questo va data la giusta importanza come alla home page. Provate a consultare la psicologia del checkout per ottenere ulteriori informazioni.

All’inizio dobbiamo procedere all’inserimento per ogni interfaccia degli elementi basilari. Parliamo di navbar, immagini, testi e le CTA che poi in seguito saranno contornati da ulteriori dettagli come i titoli, testi, UI pattern e la tipologia di gesture.

Prima di mettersi a disegnare sarebbe opportuno dare uno sguardo ad altri per capire le soluzioni adottate per i prodotti simili al vostro e non devono essere obbligatoriamente competitors. Per questo potete utilizzare i siti che racchiudono le tipologie di patterns come le login, check out, ecc…

Disegnare e creare il sito

Non troverete la soluzione immediatamente e per questo dovrete realizzare, specialmente per le pagine fondamentali, più versioni fino a raggiungere alla soluzione ottimale che rappresenta una sintesi delle versioni precedenti. Stiamo parlando di sketching divergente e convergente.

Quando avete raggiunto un numero di pagine che possano simulare il flusso dell’utente cioè dall’HP al check out allora dovete condividere con il team gli sketches. In questo modo illustrerete le idee di base e discutendone insieme raccogliere i feedback.

Dopo aver condiviso e recepito le correzioni da fare sorte dal brainstorming dovete riprendere gli sketches e modificarli. Ora potete disegnare digitalmente le interfacce utilizzando Freehand di Invision o ideare su Invision o Adobe XD i wireframe.

Quali benefici ne otterrete

  1. Sia con i colleghi che con i clienti viene facilitato il brainstorming perché essendo il documento non strutturato agevola la discussione, l’empatia e i feedback.
  2. Vi farà concentrare sulle funzionalità principali e non su i dettagli.
  3. Velocità sia di realizzazione che di variazione.
  4. Il team partecipa alla struttura del progetto fornendo idee e suggerimenti.
  5. Otterrete un risparmio di costi e tempo perché da subito sarete in grado di capire il numero di pagine e le funzionalità che devono essere implementate. Capito questo saprete anche definire la mole di lavoro, i tempi di consegna e il costo degli operatori.

Alla luce di quanto descritto sopra ora dovete capire: cosa volete dal vostro sito web? Vuoi un servizio a prova di valutazione euristica, vuoi offrire ai tuoi utenti un’usabilità ottimale e user experience coinvolgente, efficace e soddisfacente? Se la risposta è si, ci sono io, come web designer, con i miei collaboratori di Bruce Design, con i nostri servizi ti aiuteremo a creare il tuo sito web.

Condividi questo articolo:

Share on facebook
Share on google
Share on twitter
Share on linkedin

Sketching, tecnica di progettazione sito web

Condividi questo articolo:

Share on facebook
Share on google
Share on twitter
Share on linkedin