Case-study: cosa si nasconde dietro un sito web?

Le vacanze estive sono finite e il rientro è uno scoglio da affrontare gradualmente. Una modalità che sto sperimentando è “riprendere il filo del discorso”, ovvero individuare un progetto su cui ho lavorato prima della pausa e analizzare il percorso che ha portato al punto attuale.

Questo articolo descrive le fasi che precedono lo sviluppo dell’e-commerce per TPOINT: dallo studio della struttura alla prototipizzazione. Il lavoro svolto è stato impegnativo e mi ha messo alla prova, ma sono riuscita a mettere in pratica nuovi strumenti e approcci studiati nel corso dei mesi. Questo metodo ha velocizzato i processi lavorativi e i risultati sono stati molto apprezzati dal cliente.

Ogni fase è stata sottoposta al cliente e solo dopo approfonditi confronti per esporre e valutare le scelte fatte e chiarire eventuali dubbi potevo passare alla fase successiva. Il confronto continuo con il cliente è fondamentale per lo sviluppo di un progetto, non solo per il cliente stesso che è al corrente di ogni decisione presa, ma anche per noi graphic e web designer. Il nostro infatti è un lavoro di empatia: studiamo i valori del cliente e i prodotti da pubblicizzare, ma soprattutto analizziamo le sue parole e le sue scelte, osserviamo il suo modo di esprimersi e, perché no, anche di vestire. Ogni incontro è un vaso di Pandora.

TPOINT è una denominazione che racchiude diverse attività svolte da un lungimirante cittadino ticinese nell’ambito della conciliazione in materia di locazione. Grazie alla sua esperienza lavorativa, egli ha pubblicato un libro sull’argomento e offre consulenze per chi vuole risolvere le proprie questioni locatarie.

A VM Group sagl è stato chiesto di sviluppare un portale web dove presentare TPOINT e le sue attività e acquistare il libro e le consulenze. Per noi la sfida non consisteva solo nel costruire un e-commerce, ma nel comunicare nel modo più semplice possibile concetti difficili che riguardano divergenze tra locatore e inquilino e la legge. Per questo abbiamo pensato fin da subito, in accordo con il cliente, di dare il massimo nel copywriting e di utilizzare tante illustrazioni esplicative.

La parte di brainstorming iniziale svolta in gruppo è stata molto utile per raccogliere le idee su contenuti e impostazione grafica. Per questa parte, carta e penna sono i miei migliori alleati!

Ogni sito web necessita di una buona struttura in cui i contenuti e gli elementi che lo andranno a comporre sono definiti e relazionati tra loro.
All’interno della fitta rete di informazioni e contenuti multimediali che caratterizza il sito, l’utente deve essere in grado di capire gli obiettivi e i valori del brand e del sito stesso seguendo un percorso lineare programmato a priori dal designer. Questo “viaggio” deve essere per l’utente privo di ostacoli, come se esistesse una guida che lo dirige passo dopo passo.

Con la definizione di una buona struttura del sito web ho reso meno complessa la fase successiva di realizzazione dell’interfaccia grafica e di conseguenza una User Experience adatta alla navigazione dei contenuti.

Nella struttura di un sito web è importante definire:

• l’albero dei contenuti, ovvero uno schema che definisce gli argomenti trattati nel sito. Spesso questi contenuti corrispondono alle pagine del sito, per cui lo schema è utile anche a dividere le stesse in primarie , secondarie, visibili e nascoste.

• lo user flow, ovvero il flusso che l’utente seguirà per completare determinati obiettivi del sito. Questi schemi servono principalmente per fare chiarezza nei punti critici in cui l’utente ha bisogno di essere guidato, e di conseguenza sentirsi a suo agio nell’affidarsi al sito.

Dopo aver definito i contenuti del sito e prima della progettazione grafica, c’è un passaggio molto importante chiamato in gergo tecnico wireframing. Il wireframing è comunemente utilizzato per definire spazialmente i contenuti e le funzionalità interne di ogni pagina. Si può dire che questa fase è lo scheletro del sito web.
I wireframes si compongono di blocchi senza colore (il grigio serve per differenziare, ad esempio, gli spazi pieni), a cui si accompagnano delle didascalie descrittive del contenuto.

