Rapporti con i clienti e il web multi-device

La prospettiva è tutto#section1

Quando un cliente pensa per la prima volta a un sito web, l’immagine mentale che evoca è probabilmente quella di un browser web così come appare su un computer desktop. Tutto ciò è pienamente comprensibile: dopo tutto, la maggior parte della sua esperienza su siti web avviene mentre è seduto alla scrivania, armeggiando con le cose che si trovano sopra al tavolo.

Tuttavia, dal punto in cui siamo seduti noi, vediamo un web che comprende molti più device. Fino a poco tempo fa, era conveniente pensare a quei dispositivi come a qualcosa che apparteneva a contenitori come “smartphone”, “tablet”, e “laptop”. Ma, all’apparire di sempre più device differenti sul mercato, quei contenitori si sono moltiplicati e hanno cominciato a strabordare, dando il via a un continuo senza forma di dimensioni di schermo, risoluzioni, browser, sistemi operativi, convenzioni e possibilità di interfaccia.

Tutto ciò ha richiesto una ristrutturazione del nostro pensiero. Piuttosto che siti web costituiti da una serie di perfette costruzioni rese su ogni schermo con dettagli precisi, i web designer hanno cominciato a pensare in termini di sistemi. La flessibilità è diventata una moneta molto più preziosa della specificità.

Se i vostri clienti non hanno mai fatto parte di un progetto di design tradizionale prima d’ora, questo non è quello che si aspettano di incontrare nelle vostre riunioni. Quindi, come cominciamo a trovare un compromesso? Come possiamo aiutare i nostri clienti a cominciare a guardare a internet attraverso i nostri magici occhiali del design? Per l’amor del cielo, come possiamo parlare di queste cose?

Come spiego questo internet?#section2

Ci sono tre grandi componenti per far ambientare i non addetti, che io chiamo “le 3 S”: statistiche, storie e specifiche.

Le statistiche sono fenomenali perché riescono subito a far cogliere l’urgenza di un problema. Ad esempio, quando parlo con i clienti dell’importanza del mercato mobile, spesso faccio riferimento a questa statistica:

Il 42% di coloro i quali possiedono uno smartphone tra i 18 e i 29 anni considera il proprio telefono come il primo modo in cui accedere ad internet (da Pew Internet).

Cliente: “Cosa? Il 42%? È incredibile! Non avevamo idea che il mobile fosse così importante! Cosa facciamo adesso?”

Questo è il potere delle statistiche: non danno molto contesto né forniscono alcun tipo di olistica per comprendere un problema, ma fanno girare la testa e producono una necessità. Una statistica efficace è un modo incredibile per cominciare una conversazione come questa.

Ovviamente le statistiche possono dire cose importanti, ma gli esseri umani sono creature sociali ed emotive: per rendere memorabili le idee e per far sì che rimangano impresse, può essere d’aiuto cercare una storia personale che esemplifichi la questione, rendendola più tangibile. Comme ça:

Ho un figlio di tre anni e, come potrete immaginare, i bambini di tre anni lasciati da soli sono incredibilmente abili nel trovare sempre nuovi modi per farsi male. Questo significa che quando sono a casa e devo cercare qualcosa in internet, non posso semplicemente salire al piano di sopra per usare il mio computer desktop. Tuttavia ho un altro computer, il mio iPhone, a portata di mano nella mia tasca. Ora, sono sul divano a casa (non rientro esattamente nella tipica descrizione di “utente mobile”), ma sono sul device più mobile che ci sia e mi aspetto la stessa qualità nell’esperienza utente e nell’accesso all’informazione che mi aspetto sul mio desktop. Quando sono a casa, il mio telefono è il mio computer.

Visto che ha funzionato? Ora la mia statistica trova un supporto nella narrazione. La mia storia ha dei protagonisti, un’ambientazione e una trama (non si può negare che sia semplice). È più coinvolgente di una sola slide PowerPoint con delle statistiche e adesso è più probabile che i miei clienti incorporino questa idea nella loro visione di internet. Quando cominceranno a pensare a “utenti mobile”, spero che l’immagine di Matt Griffin sul divano assorto nel suo iPhone mentre è maniacalmente accerchiato da un bambino in pigiama entrerà nelle loro menti, insieme ai nostri vecchi amici “Guy in coda al negozio di alimentari” e “Donna che aspetta alla fermata del bus”. Paradigma: spostato!

Mostrate, non raccontate!#section3

Voi direte: “Aspetta, c’è una terza S!”

Eccellente, siete lettori molto scaltri e avete passato il primo test. Parliamo di specifiche. Nello specifico, quali specifiche? Mi fa piacere che me l’abbiate chiesto.

Se quello a cui siete abituati è un piccolo sito multi-colonna sull’iPhone e se il pinch-and-zoom è per voi una procedura standard, potreste guardare il vostro primo sito responsive e chiedervi dove sia finito tutto. Dov’è la navigazione? Dove la barra laterale? Dove sono tutte le cose?

