{"id":207,"date":"2011-10-31T10:45:26","date_gmt":"2011-10-31T09:45:26","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/personalita-nel-design\/"},"modified":"2011-10-31T10:45:26","modified_gmt":"2011-10-31T09:45:26","slug":"personalita-nel-design","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/personalita-nel-design\/","title":{"rendered":"Personalit\u00e0 nel design"},"content":{"rendered":"<p><em>Siamo lieti di presentare un estratto dal Capitolo 3 di <a href=\"http:\/\/bkaprt.com\/de\">Designing for Emotion<\/a> di Aarron Walter (A Book Apart, 2011). \u2014Ed.<\/em><\/p>\n<p>Le nostre relazioni durature sono incentrate sulle qualit\u00e0 uniche e sulle prospettive che tutti noi possediamo. Chiamiamo queste doti personalit\u00e0. Attraverso le nostre personalit\u00e0, esprimiamo l&#8217;intera gamma delle emozioni umane. La personalit\u00e0 \u00e8 la forza misteriosa che ci fa avvicinare ad alcune persone e allontanare da altre. Dal momento che la personalit\u00e0 influenza enormemente i nostri processi di decision-making, pu\u00f2 costituire uno strumento potente nel design.<\/p>\n<div class=\"paragrafo\">\n<h2>La personalit\u00e0 \u00e8 la piattaforma delle emozioni<\/h2>\n<p>L&#8217;interface design vive all&#8217;interno di una categoria pi\u00f9 ampia chiamata Interazione Uomo-Macchina, o HCI (Human-Computer Interaction), una disciplina che coinvolge informatica, scienze comportamentali e design. Gli specialisti di HCI hanno conoscenze di psicologia, usabilit\u00e0, interaction design, concetti di programmazione e di principi base di visual design. Vi suona familiare? E&#8217; molto simile a quello con cui litigano ogni giorno gli user experience designer.<\/p>\n<p>Vi svelo un segreto: non sono un fan della dicitura \u201cInterazione Uomo-Macchina\u201d. Quando progetto, lavoro duramente per rendere l&#8217;esperienza dell&#8217;interfaccia molto simile all&#8217;avere una persona di fronte a s\u00e9, non un computer. Potrebbe sembrare che io sia pignolo, ma i nomi sono importanti. I nomi plasmano le nostre percezioni e ci suggeriscono l&#8217;idea di quello che fa parte di una categoria.<\/p>\n<p>L&#8217;obiettivo primario del design emozionale \u00e8 quello di facilitare la comunicazione Uomo-a-Uomo. Se stiamo facendo bene il nostro lavoro, il computer passa in secondo piano e vengono a galla le personalit\u00e0. Per raggiungere questo obiettivo, dobbiamo considerare come interagiamo gli uni con gli altri nella vita reale.<\/p>\n<p>Vorrei che vi fermaste per un attimo a pensare alle persone con cui avete recentemente stabilito una vera connessione. Forse le avrete incontrate mentre stavate facendo una passeggiata o ad un evento, oppure magari un amico vi ha presentati e la conversazione che ne \u00e8 seguita \u00e8 stata accattivante, interessante e forse perfino divertente. Che cosa di quella persona ha reso la vostra conversazione cos\u00ec esaltante? Probabilmente avete degli interessi comuni che hanno fatto scoccare la scintilla nella comunicazione, ma questo non \u00e8 quello che ha reso l&#8217;incontro cos\u00ec memorabile, vero? E&#8217; stata la loro personalit\u00e0 che vi ha attratto, che ha guidato la discussione e che vi ha emozionato. Le vostre personalit\u00e0 si sono incrociate e hanno condiviso delle emozioni, un tono di voce e la cadenza della conversazione. Questo vi ha fatto abbassare la guardia e vi ha fatto avere fiducia nella nuova persona. Le personalit\u00e0 alimentano le amicizie e fungono da piattaforma per le connessioni emotive.<\/p>\n<p>Tenetevi stretto questo ricordo e ritornateci quando comincerete un nuovo progetto di design. Quella sensazione \u00e8 quello che stiamo cercando di creare con il design emozionale. Creeremo quell&#8217;emozione e ci legheremo al nostro pubblico disegnando una personalit\u00e0 che sar\u00e0 impersonata dalla nostra interfaccia.<\/p>\n<p>Pensiamo al nostro design non come ad una facciata per l&#8217;interazione ma come a delle persone con le quali il nostro pubblico pu\u00f2 intrattenere un conversazione ispirata. Anche i prodotti sono persone.<\/p>\n<p>Come sempre, la storia ci viene in aiuto nel nostro lavoro. I designer hanno sperimentato per secoli l&#8217;utilizzo della personalit\u00e0 per la creazione di un&#8217;esperienza pi\u00f9 umana.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Breve storia della personalit\u00e0 nel design<\/h2>\n<p>Abbiamo molti esempi in cui la personalit\u00e0 umana si \u00e8 inserita per rendere pi\u00f9 familiare il frutto di lavori meccanici. Quando Johannes Gutenberg, orafo e padre della macchina da stampa, speriment\u00f2 con i caratteri mobili a met\u00e0 del quindicesimo secolo, fu ispirato dalla mano umana. Prima della macchina da stampa, gli scribi, solitamente monaci, scrissero a mano meticolosamente ogni pagina dei manoscritti religiosi con penna e inchiostro. Trascrivere una bibbia era un compito sacro, dal momento che si riteneva che lo scriba convogliasse un messaggio divino. Per questo motivo, la presenza della mano in quei manoscritti aveva una grande importanza spirituale.<\/p>\n<p>Quindi, quando Gutenberg progett\u00f2 e fuse i primi caratteri, che us\u00f2 per stampare centinaia di bibbie, si ispir\u00f2 fortemente allo stile calligrafico degli scribi. Sebbene avesse creato delle macchine per distribuire il messaggio divino, aveva lavorato duramente per rendere umana la presentazione (Fig. 3.1).<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_1.jpg\" border=\"0\" alt=\"Fig 1\" \/><\/p>\n<p>Fig 3.1: I caratteri mobili di Gutenberg imitavano la mano calligrafica degli scriba, nel tentativo di rendere pi\u00f9 umane le bibbie prodotte meccanicamente. (<a href=\"http:\/\/bkaprt.com\/de\/3\">source<\/a>)<\/p>\n<\/div>\n<p>Possiamo chiaramente vedere questo trend di umanizzazione del design nel ventesimo secolo, quando la produzione di massa perme\u00f2 praticamente tutta l&#8217;industria.<\/p>\n<p>La Volkswagen Beetle, realizzata nel 1938 e prodotta fino al 2003 \u00e8 il design che ha venduto meglio nella storia dell&#8217;automobilismo. Il suo design chiaramente umanizzato ha contribuito al suo successo (Fig. 3.2). Concepita come \u201cl&#8217;auto del popolo\u201d, il design antropomorfo la rende pi\u00f9 di un&#8217;auto per il popolo: \u00e8 un auto che <em>\u00e8<\/em> una persona. Le luci anteriori rotonde denotano gli occhi mentre la capotte dalla forma arrotondata sembra sorriderci, impersonificando il <a href=\"http:\/\/www.graphics.com\/modules.php?name=Sections&amp;op=viewarticle&amp;artid=852\">baby-face bias<\/a>. Sebbene fosse stata originariamente progettata per l&#8217;aerodinamica e non per la personalit\u00e0, il muso della Beetle comunica un un&#8217;attitudine costantemente speranzosa e divertente da rendere molto semplice il connettersi con lei per generazioni, nonostante i notevoli cambiamenti culturali avvenuti in sette decadi.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_2.jpg\" border=\"0\" alt=\"Fig 2\" \/><\/p>\n<p>Fig 3.2: La personalit\u00e0 si trova sul davanti e sul centro del design della Volkswagen Beetle, rendendola un successo travolgente per intere generazioni. (<a href=\"http:\/\/bkaprt.com\/de\/4\">fonte<\/a>)<\/p>\n<\/div>\n<p>Quel sorriso che accoglie il guidatore riflette un&#8217;emozione e stabilisce uno specifico tipo di relazione. E&#8217; difficile non ricambiare un sorriso, anche se viene da un oggetto. Attorno a questa semplice interazione abbiamo costruito una persona emozionale per quest&#8217;auto, che ha portato alla creazione di giochi (\u201c<a href=\"http:\/\/en.wikipedia.org\/wiki\/Punch_buggy\">Slug bug red!<\/a>\u201d) e al Maggiolino come eroe nei film (Herbie ne <em>Un Maggiolino tutto matto<\/em>). Ci siamo creati dei ricordi attorno a tali esperienze, i quali ci ricordano le emozioni positive che il Maggiolino ispira.<\/p>\n<p>Sebbene le bibbie di Gutenberg e la Volkswagen Beetle siano esempi interessanti, non c&#8217;\u00e8 esempio pi\u00f9 concreto di personalit\u00e0 nel design dalla campagna pubblicitaria di Apple \u201cGet a Mac\u201d. Nelle pubblicit\u00e0, Justin Long recita il ruolo di un giovane hipster Mac che gestisce problemi complessi in totale agilit\u00e0 e scioltezza, mentre il suo antagonista John Hodgman impersonificando un PC nerd e per nulla cool, fa pasticci con ogni task. Queste pubblicit\u00e0 comunicano un&#8217;esperienza personale e aiutano i clienti a fare un paragone con le diverse relazioni che potrebbero avere con il loro computer. Non parlano di specifiche o caratteristiche: mostrano come voi vi sentireste se compraste un Mac. Con un&#8217;idea della storia della personalit\u00e0 nel design, torniamo al presente, dove stiamo lavorando duramente insieme per comprendere il nostro pubblico e stiamo facendo del nostro meglio per creare delle esperienze web accattivanti.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Personae<\/h2>\n<p>Nel web design moderno, facciamo delle ricerche, pianifichiamo e creiamo tenendo presente le attitudini e le motivazioni del nostro pubblico. Gli user experience designer intervistano il proprio pubblico, poi creano delle personae, ossia un dossier con degli archetipi di utenti che rappresentano un gruppo pi\u00f9 grande. Pensate alle personae come all&#8217;artefatto della user research: aiutano il team di web design a rimanere coscienti del proprio pubblico target e a restare concentrati sui loro bisogni.<\/p>\n<p>L&#8217;esempio di persona mostrato in Fig. 3.3, creato da Todd Zaki Warfel, principal designer in <a href=\"http:\/\/messagefirst.com\">messagefirst<\/a>, racconta la storia di Julia, una categoria di utente. Attraverso questo documento apprendiamo cose riguardanti i suoi dati, i suoi interessi, la sua esperienza riguardo vari argomenti e cosa influenza le sue decisioni sui temi pertinenti al progetto. Cominciamo a capire chi \u00e8 Julia. Abbiamo un&#8217;idea della sua personalit\u00e0, il che ci aiuta a comprendere le sue motivazioni e a dare forma alle decisioni di design che seguiranno.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_3.jpg\" border=\"0\" alt=\"Fig 3\" \/><\/p>\n<p>Fig 3.3: Le personae guidano il processo di design, facendoci concentrare sui bisogni dell&#8217;utente.<\/p>\n<\/div>\n<p>Sebbene Julia non sia una persona reale, ma un rappresentante archetipo di un gruppo di utenti, \u00e8 in realt\u00e0 molto simile ad una persona che la gente di messagefirst conosce. Creano tutte le loro personae in questo modo molto pratico. Quando incontrano un punto critico nel processo di design in cui sono insicuri su quali percezioni, valori e comportamenti aspettarsi dal proprio pubblico in un&#8217;interfaccia specifica, semplicemente gli telefonano e gli fanno delle domande. Non solo questo li aiuta a creare delle soluzioni di design migliori, ma li fa anche concentrare su persone reali che usano le cose che loro creano.<\/p>\n<p>Come abbiamo visto nella gerarchia dei bisogni del Capitolo 1, sappiamo che tutti gli utenti hanno bisogno che i nostri design siano funzionali, affidabili ed usabili. Comprendendo il nostro pubblico possiamo soddisfare meglio i loro bisogni. Questa informazione ci aiuta anche a soddisfare il livello in cima a quella gerarchia, il piacere, dandoci indicazioni per una personalit\u00e0 del design che molto probabilmente creer\u00e0 una connessione emotiva.<\/p>\n<p>Le personae sono uno strumento standard nel processo di design, ma forniscono solo un&#8217;immagine parziale della relazione che stiamo creando con il nostro pubblico. Sappiamo chi sono, ma chi siamo noi? All&#8217;inizio di questo capitolo ho accennato al fatto che anche i prodotti possono essere delle persone. Seguendo questa linea di pensiero, i nostri design non dovrebbero avere una persona che faccia da antagonista per le personae dei nostri utenti? Perch\u00e9, s\u00ec, s\u00ec, dovrebbero.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Creare una Design Persona per il proprio sito Web<\/h2>\n<p>Se il vostro sito fosse una persona, chi sarebbe? E&#8217; serio, convenzionale, tutto dedicato agli affari e ancora affidabile e competente? E&#8217; un amico che fa battute che rendono divertenti anche i compiti noiosi?<\/p>\n<p>Seguendo una struttura simile a una user persona, potete rimpolpare la personalit\u00e0 del vostro design creando una design persona. La personalit\u00e0 si pu\u00f2 manifestare in un&#8217;interfaccia attraverso il visual design, il copy e le interazioni. Una design persona descrive come incanalare la personalit\u00e0 in ciascuna di queste aree ed aiuta il team di web design a costruire un risultato unificato e consistente. L&#8217;obiettivo consiste nel costruire un ritratto della personalit\u00e0 che comunichi chiaramente come quelli di Justin Long e John Hodgman nelle pubblicit\u00e0 \u201cGet a Mac\u201d.<\/p>\n<p>Prima di dare un&#8217;occhiata ad una vera design persona che ho creato per MailChimp, esaminiamo le componenti del documento. Ecco cosa dovrete includere nella design persona:<\/p>\n<blockquote style=\"background-image: none;\">\n<p><strong>Nome del brand<\/strong>: il nome della vostra azienda o del vostro servizio.<\/p>\n<p><strong>Panoramica<\/strong>: un breve riassunto della personalit\u00e0 del vostro brand. Cosa rende unica la personalit\u00e0 del vostro brand?<\/p>\n<p><strong>Immagine della personalit\u00e0<\/strong>: si tratta di una vera e propria immagine che incarna i tratti che volete includere nel vostro brand. Ci\u00f2 rende la personalit\u00e0 meno astratta. Prendete una persona famosa o una persona familiare al vostro team. Se invece il vostro brand ha una mascotte o un rappresentante che incarna di gi\u00e0 la personalit\u00e0 del brand, usate quello. Descrivete gli attributi della mascotte che comunicano la personalit\u00e0 del brand.<\/p>\n<p><strong>Tratti del brand<\/strong>: elencate dai cinque ai sette tratti che meglio descrivono il vostro brand insieme alle caratteristiche che volete evitare. Questo aiuta quelli che progettano e scrivono per questa design persona a creare una personalit\u00e0 consistente evitando le caratteristiche che porterebbero il vostro brand nella direzione sbagliata.<\/p>\n<p><strong>Mappa della personalit\u00e0<\/strong>: possiamo mappare le personalit\u00e0 su un sistema di assi X e Y.L&#8217;asse X rappresenta il grado di amichevolezza della personalit\u00e0, l&#8217;asse Y mostra il grado di sottomissione o predominio.<\/p>\n<p><strong>Voce<\/strong>: se il vostro brand potesse parlare, come lo farebbe? Cosa direbbe? Parlerebbe con un gergo da amico o con uno stile erudito e ricercato? Descrivete gli aspetti specifici della voce del vostro brand e come potrebbe cambiare nelle differenti situazioni comunicative. Le persone cambiano il proprio linguaggio e tono a seconda della situazione. La voce del vostro brand dovrebbe fare altrettanto.<\/p>\n<p><strong>Esempi di copy<\/strong>: fornite degli esempi di copy che potrebbe essere usato in diverse situazioni all&#8217;interno della vostra interfaccia. Questo aiuta gli scrittori a capire come la vostra design persona dovrebbe comunicare.<\/p>\n<p><strong>Lessico visivo<\/strong>: se siete un designer che crea questo documento per s\u00e9 stesso e\/o per il proprio design team, potete creare un lessico visivo nella vostra design persona che includa una panoramica dei colori, della tipografia e dello stile visivo che comunica la personalit\u00e0 del vostro brand. Potete essere generici riguardo questi concetti oppure includere una <a href=\"http:\/\/bkaprt.com\/de\/5\">mood board<\/a>.<\/p>\n<p><strong>Metodi di ingaggio<\/strong>: descrivete i metodi di ingaggio emotivo che potreste usare nell&#8217;interfaccia per supportare la design persona e creare un&#8217;esperienza memorabile. Analizzeremo meglio questi aspetti nel prossimo capitolo.<\/p>\n<\/blockquote>\n<p>Esaminiamo ora un esempio dal mondo reale. Come user experience design lead in MailChimp, ho creato una design persona che guidi il nostro lavoro. Seguendo la stessa struttura che abbiamo appena visto, ecco una versione leggermente abbreviata del documento che usiamo:<\/p>\n<blockquote style=\"background-image: none;\">\n<p><strong>Nome del brand<\/strong>: MailChimp<\/p>\n<p><strong>Panoramica<\/strong>: Freddie Von Chimpenheimer IV \u00e8 la faccia di MailChimp e l&#8217;incarnazione della personalit\u00e0 del brand (Fig. 3.4). La robusta sagoma di Freddie comunica il potere dell&#8217;applicazione e la sua postura in movimento fa pensare alle persone che questo brand voglia dire \u201caffari\u201d.<\/p>\n<p>Freddie ha sempre un sorriso gentile che d\u00e0 il benvenuto agli utenti e li fa sentire a casa. Lo stile da cartone animato comunica che MailChimp offre un&#8217;esperienza divertente ed informale. S\u00ec, \u00e8 un cartone animato dalle sembianze di scimmia, ma in qualche modo Freddie pu\u00f2 tuttavia essere \u201ccool\u201d. Gli piace fare battute spiritose, ma quando la situazione si fa seria, gli scherzi si fermano.<\/p>\n<p>MailChimp spesso sorprende i propri utenti con un simpatico easter egg o con un link ad un video YouTube che fa sbellicare dalle risate. Il divertimento \u00e8 dietro ogni angolo ma non intralcia mai il workflow.<\/p>\n<\/blockquote>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_4.jpg\" border=\"0\" alt=\"Fig 4\" style=\"margin-left: auto; margin-right: auto;\" \/><\/p>\n<p>Fig 3.4: Freddie Von Chimpenheimer IV, la mascotte di Mailchimp.<\/p>\n<\/div>\n<blockquote style=\"background-image: none;\">\n<p><strong>Immagine della personalit\u00e0<\/strong>: Fig. 3.4<\/p>\n<p><strong>Tratti del brand<\/strong>: divertente ma non infantile. Buffo ma non goffo. Potente, ma non complicato. Al passo con le ultime novit\u00e0, ma non alienante. Facile, ma non semplicistico. Affidabile, ma non pesante. Informale, ma non sdolcinato.<\/p>\n<p><strong>Mappa della personalit\u00e0<\/strong>: Fig. 3.5<\/p>\n<\/blockquote>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_5.jpg\" border=\"0\" alt=\"Fig 5\" style=\"margin-left: auto; margin-right: auto;\" \/><\/p>\n<p>Fig. 3.5: La mappa della personalit\u00e0 di MailChimp.<\/p>\n<\/div>\n<blockquote style=\"background-image: none;\">\n<p><strong>Voce<\/strong>: la voce di MailChimp \u00e8 familiare, amichevole e soprattutto umana. Le personalit\u00e0 delle persone che stanno dietro al brand traspaiono onestamente. La voce di MailChimp racconta barzellette (del genere che potete raccontare a vostra madre), racconta storie e comunica con quel tono amichevole che potreste usare con un vecchio amico.<\/p>\n<p>MailChimp usa delle contrazioni come \u201cdon&#8217;t\u201d invece di \u201cdo not\u201d perch\u00e9 \u00e8 cos\u00ec che le persone vere si parlano. MailChimp usa degli effetti sonori come \u201chmmmmm&#8230;\u201d per far s\u00ec che sembri che state pensando molto, oppure \u201cCavolo, fa schifo!\u201d per comunicare empatia. Le form in caratteri minuscoli e il testo dei bottoni rafforza l&#8217;informalit\u00e0 del brand.<\/p>\n<p><strong>Esempi di copy<\/strong>: <em>Messaggi di successo<\/em>: \u201cDammi il cinque! La tua lista \u00e8 stata importata.\u201d <em>Error message<\/em>: \u201cOops, sembra che tu ti sia dimenticato di mettere un indirizzo email.\u201d <em>Fallimento critico<\/em>: \u201cUno dei nostri server \u00e8 temporaneamente gi\u00f9. I nostri ingegneri ci stanno gi\u00e0 lavorando e saremo di nuovo online a breve. Grazie per la pazienza.\u201d<\/p>\n<p><strong>Lessico visivo<\/strong>: <em>Colore<\/em>: la palette di colori di MailChimp, brillante ma anche leggermente desaturata, comunica un senso di divertimento e humor. I colori danno una sensazione di raffinatezza. MailChimp \u00e8 divertente ma \u00e8 anche potente. <em>Tipografia<\/em>: MailChimp \u00e8 alla mano, efficiente e semplice da usare. La sua tipografia riflette queste caratteristiche. I titoli devono essere semplici, sans-serif ed il corpo del copy varia appropriatamente in dimensione, peso e colore per comunicare una gerarchia nell&#8217;informazione, rendendo cos\u00ec MailChimp come un cardigan comodo e familiare che \u00e8 sia funzionale sia amato. <em>Note di stile generali<\/em>: gli elementi dell&#8217;interfaccia sono piatti e semplici, rendendo le cose semplici da capire e non spaventose. Delle texture morbide e quasi impercettibili possono apparire in vari posti per scaldare lo spazio e renderlo pi\u00f9 umano. Freddie dovrebbe essere usato con moderazione e solo per interporre un po&#8217; di &#8220;humor&#8221;. Freddie non d\u00e0 mai un feedback sull&#8217;applicazione, non riporta le statistiche n\u00e9 aiuta con lo svolgimento dei compiti.<\/p>\n<p><strong>Metodi di ingaggio<\/strong>: <em>Sorpresa e gioia<\/em>: le schermate di login con diversi temi commemorano le festivit\u00e0, gli eventi culturali o un individuo stimato. Le easter egg creano dei momenti di divertimento inaspettati che possono comunicare nostalgia o fare dei riferimenti alla cultura pop-kitsch. <em>Anticipazione<\/em>: i saluti divertenti e casuali di Freddie in cima ad ogni pagina principale creano anticipazione sulla prossima pagina che verr\u00e0 caricata. Questi saluti non danno mai informazioni o feedback. Sono un layer divertente che non interferisce mai con la funzionalit\u00e0 o l&#8217;usabilit\u00e0.<\/p>\n<\/blockquote>\n<p>Scaricate un template per una design persona e l&#8217;esempio di MailChimp da questo indirizzo: <a href=\"http:\/\/aarronwalter.com\/design-personas\">http:\/\/aarronwalter.com\/design-personas<\/a>. Provatelo nel vostro prossimo progetto o magari anche in un redesign.<\/p>\n<p>Proprio come gli user experience designer pubblicano le personae in un posto in cui i team di design, sviluppo e content strategy possano vederli durante tutto il progetto, le vostre design personea dovrebbero essere visibili per ricordare al team del tipo di relazione che volete creare con il vostro pubblico. La design persona dovrebbe guidare chiunque crei un pixel, un paragrafo o un processo del vostro sito.<\/p>\n<p>Molti siti web usano gi\u00e0 la personalit\u00e0 per modellare la user experience e dare forza al proprio successo commerciale. Sebbene diversi per brand, obiettivi di business e piattaforme, Tapbots, Carbonmade e Housing Works hanno scoperto che la personalit\u00e0 \u00e8 l&#8217;ingrediente chiave nelle connessioni emotive che stanno creando con il proprio pubblico e nel proprio successo assoluto.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Tapbots: robot love<\/h2>\n<p><a href=\"http:\/\/tapbots.com\">Tapbots<\/a>, creatori di piccole utili app per iPhone, hanno creato una personalit\u00e0 distinta nelle proprie interfacce, rendendo gradevoli dei task che sarebbero da nerd (Fig. 3.6).<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_6.jpg\" border=\"0\" alt=\"Fig 6\" \/><\/p>\n<p>Fig. 3.6: Le app di Tapbots sembrano dei piccoli graziosi robot pronti a fare lo sporco lavoro di macinare numeri al vostro posto.<\/p>\n<\/div>\n<p>La app Converbot, come suggerisce il suo nome, fa semplicemente delle conversioni tra unit\u00e0 di misura. La app Weighbot aiuta gli utenti a tracciare le fluttuazioni nel peso corporeo. Nessuno di questi task \u00e8 incredibilmente divertente da fare, soprattutto tenere traccia del proprio peso, che pu\u00f2 intaccare la propria stima di s\u00e9 stessi. Ma il design di queste app ha creato un seguito leale che li ha resi un successo incredibile.<\/p>\n<p>Le app sembrano avere delle facce attraverso cui avvengono le interazioni. I pannelli scuri in cima assomigliano agli occhiali ispirati da Kool Moe Dee, sostenuti da un piccolo naso triangolare e da una grande bocca. Se dovete tracciare il vostro peso, un cyborg Kool Moe Dee \u00e8 un buon partner per questo crimine.<\/p>\n<p>A differenza di altre app per iPhone, le interfacce assomigliano a piccoli robot umanoidi. Un robot in particolare ha ispirato il designer delle app di Tapbots Mark Jardine nel disegnare la personalit\u00e0 nella user interface:<\/p>\n<blockquote>\n<p>L&#8217;intero concetto della UI \u00e8 stato davvero ispirato dal film WALL*E. Il nostro concept per le prime due app era di disegnarle come se fossero dei robot reali.<\/p>\n<p>Vogliamo che le nostre app vengano usate seriamente ma anche che diano la sensazione di essere pi\u00f9 di un semplice software. Vogliamo che i nostri utenti abbiano una connessione emotiva con le nostre app. La maggior parte delle persone non ha il rapporto di amore e gioia per i software che i geek hanno.<\/p>\n<\/blockquote>\n<p>Gli utenti reagiscono con emozioni calorose a queste interfacce in stile cartoon ma tuttavia apparentemente tangibili date dal ronzio dei robot, dai loro bip e blip. Potete sicuramente vedere i paralleli con WALL*E, nei tratti fisici e di personalit\u00e0. Entrambe sono amichevoli, fanno tenerezza e sono affidabili.<\/p>\n<p>Il blogger di tecnologia John Gruber riassume il sentimento del pubblico sulle app Tapbots con <a href=\"http:\/\/bkaprt.com\/de\/6\">questa semplice recensione<\/a>:<\/p>\n<blockquote>\n<p>Adoro l&#8217;aspetto e il suono delle loro app.<\/p>\n<\/blockquote>\n<p>Ironicamente, Gruber non cita nemmeno la funzionalit\u00e0 delle app, attraverso il suo apprezzamento la funzionalit\u00e0 \u00e8 implicita. Usa il verbo \u201cadorare\u201d. Gruber non solo apprezza le app, le <em>ama<\/em>. Queste interfacce antropomorfe danno agli utenti la sensazione di interagire con un altro essere vivente con una sua personalit\u00e0, rendendo possibile una connessione emotiva. Le interfacce che riescono a generare efficacemente delle emozioni non solo creano una vasta base di fan, ma creano anche un esercito di evangelisti.<\/p>\n<p>Il treno della personalit\u00e0 del brand sbuffa nel prossimo esempio. Carbonmade riesce a costruire una personalit\u00e0 del brand efficace, che risuona nel proprio pubblico mentre fa il bagno in un mare di eccentrici con i baffi.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Carbonmade: polipi, unicorni e baffoni<\/h2>\n<p>La personalit\u00e0 pu\u00f2 forgiare le relazioni con il pubblico solo nella misura in cui \u00e8 unica e autentica. Se \u00e8 usata come un trucco pu\u00f2 avere l&#8217;effetto opposto. Le persone noteranno una personalit\u00e0 artificiale e non autentica in un design, che avr\u00e0 l&#8217;effetto di allontanarli e potete star sicuri che non si fideranno mai del vostro brand.<\/p>\n<p><a href=\"http:\/\/carbonmade.com)\">Carbonmade<\/a>, un piccola intelligente web app che aiuta le persone a crearsi degli eleganti portfolio, esprimere la propria personalit\u00e0 attraverso il proprio sito, combinare la sincerit\u00e0 di Jimmy Stewart con lo charm esplosivo e goffo di Eddie Izzard. I polipi e gli unicorni scorazzano nel panorama fantastico della homepage (Fig. 3.7), atipica per un sito incentrato sulla conversione.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_7.jpg\" border=\"0\" alt=\"Fig 7\" \/><\/p>\n<p>Fig. 3.7: Carbonmade usa una personalit\u00e0 esagerata per corteggiare i nuovi utenti del loro servizio.<\/p>\n<\/div>\n<p>Questa personalit\u00e0 non convenzionale e lo &#8220;humor&#8221; ironico \u00e8 evocato dal loro designer Dave Gorum e salta fuori che \u00e8 proprio questo aspetto che convince i designer e gli artisti un po&#8217; scettici a registrarsi sul sito. Spiega Gorum:<\/p>\n<blockquote>\n<p>La mia regola era ed \u00e8 quella di aggiungere divertimento fino al punto in cui arriva a distrarre dal messaggio.<\/p>\n<p>Mantenere le cose informali e pazze rende pi\u00f9 semplice far s\u00ec che le persone clicchino sul pulsante per la registrazione. C&#8217;\u00e8 per\u00f2 un limite alla pazzia. La usiamo in maniera evidente sul nostro sito vetrina, la usiamo un po&#8217; meno nei tool amministrativi e la rimuoviamo completamente dal prodotto. E&#8217; come un gigante, vistoso, goffo pezzo di caramella all&#8217;esterno, con uno svizzero centro ingegneristico, puritano e nocciolato!<\/p>\n<p>Lo humor e la personalit\u00e0 di Carbonmade \u00e8 come un <a href=\"http:\/\/www.urbandictionary.com\/define.php?term=reverse%20mullet\">reverse mullet<\/a>: il party \u00e8 sul davanti, gli affari sul retro. Tornando indietro, la personalit\u00e0 eccentrica della loro applicazione permette agli utenti di concentrarsi sul workflow piuttosto che perdersi nel mare di baffi. Il tono informale del sito del prodotto, tuttavia, crea un rapporto che permette al pubblico di sentirsi a proprio agio con la sottoscrizione del servizio, mentre d\u00e0 indicazioni sbagliate ai competitor, che potrebbero credere che Carbonmate \u00e8 pura frivolezza senza sostanza:<\/p>\n<blockquote>\n<p>L&#8217;informalit\u00e0 rende molto semplice aprire un dialogo con il proprio pubblico. Siamo come il loro buffo amico con cui \u00e8 proprio semplice parlare e che pu\u00f2 fargli un bel portfolio.<\/p>\n<p>Se non altro, il sorriso compiaciuto e stupido fa s\u00ec che i nostri competitor si sentano autorizzati a non prenderci sul serio. Il che \u00e8 va moooolto bene.<\/p>\n<\/blockquote>\n<p>La personalit\u00e0 del brand di Carbonmade crea un chiaro contrasto per il pubblico che sta cercando di confrontarli con gli altri competitori. Tale contrasto \u00e8 una parte essenziale del processo di decision making delle persone.<\/p>\n<p>Mentre l&#8217;umorismo \u00e8 il timone della personalit\u00e0 di Carbonmade, non \u00e8 sempre appropriato. E&#8217; il nostro desiderio di condividere un po&#8217; di noi stessi con gli altri che forma la personalit\u00e0 dei nostri design e ci aiuta a connetterci con il pubblico. Siamo tutte persone complesse con un vasto insieme di emozioni. Quando si tratta di design emozionale, abbiamo bisogno di creare su misura la personalit\u00e0 del contenuto e del pubblico.<\/p>\n<p>Pochi siti web fanno questa cosa cos\u00ec bene come Housing Works, che mette una faccia umana in una causa importante.<\/p>\n<\/blockquote>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Housing Works: un nome con una faccia<\/h2>\n<p>Cos\u00ec come nella vita reale, non possiamo sempre punteggiare le personalit\u00e0 di un sito con spirito e umorismo: alcune situazioni richiedono una tattica diversa.<\/p>\n<p><a href=\"http:\/\/housingworks.org\">Housing Works<\/a> \u00e8 un&#8217;associazione no-profit che dedica tutta la sua attivit\u00e0 a porre fine all&#8217;AIDS e all&#8217;essere senzatetto. Housing Works cambia delle vite tutti i giorni. La loro storia parla di empatia, gentilezza e speranza per le persone comuni.<\/p>\n<p>Quando <a href=\"http:\/\/happycog.com\">Happy Cog<\/a> ha ridisegnato il sito di Housing Works nel 2008 (Fig. 3.8), le personalit\u00e0 dell&#8217;organizzazione e le persone che aiuta sono state le muse del loro processo di design.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2011\/10\/figure3_8.jpg\" border=\"0\" alt=\"Fig 8\" \/><\/p>\n<p>Fig. 3.8: Housing Works crea un legame emotivo con il suo pubblico condividendo le storie delle incredibili persone che aiuta.<\/p>\n<\/div>\n<p>Dan Mall, il design lead di Housing Works, spiega:<\/p>\n<blockquote>\n<p>E&#8217; sempre stato chiaro che il cuore di Housing Works sono le persone che aiutano e quelle che vengono aiutate. Riguardava per la maggior parte il calore e la cura. Sotto questa direzione, \u00e8 stato semplice disegnare il sito che vedete oggi.<\/p>\n<\/blockquote>\n<p>Le grandi fotografie e le citazioni riguardanti i modi in cui Housing Works ha cambiato la vite delle persone che aiuta appaiono in maniera prominente sulla homepage, comunicando la personalit\u00e0 dell&#8217;organizzazione e contemporaneamente ispirando il proprio pubblico. Le facce sorridenti e le storie personali girano delicatamente, aiutando il sito ad ottenere una comunicazione realmente uomo-a-uomo.<\/p>\n<p>Il cropping delle foto plasma la prospettiva emotiva del pubblico. Il principio di design della proporzione dei volti afferma che le fotografie ritagliate molto vicino al viso del soggetto incoraggiano una risposta emotiva da parte della persona che le osserva e contemporaneamente enfatizzano la personalit\u00e0 del soggetto. Un ritaglio pi\u00f9 ampio del soggetto enfatizza l&#8217;apparenza fisica del soggetto. Le foto sulla homepage di Housing Works sono ritagliate perfettamente per aiutarci a vedere le bellissime personalit\u00e0 delle persone raffigurate, rendendoci compassionevoli verso la loro causa.<\/p>\n<div>\n<div class=\"paragrafo\">\n<h2>Il potere della personalit\u00e0<\/h2>\n<p>Proprio come le nostre personalit\u00e0 cambiano a seconda del contesto comunicativo nella vita reale, devono anche cambiare nei progetti che creiamo. Non c&#8217;\u00e8 una soluzione unica. Se smettiamo di pensare alle interfacce che disegnamo come a dei semplici pannelli di controllo e cominciamo a pensare ad esse come a persone con cui il nostro pubblico target vuole interagire, possiamo creare delle esperienze emotivamente accattivanti che lasceranno un&#8217;impressione duratura.<\/p>\n<p>Tenete presente che quando enfatizzate la personalit\u00e0 nella user experience, alcune persone potrebbero non apprezzarla. Tuttavia, questa cosa va bene. Le personalit\u00e0 si scontrano e, in caso di affari, pu\u00f2 essere una cosa buona. Se le persone non comprendono la vostra personalit\u00e0, ci sono buone chance che non siano i clienti giusti per voi e che vi state in realt\u00e0 risparmiando dei problemi di relazione con i clienti. La personalit\u00e0 \u00e8 un rischio ma ci sono molti altri esempi che suggeriscono che il gioco vale la candela.<\/p>\n<p>\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>La personalit\u00e0 \u00e8 quella forza misteriosa che ci fa avvicinare ad alcune persone e allontanarci da altre. Dal momento che la personalit\u00e0 ci influenza molto nei processi con cui prendiamo le nostre decisioni, possiamo usarla come potente strumento nel design. In un estratto in esclusiva dal suo nuovo ed eccellente libro citeDesigning For Emotion\/cite, Aarron Walter ci mostra come creare una connessione umana forte nell&#8217;interazione uomo-computer trasformando le design interactions in conversazioni, impregnando le interazioni meccaniche di elementi distintamente umani ed usando delle tecniche di design e del linguaggio per creare una personalit\u00e0 viva per il proprio sito web.<\/p>\n","protected":false},"author":818,"featured_media":7000633,"comment_status":"open","ping_status":"open","template":"","categories":[243,258,52],"tags":[],"coauthors":[343],"class_list":["post-207","article","type-article","status-publish","has-post-thumbnail","hentry","category-brand-identity","category-graphic-design","category-numero-38-31-ottobre-2011"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/207","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=207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000633"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=207"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}