{"id":397,"date":"2013-08-20T11:57:53","date_gmt":"2013-08-20T09:57:53","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/rapporti-con-i-clienti-e-il-web-multi-device\/"},"modified":"2013-08-20T11:57:53","modified_gmt":"2013-08-20T09:57:53","slug":"rapporti-con-i-clienti-e-il-web-multi-device","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/rapporti-con-i-clienti-e-il-web-multi-device\/","title":{"rendered":"Rapporti con i clienti e il web multi-device"},"content":{"rendered":"


Quando entrate in una stanza con un cliente, voi siete un visitatore dal futuro. Voi, i professionisti del web, passate i vostri giorni immersi nei nuovi paradigmi del web multi-device e tutto sommato, anche per voi, il cambiamento continuo e gli aggiustamenti che derivano dal vivere su internet possono apparire travolgenti. Quindi, come pensate che possano sentirsi i vostri clienti?<\/p>\n

Il web \u00e8 fluido e mutevole. I nostri processi di lavoro con il web e i nostri clienti devono riflettere questa sua natura. \u00c8 giunta l’ora per noi di levarci di dosso i vecchi modi di pensare provenienti dal mondo della pubblicit\u00e0: le comunicazioni chiuse e il dramma della “grande rivelazione”, per costruire dei sistemi nuovi basati sull’onest\u00e0, l’inclusione e su una comunicazione autentica. Possiamo portare i nostri clienti in questo processo fin da subito, permettendogli di vedere tutti i difetti e i problemi che si incontrano durante il percorso. Attraverso questa relazione diventeranno dei veri e propri partner, piuttosto che dei confusi e ansiosi astanti, man mano che impariamo a navigare meglio insieme in questo strano universo digitale in continua evoluzione.<\/p>\n

\n

La prospettiva \u00e8 tutto<\/h2>\n

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

Tuttavia, dal punto in cui siamo seduti noi, vediamo un web che comprende molti pi\u00f9 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\u00f9 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\u00e0 di interfaccia.<\/p>\n

Tutto ci\u00f2 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\u00e0 \u00e8 diventata una moneta molto pi\u00f9 preziosa della specificit\u00e0.<\/p>\n

Se i vostri clienti non hanno mai fatto parte di un progetto di design tradizionale prima d’ora, questo non \u00e8 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?<\/p>\n

Come spiego questo internet?<\/h3>\n

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

Le statistiche sono fenomenali perch\u00e9 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:<\/p>\n

\n

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<\/a>).<\/p>\n

Cliente: “Cosa? Il 42%? \u00c8 incredibile! Non avevamo idea che il mobile fosse cos\u00ec importante! Cosa facciamo adesso?”<\/p>\n<\/blockquote>\n

Questo \u00e8 il potere delle statistiche: non danno molto contesto n\u00e9 forniscono alcun tipo di olistica per comprendere un problema, ma fanno girare la testa e producono una necessit\u00e0. Una statistica efficace \u00e8 un modo incredibile per cominciare una conversazione come questa.<\/p>\n

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\u00ec che rimangano impresse, pu\u00f2 essere d’aiuto cercare una storia personale che esemplifichi la questione, rendendola pi\u00f9 tangibile. Comme \u00e7a<\/em>:<\/p>\n

\n

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\u00f9 mobile che ci sia e mi aspetto la stessa qualit\u00e0 nell’esperienza utente e nell’accesso all’informazione che mi aspetto sul mio desktop. Quando sono a casa, il mio telefono \u00e8 il mio computer.<\/p>\n<\/blockquote>\n

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\u00f2 negare che sia semplice). \u00c8 pi\u00f9 coinvolgente di una sola slide PowerPoint con delle statistiche e adesso \u00e8 pi\u00f9 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 \u00e8 maniacalmente accerchiato da un bambino in pigiama entrer\u00e0 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!<\/p>\n

Mostrate, non raccontate!<\/h3>\n

Voi direte: “Aspetta, c’\u00e8 una terza S!”<\/p>\n

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.<\/p>\n

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

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.<\/p>\n

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 \u00e8 diverso, solo ricontestualizzato.<\/p>\n

Mostrare alcuni siti come questo nel kick-off meeting (in particolar modo quelli di brand molto noti, come Starbucks<\/a> e l’homepage di Microsoft<\/a> di Paravel<\/a>) 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\u00f9 affermati tra i consumatori hanno gi\u00e0 fatto il passo far\u00e0 sentire molto pi\u00f9 tranquilli i vostri clienti.<\/p>\n<\/div>\n

\n

Delivering the deliverables<\/h2>\n

Aiutare i propri clienti ad essere pi\u00f9 consapevoli delle convenzioni del responsive design creer\u00e0 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\u00e0 utile per ciascuno di questi.<\/p>\n

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

Scrivete queste cose<\/h3>\n

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<\/a> 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.<\/p>\n