Trovo che sia un utile esercizio semplicemente visualizzare un sito responsive sul mio telefono e farlo passare da una persona all’altra tra quelle presenti nella stanza, mentre ridimensiono quello stesso sito sul proiettore o sul monitor che sto usando per la presentazione. I clienti vedono che la navigazione collassa in un icona a forma di hamburger e che la barra laterale scende al di sotto del contenuto della pagina principale.

Guardare questa interazione su un grande schermo mentre la riproduco su un dispositivo portatile aiuta tutti a fare quel collegamento tra esperienze mobile e desktop. Possono vedere che il contenuto non è diverso, solo ricontestualizzato.

Mostrare alcuni siti come questo nel kick-off meeting (in particolar modo quelli di brand molto noti, come Starbucks e l’homepage di Microsoft di Paravel) aiuta a rinforzare l’idea che il responsive design sia uno standard in crescita e che gli utenti si aspettano molto probabilmente di vedere anche sul sito del vostro cliente. Dopo tutto, se alcuni dei brand più affermati tra i consumatori hanno già fatto il passo farà sentire molto più tranquilli i vostri clienti.

Delivering the deliverables#section4

Aiutare i propri clienti ad essere più consapevoli delle convenzioni del responsive design creerà il contesto necessario per potervi dare un miglior feedback sul vostro lavoro di design. Ma prima, dovete mostrargli i deliverable che dovranno rivedere e fargli sapere che tipo di feedback vi sarà utile per ciascuno di questi.

Per i design responsive, noi abbiamo scoperto che dei deliverable più piccoli e più concentrati insieme ad un feedback frequente da parte del cliente ci mettono sulla pista giusta in maniera più efficiente.

Scrivete queste cose#section5

Iniziamo ogni progetto con una breve specifica scritta che include gli obiettivi di progetto, le descrizioni delle feature, l’architettura dell’informazione del sito, una mappa del sito e un profilo di branding. Per un progetto recente su cui ha lavorato Bearded, l’Andy Warhol Museum di Pittsburgh, abbiamo tenuto tutto in un documento di testo su Basecamp, dove era editabile (e version-controlled) da tutte le persone che partecipavano al progetto. Questo ci ha aiutato ad aggiornarlo rapidamente, evitando versioni fuorvianti e non aggiornate. Il version control ci ha anche assicurato un record di tutti i cambiamenti fatti, in modo da averli a portata di mano nel caso queste decisioni di cambiamento fossero state questionate in un secondo tempo.

Il documento di specifiche esprime chiaramente gli obiettivi e le strategie per il progetto. È l’elenco delle vittorie e lo schema di gioco.¹

È essenziale che i vostri clienti abbiano una prima stesura di questo documento. Assicuratevi che tutti gli stakeholder sappiano quanto sia importante, lo leggano e diano le loro impressioni e dubbi prima di continuare. Suggerisco un messaggio come questo:

Partecipare alla stesura del documento di specifiche adesso significa che le vostre idee saranno integrate nel prodotto finale. Per favore, assicuratevi che chiunque sia interessato dal progetto intervenga nelle future revisioni di questo documento. Se il risultato di questo progetto è importante per voi, abbiamo bisogno del vostro feedback sul documento di specifiche per il prossimo venerdì!

Spesso queste modifiche danno il via a nuove conversazioni su quello che è importante ottenere con il progetto. Se l’idea di qualcuno per una feature o un approccio vi sembra in qualche modo sbagliato, chiedete perché secondo loro è così importante. In che relazione è con gli obiettivi di progetto? Se non lo è, dovete rivedere gli obiettivi oppure quello stakeholder ha solo bisogno che gli venga ricordato il quadro generale?

Una volta che questi piani sono stati messi in atto (e tutti i componenti del team hanno finito di fare le modifiche), abbiamo quello che serve per produrre qualcosa di tangibile.

Frame your wires#section6

[gioco di parole con “wireframe”, intraducibile – ndr]

Il browser è il posto giusto per definire accuratamente ed efficacemente il layout della pagina per il responsive design. Per il Warhol Museum, abbiamo creato questo wireframe responsive. L’abbiamo realizzato con il nostro starter kit per il front-end, Stubble, e per farlo ci abbiamo messo due ore e mezzo. Non è bello e questo è il punto: nessuno penserà che si tratta del design per un sito web, ma capiranno che questi sono i primi passi verso la definizione della gerarchia delle informazioni e del layout.

Quando mostriamo i wireframe ai nostri client, gli chiediamo un feedback “content-oriented”:

Mancano dei pezzi importanti? Cosa ne pensate dell’importanza relativa dei pezzi che ci sono? Vi sembra l’informazione essenziale di cui ha bisogno la pagina?

A questo stadio, cerchiamo di essere sicuri di avere tutte le cose di cui abbiamo bisogno sulla pagina prima di cominciare a realizzarla, ma solo perché stiamo ancora lavorando sul contenuto della pagina, non vuol dire che non possiamo anche cimentarci con l’estetica.

