{"id":805,"date":"2018-04-30T13:21:15","date_gmt":"2018-04-30T11:21:15","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/insegnamenti-su-user-research-e-design\/"},"modified":"2018-04-30T13:21:15","modified_gmt":"2018-04-30T11:21:15","slug":"insegnamenti-su-user-research-e-design","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/insegnamenti-su-user-research-e-design\/","title":{"rendered":"Cosa ci insegna il fallimento della New Coke su user research e design"},"content":{"rendered":"<p>Alla fine degli anni &#8217;70, la Pepsi rimaneva indietro rispetto alla Coca-Cola nella competizione per diventare la leader nel settore della cola. Ma poi Pepsi ha scoperto che nei blind test sul gusto, la gente in realt\u00e0 preferiva il gusto pi\u00f9 dolce della Pepsi. Per diffondere la notizia, Pepsi realizz\u00f2 una famosa campagna pubblicitaria, chiamata Pepsi Challenge, che mostrava gente che assaggiava i due marchi di cola senza sapere quali fossero e ogni volta veniva scelta la Pepsi.<\/p>\n<p>Mentre la Pepsi guadagnava costantemente quote di mercato nei primi anni &#8217;80, la Coca-Cola esegu\u00ec lo stesso test e trov\u00f2 lo stesso risultato: semplicemente, la gente preferiva la Pepsi quando assaggiava i due affiancati. Cos\u00ec, dopo aver condotto ricerche di mercato approfondite, la soluzione di Coca-Cola fu quella di creare una versione pi\u00f9 dolce della sua famosa cola: la New Coke. Nei test di assaggio, la gente preferiva la nuova formula di Coca Cola sia alla normale formula di Coca Cola sia a quella di Pepsi.<\/p>\n<p>Nonostante questo successo nei test, quando la societ\u00e0 port\u00f2 sul mercato la New Coke, i clienti si ribellarono. La nuova Coca-Cola si era rivelata uno dei pi\u00f9 grandi errori della storia del marketing. In pochi mesi, Coca-Cola ritorn\u00f2 alla sua formula originale con il marchio &#8220;Coca-Cola Classic&#8221; sugli scaffali.<\/p>\n<p>Alla fine, le vendite hanno dimostrato che le persone preferivano Coca-Cola Classic. Ma la ricerca di Coca-Cola aveva previsto esattamente l&#8217;opposto. Ma allora, cosa \u00e8 andato storto?<\/p>\n<p>I test hanno indotto le persone a bere uno o due sorsi di ciascuna coca in isolamento e poi a decidere quale preferivano in base a quello. Il problema \u00e8 che non \u00e8 cos\u00ec che le persone bevono cola nella vita reale. Potremmo berne una lattina durante il pasto. E non beviamo quasi mai solo uno o due sorsi. La user research riguarda tanto il modo in cui viene condotta la ricerca quanto il prodotto oggetto della ricerca.<\/p>\n<p>Ai fini della progettazione e della ricerca di servizi digitali e siti Web, il punto \u00e8 che le persone possono comportarsi in modo diverso nella user research rispetto a quanto non facciano nella vita reale. Dobbiamo essere consapevoli del modo in cui progettiamo e gestiamo sessioni di ricerca utente e del modo in cui interpretiamo i risultati per tenere in considerazione i comportamenti reali, ed evitare interpretazioni che portano a un sacco di lavoro non necessario e a un impatto negativo sull&#8217;esperienza utente.<\/p>\n<p>Per mostrare come questo si applica al web design, mi piacerebbe condividere tre esempi presi da un progetto a cui ho lavorato. Il progetto era per un servizio digitale del governo, che i funzionari pubblici usano per prenotare e gestire gli appuntamenti. Il servizio dovrebbe sostituire un sistema di prenotazione di terzi chiamato BookingBug. Ci siamo interessati a tre esigenze degli utenti:<\/p>\n<ul>\n<li>prenotare un appuntamento,<\/li>\n<li>vedere gli appuntamenti del giorno<\/li>\n<li>e cancellare un appuntamento.<\/li>\n<\/ul>\n<div class=\"paragrafo\">\n<h2 id=\"section1\">Prenotare un appuntamento<\/h2>\n<p>Dovevamo dare agli utenti un modo per prenotare un appuntamento, che consisteva nella selezione di un luogo, di un tipo di appuntamento e di una persona da incontrare. L&#8217;ordine di questi campi \u00e8 importante: non tutti i tipi di appuntamento possono essere condotti in ogni luogo e non tutto il personale \u00e8 addestrato a condurre ogni tipo di appuntamento.<\/p>\n<div id=\"figure1\" class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2018\/04\/book_appointments_1_696.png\" border=\"0\" alt=\"Screenshot di un'app per prenotare un appuntamento\" width=\"100%\" \/><\/p>\n<p>La prima iterazione della journey di prenotazione, con tre select box in una pagina.<\/p>\n<\/div>\n<p>Il nostro progetto iniziale prevedeva tre caselle di selezione in una pagina. La selezione di un&#8217;opzione nella prima casella di selezione avrebbe causato l&#8217;aggiornamento dei valori nelle caselle successive, ma poich\u00e9 si trattava solo di un prototipo, non \u00e8 stato creato nel test. Gli utenti hanno selezionato un&#8217;opzione da ciascuna delle caselle di selezione in modo facile e veloce. Ma in seguito ci siamo resi conto che il test non rifletteva realmente il modo in cui l&#8217;interfaccia avrebbe effettivamente funzionato.<\/p>\n<p>In realt\u00e0, le caselle di selezione si sarebbero dovute aggiornare dinamicamente con AJAX, che rallenterebbe drasticamente le cose e influenzerebbe l&#8217;esperienza complessiva. Servirebbe anche un modo per indicare che qualcosa si sta caricando, come uno spinner di caricamento. Questo feedback dovrebbe anche essere percepibile agli utenti ipovedenti che si affidano a uno screen reader.<\/p>\n<p>Non \u00e8 tutto: ogni casella di selezione dovrebbe avere un pulsante di submit perch\u00e9 <a href=\"https:\/\/adamsilver.io\/articles\/select-boxes-shouldnt-submit-on-change\/\">inviare una form onchange \u00e8 un anti-pattern di inclusive design<\/a>. Ci\u00f2 riguarderebbe anche scenari in cui \u00e8 presente un <a href=\"https:\/\/kryogenix.org\/code\/browser\/everyonehasjs.html\">errore JavaScript<\/a>, altrimenti gli utenti resterebbero con un&#8217;interfaccia non funzionante. Detto questo, non eravamo entusiasti all&#8217;idea di aggiungere pi\u00f9 pulsanti di submit. Una sola call to action spesso \u00e8 pi\u00f9 semplice e pi\u00f9 chiara.<\/p>\n<p>Come accennato in precedenza, l&#8217;ordine in cui gli utenti selezionano le opzioni \u00e8 importante, perch\u00e9 il completamento di ogni passaggio comporta l&#8217;aggiornamento dei passaggi successivi. Per la produzione, se l&#8217;utente ha selezionato le opzioni nell&#8217;ordine sbagliato, le cose potrebbero rompersi. Tuttavia, il prototipo non riflette affatto questo: gli utenti possono selezionare qualsiasi cosa, in qualsiasi ordine, e procedere indipendentemente.<\/p>\n<p>Gli utenti adoravano il prototipo, ma non era qualcosa che potevamo effettivamente dare loro alla fine. Per testarlo in modo corretto e realistico, avevamo bisogno di fare molto lavoro extra. Ci\u00f2 che sembrava innocentemente un semplice prototipo ci ha dato dei risultati fuorvianti.<\/p>\n<p>La nostra iterazione successiva ha seguito il pattern <a href=\"https:\/\/www.smashingmagazine.com\/2017\/05\/better-form-design-one-thing-per-page\/\">One Thing Per Page<\/a>: abbiamo diviso ogni campo della form in una schermata separata. Non c&#8217;era bisogno di AJAX e ogni pagina aveva un solo pulsante di submit. Ci\u00f2 ha inoltre impedito agli utenti di rispondere alle domande nell&#8217;ordine sbagliato. Dato che non c&#8217;era pi\u00f9 bisogno di AJAX, anche le relative considerazioni sull&#8217;accessibilit\u00e0 sono sparite.<\/p>\n<div id=\"figure2\" class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2018\/04\/book_appointments_2_696.png\" border=\"0\" alt=\"Screenshot che mostra un'app per prenotare appuntamenti suddivisi su tre schermi\" width=\"100%\" \/><\/p>\n<p>La seconda iterazione della journey di prenotazione, con una pagina separata per ogni step.<\/p>\n<\/div>\n<p>Abbiamo testato questa cosa davvero bene. La differenza era che sapevamo che il prototipo era realistico, nel senso che gli utenti avrebbero avuto un&#8217;esperienza simile quando la funzionalit\u00e0 sarebbe andata in produzione.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section2\">Visualizzazione degli appuntamenti del giorno<\/h2>\n<p>Dovevamo offrire agli utenti un modo per visualizzare il loro calendario. Abbiamo disposto gli appuntamenti in una tabella, dove ogni riga rappresentava un appuntamento. Ogni ora disponibile era stata demarcata dalla parola &#8220;Disponibile&#8221;. Gli appuntamenti erano collegati, ma le ore disponibili non lo erano.<\/p>\n<div id=\"figure3\" class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2018\/04\/view_appointments_696.png\" border=\"0\" alt=\"Screenshot di una vista app per visualizzare gli appuntamenti del giorno\" width=\"100%\" \/><\/p>\n<p>La pagina di pianificazione per visualizzare gli appuntamenti del giorno.<\/p>\n<\/div>\n<p>Nel primo round di ricerche, abbiamo chiesto agli utenti di guardare lo schermo e dare un feedback. Ci hanno detto cosa gli piaceva, cosa non gli piaceva e cosa avrebbero cambiato. Alcuni partecipanti ci hanno detto che volevano che la loro disponibilit\u00e0 risaltasse di pi\u00f9. Altri hanno detto che volevano i tipi di appuntamento codificati con dei colori. Un partecipante ha anche detto che la schermata sembrava noiosa.<\/p>\n<p>Durante il debriefing, ci siamo resi conto che volevano appuntamenti codificati con dei colori perch\u00e9 BookingBug (a cui si erano abituati) li aveva. Tuttavia, il motivo per cui BookingBug utilizzava il colore per gli appuntamenti era che il layout del sistema comprimeva cos\u00ec tante informazioni sullo schermo che era difficile ricavarne informazioni utili altrimenti.<\/p>\n<p>Non eravamo convinti che il feedback fosse prezioso. Accogliere questi cambiamenti avrebbe significato rompere i pattern esistenti, che era qualcosa che non volevamo fare senza esserne sicuri.<\/p>\n<p>Inoltre, non eravamo contenti di rendere la disponibilit\u00e0 pi\u00f9 importante, poich\u00e9 ci\u00f2 avrebbe reso gli appuntamenti visivamente pi\u00f9 deboli. Cio\u00e8, risolvere questo problema potrebbe inavvertitamente finire con la creazione di un altro problema dello stesso peso. Al contrario, volevamo che fosse il contenuto a eseguire il lavoro.<\/p>\n<p>Il vero problema, pensavamo, era chiedere agli utenti la loro opinione prima, invece di dare loro dei task da completare. Le persone possono opporre resistenza al cambiamento e le domande che avevamo posto erano sulla loro opinione, non su come fare quello che dovevano. Chiedete a qualcuno la sua opinione e ne avr\u00e0 una. Come i test sul gusto Coca-Cola e Pepsi, ci\u00f2 che le persone sentono e dicono durante la user research pu\u00f2 essere molto diverso dal comportamento nella vita reale.<\/p>\n<p>Quindi abbiamo testato di nuovo lo stesso design. Ma questa volta, abbiamo iniziato ogni sessione ponendo agli utenti domande a cui la pagina della pianificazione dovrebbe essere in grado di rispondere. Per esempio, abbiamo chiesto &#8220;Puoi dirmi quando sarai disponibile successivamente?&#8221; e &#8220;Che appuntamento hai alle 16?&#8221;.<\/p>\n<p>Gli utenti hanno guardato lo schermo e risposto ad ogni domanda all&#8217;istante. Solo in seguito abbiamo chiesto agli utenti come si sentivano a riguardo. Naturalmente, erano felici e non fecero commenti che richiedessero grandi cambiamenti. Piuttosto con ilarit\u00e0, questa volta un partecipante ha dichiarato che desiderava che la loro disponibilit\u00e0 fosse <em>meno<\/em> prominente perch\u00e9 non voleva che il suo manager vedesse che aveva del tempo libero.<\/p>\n<p>Se non avessimo cambiato il nostro approccio alla ricerca, avremmo potuto passare molto tempo a progettare qualcosa di nuovo che non avrebbe avuto alcun valore per gli utenti.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section3\">Annullare un appuntamento<\/h2>\n<p>L&#8217;ultima funzione prevedeva la possibilit\u00e0 per gli utenti di cancellare un appuntamento. Dal momento che ci stavamo allontanando dall&#8217;uso di BookingBug, c&#8217;era una situazione in cui un appuntamento poteva essere prenotato sia su BookingBug sia sull&#8217;applicazione, i cui dettagli non sono davvero importanti. Ci\u00f2 che importa \u00e8 che abbiamo chiesto agli utenti di confermare di aver capito cosa dovevano fare.<\/p>\n<div id=\"figure4\" class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2018\/04\/cancel_appointment_696.png\" border=\"0\" alt=\"Screenshot che mostra una pagina dell'app per confermare una cancellazione\" width=\"100%\" \/><\/p>\n<p>La pagina di conferma della cancellazione.<\/p>\n<\/div>\n<p>La prima sessione di ricerca aveva cinque partecipanti. Uno di questi partecipanti ha letto il prompt ma ha mancato la checkbox e ha inoltrato la form. A quel punto, l&#8217;utente \u00e8 stato portato alla schermata successiva.<\/p>\n<p>Avremmo potuto seguire la tentazione di esplorare dei modi per rendere la checkbox pi\u00f9 prominente, il che in teoria avrebbe ridotto la possibilit\u00e0 che gli utenti la mancassero. Ma poi di nuovo, il pattern checkbox era stato usato per tutto il servizio ed era passato attraverso molti round di test di usabilit\u00e0 e accessibilit\u00e0: sapevamo che il design visuale della checkbox non era esente da errori.<\/p>\n<p>Il problema era che il prototipo non aveva la form validation. In produzione, gli utenti avrebbero visto un messaggio di errore, che avrebbe impedito loro di procedere. Avremmo potuto passare del tempo ad aggiungere la form validation, ma occorre bilanciare la velocit\u00e0 a cui si vuole creare un prototipo &#8220;usa e getta&#8221; e il fatto che il prototipo fornisca risultati accurati e utili.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2 id=\"section4\">Riepilogo<\/h2>\n<p>La Coca-Cola voleva che la sua cola di fama mondiale avesse un sapore migliore della Pepsi. Non appena i test hanno dimostrato che la gente preferiva la sua nuova formula, Coca-Cola l&#8217;ha usata. Ma proprio come il design della pagina di pianificazione, non era il prodotto ad essere sbagliato, ma la ricerca.<\/p>\n<p>Anche se non rischiavamo di fare l&#8217;epic fail del secolo del settore marketing, il design dei nostri test avrebbe potuto influenzare la nostra interpretazione dei risultati in una maniera che avrebbe creato molto pi\u00f9 lavoro per un ritorno negativo. Un sacco di tempo sprecato e un sacco di soldi sprecati.<\/p>\n<p>Il tempo con gli utenti \u00e8 prezioso: dovremmo dedicare tanto impegno e riflessione al modo in cui gestiamo le sessioni di ricerca come facciamo quando progettiamo l&#8217;esperienza. In questo modo gli utenti ottengono la migliore esperienza e evitiamo di fare lavori inutili.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Coca-Cola ha condotto ricerche di mercato approfondite prima di lanciare la New Coke nel 1985, ma ci\u00f2 nonostante il prodotto si \u00e8 rivelato uno dei pi\u00f9 grandi fallimenti di marketing di tutti i tempi. Il designer Adam Silver si basa sull&#8217;infame errore di Coca-Cola per offrire alcune importanti lezioni per condurre una user research di successo per siti Web e servizi digitali.<\/p>\n","protected":false},"author":818,"featured_media":7000835,"comment_status":"open","ping_status":"open","template":"","categories":[209,267],"tags":[],"coauthors":[523],"class_list":["post-805","article","type-article","status-publish","has-post-thumbnail","hentry","category-numero-231-9-novembre-2017","category-user-research"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000835"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=805"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}