All’interno del wireframe a ogni contenuto vengono affidati il proprio spazio e la propria posizione. Lo scopo è quello di iniziare a avere una idea visiva preliminare della struttura del sito e velocizzare la fase successiva di progettazione grafica vera e propria. Personalmente ho trovato questo passaggio molto utile anche per il confronto con il cliente, in quanto esso mostra una panoramica del sito su cui è possibile discutere.
Anche in questo caso, carta e penna sono il modo migliore per iniziare!

Se già nei wireframe ho avuto la necessità di inserire i titoli dei vari blocchi per poterli identificare (anche se generalmente non è necessario), nella progettazione grafica i testi sono davvero importanti. Abbiamo tutti sentito parlare di “Lorem ipsum” o “testo segnaposto”, e il pensiero immediato in fase progettuale è: utilizzo un testo generato automaticamente dal software e mi concentro sulla grafica. Questa idea non solo è sbagliata, ma anche controproducente.
All’interno di un sito web i testi hanno due funzioni fondamentali: esplicativa e direttiva (guidano l’utente nel percorso attraverso il sito). Inoltre ogni testo ha la propria lunghezza: come faccio a sapere a priori se uno spazio è sufficiente a contenere la descrizione di un servizio?

Per questo ho iniziato la scrittura preliminare dei testi. Io non sono una copywriter, ma per me era necessario avere qualcosa di concreto da inserire nel progetto grafico, sapendo che in una fase successiva i miei testi sarebbero stati sottoposti alla penna della copywriter professionista.

Con il lavoro di ricerca svolto fino a questo punto, la progettazione grafica e la realizzazione del prototipo sono state una boccata d’aria! Innanzitutto ho definito gli elementi grafici di base: colori, font, bottoni, ecc. Adobe XD permette di gestire tutti gli elementi in una palette.

Come in un puzzle, ho unito i pezzi e composto la grafica completa del sito web. Le illustrazioni che vedete nelle prossime immagini sono state realizzate dal mio collega Paolo e sono quelle definitive. Come griglia per la progettazione grafica ho utilizzato il sistema a 12 colonne.

Lo stile scelto è semplice, ma allo stesso tempo giocoso e colorato. I colori aiutano a differenziare gli argomenti e evidenziano i pulsanti che permettono all’utente di compiere una azione.

La mia parte preferita della prototipizzazione è lo studio delle microinterazioni! Con microinterazioni si intendono piccoli dettagli di movimento che aiutano l’utente a interagire con il sito web o l’app. L’esempio più comune è il pulsante che cambia colore al passaggio del mouse: esso mostra un cambiamento di status che attira l’attenzione e avverte l’utente che si tratta di un elemento cliccabile. Con Adobe XD è possibile definire alcune micro-interazioni e dare una idea quasi reale di come sarà il sito.

Quasi obbligatorio è pensare anche alla versione mobile. In questo caso specifico ho realizzato il prototipo mobile solo della Homepage, in quanto avevo la necessità di strutturare graficamente dei pulsanti scorrevoli in orizzontale che aiutassero l’utente a raggiungere gli argomenti di interesse con un solo click.

Per chi è arrivato a questo punto dell’articolo: ecco a voi il prototipo in azione! Adobe XD permette di registrare i movimenti dell’utente sul prototipo. Questa funzionalità è molto utile per effettuare dei test di User Experience.

I vantaggi di avere un prototipo ben fatto si vedono soprattutto nella fase finale: lo sviluppo del sito online. In questa ultima fase è possibile avere qualche ripensamento, ma si deve trattare di dettagli o elementi non fondamentali. Un cambio di direzione durante lo sviluppo potrebbe comportare confusione, disordine e soprattutto una grande perdita di tempo. Per questo l’ultima fase deve essere il punto di arrivo di scelte validate e provate in precedenza. Inoltre, come ho detto all’inizio dell’articolo, ogni avanzamento di progetto è stato precedentemente sottoposto al cliente, il quale ha dato chiarimenti e indicazioni su quale direzione seguire.
Il risultato finale, il sito web online, non sarà quindi una sorpresa per il cliente, ma il punto di arrivo di un lavoro collettivo.

Il design è un lavoro che richiede disciplina e un metodo di lavoro che predilige la ricerca piuttosto che il risultato finale. Ho voluto documentare tutte le fasi della creazione del sito di TPOINT innanzitutto per me, in quanto credo sia importante per ognuno lavorare con coscienza e metodo.
Solitamente si pensa al designer come un creativo che dal nulla disegna loghi o costruisce un sito web, ma non è così. Spero che la lettura di questo articolo possa far comprendere meglio il lavoro che noi designer svolgiamo ogni giorno.