“La progettazione dell'esperienza utente (UX, UXD, UED o XD) \u00e8 il processo per migliorare la soddisfazione degli utenti con un prodotto migliorando l'usabilit\u00e0, l'accessibilit\u00e0 e il piacere forniti nell'interazione con il prodotto<\/em>.”<\/p>\n Usiamo diverse forme sui nostri siti web su quasi tutte le parti. Dai moduli di feedback a pagina di Pagamento<\/a> ogni cosa ha il suo scopo, e se non sono progettate in base a ci\u00f2 a cui sono destinate, falliranno nel servire il loro scopo.<\/p>\n In questo post, spiegher\u00f2 a 6 tali errori in una progettazione di un sito Web che non dovresti mai impegnare se vuoi evitare i balzi e le peggiori esperienze degli utenti sul tuo sito web.<\/p>\n “40% di persone abbandona un sito Web che richiede pi\u00f9 di 3 secondi per il caricamento.<\/em>"-KISSmetrics<\/a>. Questo \u00e8 quando il sito rallentato da 1 sec, immaginare quale sarebbe la reazione se il tuo sito web rifiuti molto pi\u00f9 tempo di quello da solo chiedendo dettagli inutili per compilare sulle forme.<\/p>\n Quindi, non sprecare il loro tempo e la tua conversione chiedendo informazioni "non cos\u00ec importanti". Si noti che esiste una differenza tra informazioni "non necessarie" e informazioni "non cos\u00ec importanti".<\/p>\n Informazioni come "Etnia" o "Luogo di nascita" della persona possono essere ritenute non necessarie per un sito di e-commerce, ma potrebbe essere importante per il sito web di un partito politico. Quindi questo \u00e8 anche discutibile e soggettivo, ma credo che tu abbia avuto l'idea.<\/p>\n I campi "non cos\u00ec importanti" possono essere:<\/p>\n Anche se hai bisogno di questi dettagli non \u00e8 necessario chiedere in una volta, puoi sempre dare un'opzione all'utente per aggiornare il suo profilo. Pensa come Linkedin o Facebook che non chiedono tutto in una volta sola, ma prima ti fanno iscrivere con un minimo di campi 3-5 e poi ti danno la possibilit\u00e0 di aggiornare il tuo profilo in un secondo momento.<\/p>\n Riguarda la presentazione, quindi dovresti chiedere solo i dettagli pi\u00f9 cruciali di cui hai bisogno: Se stai utilizzando il modulo per il feedback, chiedi informazioni sulle loro opinioni e commenti prima di chiedere il loro nome o id di e-mail. Allo stesso modo, se si tratta di un modulo di pagamento, e si dispone gi\u00e0 di determinate informazioni sull'utente, non chiedergli di nuovo, ma pre-compilare il modulo. Ad esempio, \u00e8 possibile precompilare le informazioni nell'indirizzo di fatturazione da per compilare automaticamente il modulo dell'indirizzo di consegna se entrambi gli indirizzi sono uguali.<\/p>\n [Caption id = "attachment_4154" align = "alignCenter" width = "509"] Le etichette vengono utilizzate nei moduli del sito Web per semplificare all'utente la compilazione delle informazioni richieste. Quindi assicurati che le etichette siano posizionate in una posizione corretta che non confonda l'utente su cosa riempirlo. Un allineamento corretto dell'etichetta \u00e8 essenzialmente necessario quando si progetta un modulo reattivo che serve a diverse dimensioni dello schermo. Assicurarsi che le etichette rimangano allineate correttamente su tutte le dimensioni dello schermo in cui viene aperto il modulo.<\/p>\n [Caption id = "attachment_4155" align = "alignCenter" width = "291"] Gli utenti su dispositivi mobili utilizzano lo zoom per vedere chiaramente le etichette sui moduli in modo da riempire le informazioni corrette. Tuttavia, come mostrato nell'immagine sopra, se si mantiene lo stesso allineamento su entrambe le versioni desktop e mobile del modulo, nasconder\u00e0 tutte le etichette facendo clic sul modulo in modalit\u00e0 zoom. Costringer\u00e0 l'utente a ridurre il modulo ogni volta che si sposta alla voce successiva.<\/p>\n Un'opzione migliore per gestire questo sarebbe utilizzare due diversi allineamenti sulla versione desktop e mobile del modulo. Rendi le etichette allineate in alto sulle versioni mobili e mantienile allineato sul desktop.<\/p>\n Con HTML 5, i segnaposti nell'attributo text erano un'aggiunta preziosa. Vengono effettivamente utilizzati per fornire un breve suggerimento su un valore atteso nel campo.<\/p>\n [Caption id = "attachment_4157" align = "alignCenter" width = "620"] In genere un segnaposto rimane visibile finch\u00e9 l'utente non fa clic nel campo. Non appena l'utente fa clic nel campo per digitare qualcosa, il segnaposto svanisce. L'uso di segnaposto nella progettazione di moduli di siti Web \u00e8 altamente confuso con quello delle etichette. Molti designer usano questi segnaposto anzich\u00e9 le etichette per descrivere i campi di input che sperano di ottenere un design pi\u00f9 pulito. Questo \u00e8 un grosso errore che compromette l'esperienza dell'utente.<\/p>\n Prendiamo una situazione quando l'utente riempie una forma lunga come un modulo di pagamento. Dopo aver compilato il modulo, potrebbe voler rivedere i dettagli prima di poter inviare il modulo. Ora, se non ci sono etichette nel modulo, si confonder\u00e0 solo con i dettagli che ha compilato.<\/p>\n [Caption id = "attachment_4158" align = "alignCenter" width = "529"] Quindi, usa sempre un'etichetta. Non usare le etichette potrebbe essere un risparmio di spazio, ma sorprender\u00e0 sapere con quanta facilit\u00e0 le persone dimenticano ci\u00f2 che l'etichetta era una volta che riempivano le informazioni sul campo.<\/p>\n Un altro grosso errore che facciamo nella progettazione di un sito Web consiste nel posizionare troppi elementi su una singola pagina. Pi\u00f9 sono il numero di elementi su una singola pagina in pi\u00f9 \u00e8 la competizione tra di loro per attirare l'attenzione.<\/p>\n La soluzione \u00e8 lasciare uno spazio di respiro tra gli elementi mantenendo gli spazi bianchi. Un flusso adeguato per i tuoi utenti verr\u00e0 fornito solo quando manterrai un'ampia spaziatura attorno ai campi e alle diverse sezioni.<\/p>\n Questo modulo di verifica di una singola pagina mostra come separare sezioni diverse anche se ci sono troppi elementi su una singola pagina. Il modulo utilizza le etichette di sezione per separare sezioni diverse come Opzioni di accesso, Indirizzo di fatturazione, Conferma ordine, Metodo di spedizione e Metodo di pagamento. Inoltre, il layout a tre colonne rende la forma ancora pi\u00f9 pulita.<\/p>\n [Caption id = "attachment_4159" align = "alignCenter" width = "648"] Durante la compilazione dei moduli del sito Web, ci sono alcune possibilit\u00e0 che gli utenti commettano degli errori a causa della quale il modulo non verr\u00e0 inviato. Gli errori possono verificarsi a causa della mancanza di una voce o della compilazione di informazioni errate, ecc. Per affrontare questo sito Web, i progettisti utilizzano convalide di input che mostrano i messaggi di errore durante l'invio del modulo. Usano convalide lato server che in genere attendono la risposta del server per verificare gli errori nel modulo. Questo \u00e8 un errore pi\u00f9 grande che pu\u00f2 persino frustrare l'utente quando vedono un messaggio di errore dopo aver inviato il modulo.<\/p>\n Invece, \u00e8 possibile utilizzare la convalida in linea lato utente che indica sul posto se l'utente sta compilando una voce errata in un campo. In tal modo, gli utenti non mancheranno se hanno inserito qualcosa di sbagliato in un campo.<\/p>\n [Caption id = "attachment_4160" align = "alignCenter" width = "648"] Inoltre, non utilizzare dichiarazioni confuse nei messaggi di convalida. Spiega semplicemente perch\u00e9 la voce \u00e8 sbagliata descrivendo come dovrebbe apparire la voce corretta.<\/p>\n I captcha vengono utilizzati dai siti Web per prevenire gli attacchi di spam, distinguendo un bot dagli umani. Si presume che questi captcha presentino una sfida che sarebbe facile per gli umani, mentre i bot non possono passarli. Per la prevenzione dello spam, a volte, i progettisti diventano cos\u00ec disperati da integrare i captcha che sono impegnativi anche per gli umani.<\/p>\n [Caption id = "attachment_4161" align = "alignCenter" width = "319"] Capisco che la prevenzione dello spam \u00e8 importante, ma captcha pu\u00f2 essere fonte di confusione e di sfida per gli utenti per decodificarli. Puoi utilizzare una soluzione alternativa del cosiddetto Google re-Captcha, che \u00e8 una versione pi\u00f9 avanzata e semplice. Il nuovo re-Captcha di Google richiede semplicemente all'utente di fare clic su una casella di controllo e la verifica viene eseguita senza inserire un messaggio di testo difficile da visualizzare.<\/p>\n [Caption id = "attachment_4162" align = "alignCenter" width = "319"] Infine<\/strong>,<\/p>\n Il miglioramento dell'esperienza utente \u00e8 un processo continuo che pu\u00f2 essere ottenuto solo con aggiornamenti regolari utilizzando i migliori metodi disponibili. Spero che la descrizione di questi errori di progettazione ti consenta di raggiungere tale miglioramento non commettendo questi errori su nessuna delle forme che utilizzi sul tuo sito web.<\/p>\n Storie correlate:<\/strong><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" UI (User Interface) e UX (User Experience) hanno un ruolo importante nel web design di conversione amichevole. L'interfaccia utente rende il tuo sito Web bello e UX si concentra sull'usabilit\u00e0 e sulla semplicit\u00e0 del sito web. Se uno di questi due manca o non \u00e8 equilibrato, il risultato \u00e8 quello di far rimbalzare i clienti. […]<\/p>\n","protected":false},"author":1,"featured_media":4165,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kbui_enabled":"","footnotes":""},"categories":[4],"tags":[],"class_list":["post-18550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce-blog"],"acf":[],"yoast_head":"\n1. Richiesta di troppe informazioni da parte dell'utente<\/h2>\n
\n
![\"trasporto-fatturazione-informazione\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/drupal-commerce-shipping-copy-profile-info-checkou.png\")
<\/a> Pre-popolamento delle informazioni da una forma all'altra pu\u00f2 far risparmiare tempo e fatica agli utenti [\/ didascalia]<\/p>\n2. Posizionamento delle etichette ambiguo o non reattivo-<\/h2>\n
![\"Modulo](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/1-291x300.jpeg\")
<\/a> Modulo di contatto mobile [\/ caption] ![\"screen-dimensioni-raccomandata-scelta\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/yyy-300x221.jpeg\")
La maggior parte dei moduli di siti Web utilizza gli stessi posizionamenti di etichette su tutte le dimensioni dello schermo che non \u00e8 una scelta consigliata [\/ didascalia]<\/p>\n3. Sostituzione di etichette con segnaposto-<\/h2>\n
![\"suggerimento-about-prevede-value-in-form-field\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/3.png\")
<\/a> I segnaposto forniscono un breve suggerimento sui valori previsti nel campo modulo [\/ didascalia]<\/p>\n![\"segnaposto\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/4.png\")
<\/a> L'uso di segnaposti al posto delle etichette confonder\u00e0 i tuoi clienti soprattutto in forme lunghe [\/ didascalia]<\/p>\n4. Utilizzo di spaziatura insufficiente e layout distorto<\/h2>\n
![\"segreganti-prevenire-ingombrare\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/5-1024x863.png\")
<\/a> La separazione di sezioni diverse previene l'ingombramento tra diverse sezioni [\/ didascalia]<\/p>\n5. Messaggi di errore incerti e convalide di input<\/h2>\n
![\"Inline-convalida\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/6-1024x486.jpeg\")
<\/a> La convalida in linea per verificare e mostrare gli errori in loco previene l'invio di moduli per la frustrazione [\/ caption]<\/p>\n6. Usando Captcha che non sono progettati per l'uomo<\/h2>\n
![\"prevenire](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/8.jpeg\")
<\/a> Captcha che impedisce lo spam ma frustra gli utenti umani [\/ didascalia]<\/p>\n![\"Google](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2017\/04\/9.png\")
<\/a> Google re-Captcha \u00e8 relativamente pi\u00f9 user-friendly nonostante sia difficile con i bot [\/ caption]<\/p>\n\n