Quando il lo-fi è il miglior -fi#section7

I wireframe sono bravi a fare i wireframe, ma non si piegano al “look and feel”. A metà tra un prototipo di stile e un mockup di pagina tradizionale, un mockup lo-fi impersona il pragmatismo del web design, comunicando efficacemente il tono generale. Abbiamo rapidamente assemblato questo mockup lo-fi e statico, come compagno per il wireframe di Warhol.

Con questi mockup lo-fi dico ai clienti di ignorare i dettagli per il momento e di darci un feedback sui tratti generali:

Sappiamo tutti che questo non è ancora un sito web, ma stiamo andando nella direzione giusta? Se non siamo nemmeno vicini, potreste dirci perché? È troppo informale? Non rispetta il brand? Se vi sembra “approssimativo”, va bene, continuiamo a muoverci in questa direzione sapendo che anche voi siete d’accordo.

Il loop del feedback#section8

La granularità del feedback del vostro cliente dovrebbe accordarsi al livello di dettaglio del deliverable che state guardando. Pertanto, le immagini lo-fi avranno un feedback lo-fi e accettazioni lo-fi. Vediamo una reazione comune:

Cliente: Hmm. Il mockup sembra un po’ più banale di quello che mi aspettavo.

Io: Nel documento di specifiche abbiamo detto di volerlo sia sofisticato sia giocoso. Probabilmente, così non è sufficientemente giocoso. Dobbiamo cercare di eliminare un po’ di banalità e cercare di essere un po’ più strani?

Cliente: Mi sembra corretto. A cosa state pensando?

Io: Non sono proprio sicuro al momento, ma penso che le interazioni che creeremo in seguito saranno un’occasione per divertirsi di più. Perché non vediamo cosa possiamo fare adesso, magari rivedendo lo schema dei colori perché sia più energico e poi vediamo cosa possiamo fare per ravvivare un po’ le cose quando saremo nel browser? Vi va bene?

Cliente: Sì! Facciamolo.

Dovreste aggiustare le cose fino a che il gruppo non sarà d’accordo “sull’esserci sufficientemente vicini”, ma non state troppo tempo sui dettagli, non è il posto giusto. Quando sentite una vocina nella vostra testa che dice “stiamo diventando dei pignoletti-esigenti”, allora è il momento di dire:

Adesso abbiamo una base solida su cui lavorare. Possiamo andare avanti?

Andare avanti implica ovviamente maggiori dettagli: meno metafore, più realtà. Proprio così, avete indovinato: è l’ora dei mockup HTML/CSS!

Conversazioni, non rivelazioni#section9

I comp nel browser sono l’affare definitivo. Semplici mockup hi-fidelity e interattivi che utilizzano codice HTML e CSS semantico e riutilizzabile (come descritto nel mio precedente articolo, Responsive Comping). Dopo aver approvato i wireframe e i comp lo-fi, il nostro cliente ha visto questo mockup per il progetto Warhol.

Non solo è responsive, ma è anche una evoluzione significativa dell’estetica presentata nel mockup lo-fi precedente. Ha in sé lo spirito del mockup statico e l’organizzazione del wireframe su cui tutti erano d’accordo e vi ha aggiunto un nuovo livello di raffinatezza, di dettaglio e pulizia: tutto questo nel codice.

A questo punto, qualunque feedback darà il cliente, sarà piuttosto contenuto. Perché? Perché hanno partecipato a tutto il processo, conducendolo fino a questo punto. Sapevano cosa aspettarsi e non erano sorpresi da quello che avete presentato. È l’esatto opposto della “grande rivelazione”. Nessun dramma, solo un’evoluzione naturale verso una soluzione di design efficace.

Ricordatevi: ogni richiesta di revisione da parte del cliente è in realtà una richiesta di discussione. La mia risposta di default ad ogni cambiamento è “Perché?”: aiuta il cliente a concentrarsi sul “perché” e gli ricorda che trovare il “come” è vostra responsabilità. Concentrarsi sul “perché” vi aiuta a gestire la causa alla radice piuttosto che un sintomo magari casuale.

Adesso possiamo cominciare#section10

Prendersi del tempo per aiutare i nostri clienti a comprendere le sfide che affrontiamo e il ruolo che giocano nel nostro processo rende più semplice la nostra comunicazione e il nostro lavoro con loro.

È vero che i nostri nuovi clienti potrebbero non conoscere ed amare ancora questo internet come voi, ma l’entusiasmo è infettivo. Aiutate i vostri clienti a vedere internet per quello che è (occhiali magici per il design opzionali) e tutte le interazioni con i vostri clienti ne beneficieranno.

Note#section11

• 1. Per saperne di più sulla scrittura dei documenti di specifiche, leggete il mio articolo Don’t Go It Alone: Collaborative Web Design.

Illustrazioni: {carlok}