Il documento di specifiche esprime chiaramente gli obiettivi e le strategie per il progetto. \u00c8 l’elenco delle vittorie e lo schema di gioco.1<\/sup><\/p>\n

\u00c8 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:<\/p>\n

\n

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 \u00e8 importante per voi, abbiamo bisogno del vostro feedback sul documento di specifiche per il prossimo venerd\u00ec!<\/p>\n<\/blockquote>\n

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

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.<\/p>\n

Frame your wires<\/h3>\n

[gioco di parole con “wireframe”, intraducibile – ndr]<\/p>\n

Il browser \u00e8 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<\/a>. L’abbiamo realizzato con il nostro starter kit per il front-end, Stubble<\/a>, e per farlo ci abbiamo messo due ore e mezzo. Non \u00e8 bello e questo \u00e8 il punto: nessuno penser\u00e0 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.<\/p>\n

Quando mostriamo i wireframe ai nostri client, gli chiediamo un feedback “content-oriented”:<\/p>\n

\n

Mancano dei pezzi<\/a> importanti? Cosa ne pensate dell’importanza relativa dei pezzi che ci sono? Vi sembra l’informazione essenziale di cui ha bisogno la pagina?<\/p>\n<\/blockquote>\n

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

Quando il lo-fi \u00e8 il miglior -fi<\/h3>\n

I wireframe sono bravi a fare i wireframe, ma non si piegano al “look and feel”. A met\u00e0 tra un prototipo di stile<\/a> 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<\/a>, come compagno per il wireframe di Warhol.<\/p>\n

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

\n

Sappiamo tutti che questo non \u00e8 ancora un sito web, ma stiamo andando nella direzione giusta? Se non siamo nemmeno vicini, potreste dirci perch\u00e9? \u00c8 troppo informale? Non rispetta il brand? Se vi sembra \u201capprossimativo\u201d, va bene, continuiamo a muoverci in questa direzione sapendo che anche voi siete d’accordo.<\/p>\n<\/blockquote>\n

Il loop del feedback<\/h3>\n

La granularit\u00e0 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:<\/p>\n

\n

Cliente: Hmm. Il mockup sembra un po’ pi\u00f9 banale di quello che mi aspettavo.<\/p>\n

Io: Nel documento di specifiche abbiamo detto di volerlo sia sofisticato sia<\/em> giocoso. Probabilmente, cos\u00ec non \u00e8 sufficientemente giocoso. Dobbiamo cercare di eliminare un po’ di banalit\u00e0 e cercare di essere un po’ pi\u00f9 strani?<\/p>\n

Cliente: Mi sembra corretto. A cosa state pensando?<\/p>\n

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

Cliente: S\u00ec! Facciamolo.<\/p>\n<\/blockquote>\n

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

\n

Adesso abbiamo una base solida su cui lavorare. Possiamo andare avanti?<\/p>\n<\/blockquote>\n

Andare avanti implica ovviamente maggiori dettagli: meno metafore, pi\u00f9 realt\u00e0. Proprio cos\u00ec, avete indovinato: \u00e8 l’ora dei mockup HTML\/CSS!<\/p>\n

Conversazioni, non rivelazioni<\/h3>\n

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<\/a>). Dopo aver approvato i wireframe e i comp lo-fi, il nostro cliente ha visto questo mockup per il progetto Warhol<\/a>.<\/p>\n

Non solo \u00e8 responsive, ma \u00e8 anche una evoluzione significativa dell’estetica presentata nel mockup lo-fi precedente. Ha in s\u00e9 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.<\/p>\n

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

Ricordatevi: ogni richiesta di revisione da parte del cliente \u00e8 in realt\u00e0 una richiesta di discussione. La mia risposta di default ad ogni cambiamento \u00e8 “Perch\u00e9?”: aiuta il cliente a concentrarsi sul “perch\u00e9” e gli ricorda che trovare il “come” \u00e8 vostra responsabilit\u00e0. Concentrarsi sul “perch\u00e9” vi aiuta a gestire la causa alla radice piuttosto che un sintomo magari casuale.<\/p>\n<\/div>\n

\n

Adesso possiamo cominciare<\/h2>\n

Prendersi del tempo per aiutare i nostri clienti a comprendere le sfide che affrontiamo e il ruolo che giocano nel nostro processo rende pi\u00f9 semplice la nostra comunicazione e il nostro lavoro con loro.<\/p>\n

\u00c8 vero che i nostri nuovi clienti potrebbero non conoscere ed amare ancora questo internet come voi, ma l’entusiasmo \u00e8 infettivo. Aiutate i vostri clienti a vedere internet per quello che \u00e8 (occhiali magici per il design opzionali) e tutte le interazioni con i vostri clienti ne beneficieranno.<\/p>\n<\/div>\n

\n

Note<\/h2>\n