{"id":108,"date":"2010-10-05T12:02:35","date_gmt":"2010-10-05T10:02:35","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/testare-le-accordion-form\/"},"modified":"2010-10-05T12:02:35","modified_gmt":"2010-10-05T10:02:35","slug":"testare-le-accordion-form","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/testare-le-accordion-form\/","title":{"rendered":"Testare le accordion form"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/15-form-w.jpg\" border=\"0\" align=\"left\" \/>\u201cTre virgola cinque pagine.\u201d E&#8217; la risposta che d\u00f2 solitamente quando qualcuno mi chiede \u201cquanto dovrebbe essere lunga una form web?\u201d E, che ci crediate o meno, molte persone mi fanno questa domanda. Potrebbe essere la domanda riguardante il design delle form web pi\u00f9 comune che mi viene posta. Cos\u00ec, non sono esattamente estatico che la mia risposta ironica comporti perlopi\u00f9 sguardi vacui e ben poche risate. Vedete, sembra che questo sia un argomento che molte persone prendono abbastanza sul serio.<\/p>\n<p>E fanno bene a prenderlo sul serio. Le form web sono il fulcro della maggior parte degli affari e delle applicazioni online. Sia che siano responsabili del checkout su siti di e-commerce, della comunicazione su applicazioni sociali o di qualsiasi altro tipo di inserimento dati sul web, le form permettono alle persone di portare a termine dei task importanti. E i dettagli della progettazione delle form web hanno una grande influenza su quanto le persone percepiscano il processo di completamento come di successo, efficiente e che le rende felici. Specialmente i dettagli riguardanti la lunghezza della form.<\/p>\n<p>Mi viene spesso chiesto quanto dovrebbero essere lunghe le form web perch\u00e9 i web designer e developers vogliono sapere:<\/p>\n<div class=\"paragrafo\">\n<ul>\n<li>Le form di una pagina si adattano meglio che le form multi-pagina?<\/li>\n<li>Spezzare un form lunga su pi\u00f9 pagine semplifica il processo di compilazione della form?<\/li>\n<li>E cosa mi puoi dire riguardo alle ricche interazioni che gestiscono le sezioni multiple di una form su una sola pagina?<\/li>\n<\/ul>\n<\/div>\n<p>Lasciate che vi dica in prima istanza le cose come stanno: non c&#8217;\u00e8 un numero magico come \u201ctre virgola cinque\u201d che funzioni in tutti i casi. Il vostro audience, le loro intenzioni, i vostri sistemi, le vostre policy e altro ancora definiranno alla fine la soluzione che va bene per il vostro prodotto. Ma potete armarvi di soluzioni progettuali documentate cos\u00ec che quando sar\u00e0 il momento, potrete scegliere la risposta corretta per la vostra specifica situazione.<\/p>\n<p>Una di queste soluzioni \u00e8 quella delle accordion form.<\/p>\n<div class=\"paragrafo\">\n<h2>Accordion form<\/h2>\n<p>Le accordion form usano delle interazioni dinamiche su una singola pagina web per nascondere o rivelare le sezioni di domande correlate man mano che le persone passano attraverso il processo di completamento di una form. Questo permette alle persone di focalizzare la loro attenzione su un solo set di domande per volta, senza richiedergli di navigare attraverso diverse pagine.<\/p>\n<p>Le accordion form hanno il potenziale di essere veramente efficaci perch\u00e9, in generale, nascondere i controlli irrilevanti della form dalle persone fin quando ne hanno bisogno <a href=\"http:\/\/www.lukew.com\/resources\/web_form_design.asp\">risulta in<\/a> form che sono visivamente facili (ad es., meno distraenti) e possono essere completate velocemente. Associate questo con il tempo risparmiato per ricaricare la pagina e fare in modo che le persone si riescano ad orientare in una nuova pagina e le accordion form inizieranno ad apparire come un&#8217;interessante soluzione per aiutare le persone a completare le form pi\u00f9 lunghe su una sola pagina.<\/p>\n<p>Per illustrare la differenza tra una tipica form multi-pagina e una accordion form, non dobbiamo guardare pi\u00f9 in l\u00e0 del <a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?968\">recente ri-design del checkout<\/a> dell&#8217;Apple store. Il precedente processo di checkout di Apple utilizzava diverse pagine web per ottenere le informazioni riguardanti il cliente, la spedizione, il pagamento e le infomazioni dell&#8217;account.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/figure1_sm.png\" border=\"0\" alt=\"Screenshots del Processo di Checkout di Apple\" \/><\/p>\n<p>Fig 1: Il precedente processo di checkout dell&#8217;Apple store si espandeva su diverse pagine web.<\/p>\n<\/div>\n<p>Il <a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?968\">processo di checkout ridisegnato<\/a> ha eliminato le pagine multiple in favore di una sola accordion form che rivela al cliente un solo gruppo di domande alla volta. Come potete vedere nel video seguente, alle persone vengono innanzitutto chieste le informazioni riguardanti la spedizione. Una volta completa, questa sezione scivola verso l&#8217;alto, mostrando le domande riguardanti le opzioni di pagamento. Una volta che sono stati inseriti i dati di pagamento, le domande sulle informazioni dell&#8217;account vengono mostrate e cos\u00ec via finch\u00e9 la form non \u00e8 stata completata.<\/p>\n<div class=\"illustration full left\">\n<object width=\"480\" height=\"385\" data=\"http:\/\/www.youtube.com\/v\/4B4J09pJz1k?fs=1&amp;hl=en_US\" type=\"application\/x-shockwave-flash\"><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><param name=\"src\" value=\"http:\/\/www.youtube.com\/v\/4B4J09pJz1k?fs=1&amp;hl=en_US\" \/><param name=\"allowfullscreen\" value=\"true\" \/><\/object><\/p>\n<p>Video 1: Questo video accelerato del processo di checkout dell&#8217;Apple store mostra una accordion form in azione. Quindi, Apple sta usando le accordion form; voi dovreste?<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Mettiamole alla prova<\/h2>\n<p>Per meglio comprendere come le accordion form influenzino la conversion e l&#8217;usabilit\u00e0, ho lavorato con <a href=\"http:\/\/www.etre.com\/\">Etre<\/a>, un&#8217;azienda specializzata in usabilit\u00e0 con base a Londra, per testare 24 utenti medi (con et\u00e0 variabile tra i 19 ed i 48 anni) su quattro variazioni di una tipica form di checkout di un e-commerce. Abbiamo chiesto alle persone di completare l&#8217;acquisto inserendo delle informazioni riguardanti loro stessi, il loro indirizzo a cui spedire la merce e i loro dati per il pagamento. Queste sono essenzialmente le stesse informazioni che richiede il processo di checkout di Apple, senza lo step aggiuntivo della creazione di un account.<\/p>\n<div class=\"illustration right half\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/figure2_sm.png\" border=\"0\" alt=\"Screenshot di quattro tipiche form di checkout di un e-commerce\" \/><\/p>\n<p>Fig 2: Le quattro variazioni di una tipica form di checkout di un e-commerce che abbiamo testato: a) pagine multiple b) una singola pagina c) accordion con headers d) accordion con pulsanti.<\/p>\n<\/div>\n<p>Il controllo di versione delle nostre quattro form ha separato le domande a cui le persone hanno dovuto rispondere attraverso le pagine multiple. Abbiamo anche testato una versione con tutte le domande su di una singola pagina web e due versioni di una accordion form che mostravano ulteriori set di domande man mano che le persone completavano il set precedente. Una delle nostre accordion form richiedeva che le persone cliccassero sull&#8217;header di una sezione per far espandere ciascun set di domande sulla form. L&#8217;altra faceva uso di un pulsante \u201ccontinua\u201d all&#8217;interno di ciascuna sezione che, quando veniva cliccato, espandeva automaticamente la sezione successiva e riduceva la precedente.<\/p>\n<p>Per ciascuna variante, abbiamo misurato la percentuale di successo, la percentuale di errore, il tempo di completamento, la valutazione della soddisfazione e delle metriche derivate dall&#8217;eye-tracking standard. Abbiamo presentato ciascuna form a caso per minimizzare la tendenza alla familiarit\u00e0.<\/p>\n<p>Ma basta con la preparazione\u2014cosa abbiamo imparato?<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Conversion costante<\/h2>\n<p>Lasciate che vi dia prima la buona notizia. Ciascuna delle form che abbiamo testato ha avuto una percentuale di riuscita del 100%. Questo dato non sorprende del tutto quando consideriamo che il task che avevamo assegnato ai nostri partecipanti era loro familiare, dal momento che ciascun partecipante che avevamo testato aveva utilizzato internet regolarmente da pi\u00f9 di tre anni.<\/p>\n<p>Questo ci dice che semplicemente portando le stesse domande su una lunga pagina web o su diverse pagine web in una accordion form non aumenter\u00e0 probabilmente la conversion\u2014almeno, non per i task comuni come il checkout di un e-commerce.<\/p>\n<p>Il rovescio della medaglia, ovviamente, \u00e8 che le accordion form probabilmente non influenzeranno nemmeno negativamente la conversion. Questa \u00e8 una scoperta importante se considerate che le soluzioni pi\u00f9 innovative nell&#8217;interfaccia utente tipicamente hanno un&#8217;influenza avversa ai conversion rate finch\u00e9 le persone non si abituano ad esse. Sembra che le accordion form non abbiano questo effetto. Potrebbe non spostare l&#8217;ago della bilancia tremendamente verso l&#8217;alto, ma non \u00e8 nemmeno probabile che aumenteranno il vostro conversion rate.<\/p>\n<p>A questo punto, dovrei fare una pausa e ricordarvi che abbiamo testato 24 persone sulle nostre generiche form di e-commerce. Per testare veramente la conversion, niente batte la verifica del vostro effettivo pubblico su un sito vero.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Bisogno di velocit\u00e0<\/h2>\n<p>Dove abbiamo visto una sensibile differenza tra le accordion form, quelle su una singola pagina e quelle su pi\u00f9 pagine che abbiamo usato nei test \u00e8 stato nel tempo di completamento. Le persone erano pi\u00f9 rapide con l&#8217;accordion form basata sui pulsanti che abbiamo usato nei test (opzione D nella Figura 2 sopra). Sorprendentemente, circa 10 secondi pi\u00f9 rapidi perfino nella form su singola pagina (opzione B).<\/p>\n<p>Mentre la velocit\u00e0 di completamento potrebbe non essere di primaria importanza per l&#8217;e-commerce, ci sono molte situazioni online in cui la velocit\u00e0 \u00e8 importante. Le aste online o gli scambi sono i primi a venirmi in mente: non riuscire ad agire rapidamente potrebbe risultare in un&#8217;opportunit\u00e0 persa. Le accordion form potrebbero essere adatte a queste situazioni.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Attorno alle accordion<\/h2>\n<p>La differenza primaria tra le due accordion form che abbiamo testato stava nel modo in cui le persone si sono fatte strada tra le diverse sezioni. La Versione C (Figura 3) richiedeva alle persone di cliccare sull&#8217;header di ciascuna nuova sezione per espandere il contenuto interno ad essa. In questo layout, era sempre visibile un&#8217;azione finale per completare l&#8217;intera form.<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/figure3_sm.png\" border=\"0\" alt=\"Screenshot di una accordion form\" \/><\/p>\n<p>Figura 3: In questa accordion form (versione C), le persone dovevano selezionare ciascun header perch\u00e9 venisse visualizzato il successivo gruppo di domande.<\/p>\n<\/div>\n<p>La Versione D (Figura 4) invece richiedeva che le persone cliccassero su un pulsante di azione primaria all&#8217;interno di ciascuna sezione della form. Selezionando questa azione, il gruppo di domande attualmente aperto viene ridotto e si espande il nuovo set di domande (che contiene anch&#8217;esso un&#8217;azione primaria che permette alle persone di procedere).<\/p>\n<div class=\"illustration full left\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2010\/10\/figure4_sm.png\" border=\"0\" alt=\"Screenshot di una accordion form\" \/><\/p>\n<p>Figura 4: In questa accordion form (versione D), le persone devono selezionare un pulsante di azione primaria per far apparire il successivo insieme di domande.<\/p>\n<\/div>\n<p>Durante i nostri test, poche persone hanno pensato di interagire con gli header mentre procedevano all&#8217;interno delle nostre form. La grande maggioranza dei nostri partecipanti si \u00e8 spostata rapidamente sui pulsanti di azione primaria e vi ha cliccato per procedere con la form. Perfino la nostra etichettatura esplicita del pulsante di azione finale della form (in Figura 3) \u201cPaga e completa l&#8217;ordine \u201d non \u00e8 stato d&#8217;aiuto. Le persone hanno selezionato questa azione per procedere nonostante non avessero ancora inserito alcuna informazione di pagamento. Questo, ovviamente, ha dato come risultato un qualche errore involontario.<\/p>\n<p>La lezione qui \u00e8 che anche quando si sta innovando, si dovrebbero tenere presenti le convenzioni. Sebbene le accordion form possano essere una novit\u00e0 per alcuni, cliccare su un pulsante visivamente prominente per completare una form non lo \u00e8. Il design della form in Figura 4 \u00e8 costruito su un comportamento esistente: l&#8217;espansione della sezione successiva quando qualcuno clicca sull&#8217;azione primaria nella form.<\/p>\n<p>Il design della form in Figura 3 crea una rottura con questo comportamento, forzando le persone ad interagire con dei controlli non-standard della form, come gli header delle sezioni. Questa richiesta fa sembrare le accordion form come estranee e complesse invece che familiari e semplici.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Essere accessibile<\/h2>\n<p>Sebbene i nostri user test non avevano come specifico target le persone con disabilit\u00e0, l&#8217;accesso per chiunque \u00e8 una considerazione progettuale importante. Le form di una sola pagina o le form multi-pagina, quando sono propriamente implementate, sono modelli familiari che gli utenti che usano solo la tastiera e le tecnologie assistive solitamente riescono a gestire. Le accordion form, tuttavia, potrebbero essere un&#8217;altra storia. Per fortuna, il supporto per <a href=\"http:\/\/www.alistapart.com\/articles\/waiaria\">WAI-ARIA<\/a>, che fa in modo che controlli complessi come le accordion possano essere appropriatamente espressi, sta aumentando rapidamente (lo si sta inserendo in HTML5) e potrebbe in definitiva rendere le accordion form pi\u00f9 accessibili.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Altro da imparare<\/h2>\n<p>Il nostro rapido test sembra indicare le accordion form potrebbero avere un interessante futuro online. Potrebbero portare le form multi-pagina in un solo insieme di interazioni dinamiche che\u2014se ben progettate\u2014 non influenzeranno negativamente le conversion rates ma ridurranno il tempo di completamento. Ovviamente, c&#8217;\u00e8 ancora molto da esplorare riguardo il dove, come e quando usare le accordion form. Ma considerate questa soluzione progettuale come una freccia per il vostro arco\u2014pronta all&#8217;uso quando si presenta l&#8217;occasione giusta.<\/p>\n<h3>Ringraziamenti<\/h3>\n<p>Vorrei ringraziare Etre per tutto il loro lavoro di scripting, esecuzione e report per questo studio.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Le web form permettono alle persone di portare a termine dei compiti importanti sui vostri siti; i dettagli della progettazione delle form web hanno un grande impatto su quanto risultino efficaci, efficienti e quanto lascino soddisfatte le persone riguardo questa procedura, in particolar modo, un dettaglio quale la lunghezza. Entrate nel mondo delle form a fisarmonica [accordion, ndt], che nascondono e mostrano dinamicamente delle sezioni di domande correlate tra loro man mano che le persone completano la form, permettendogli di concentrarsi sulle cose importanti e di terminare rapidamente. Che impatto hanno le pi\u00f9 piccole decisioni di progettazione sulla velocit\u00e0 di completamento? Quali scelte progettuali rendono queste innovative form cos\u00ec familiari e semplici? Quali scelte le rendono estranee e complesse, portando le persone a compiere errori?<\/p>\n","protected":false},"author":818,"featured_media":7000594,"comment_status":"open","ping_status":"open","template":"","categories":[279,29,9],"tags":[],"coauthors":[311],"class_list":["post-108","article","type-article","status-publish","has-post-thumbnail","hentry","category-interaction-design","category-numero-15-5-ottobre-2010","category-usabilita"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/108","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=108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000594"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=108"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}