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à e sulla semplicità del sito web. Se uno di questi due manca o non è equilibrato, il risultato è quello di far rimbalzare i clienti. La progettazione di moduli di siti Web è quella parte del web design che assicura lead generation e raccolta di informazioni senza interruzioni con la corretta soddisfazione dell'utente su un sito web. In questo blog ci concentreremo principalmente su UX in quanto l'interfaccia utente è qualcosa di molto soggettivo e verrà definito dalle linee guida di branding della tua azienda o dalla tua scelta di colori, banner e caratteri.
Wikipedia dice:
“La progettazione dell'esperienza utente (UX, UXD, UED o XD) è il processo per migliorare la soddisfazione degli utenti con un prodotto migliorando l'usabilità, l'accessibilità e il piacere forniti nell'interazione con il prodotto.”
Usiamo diverse forme sui nostri siti web su quasi tutte le parti. Dai moduli di feedback a pagina di Pagamento ogni cosa ha il suo scopo, e se non sono progettate in base a ciò a cui sono destinate, falliranno nel servire il loro scopo.
In questo post, spiegherò 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.
1. Richiesta di troppe informazioni da parte dell'utente
“40% di persone abbandona un sito Web che richiede più di 3 secondi per il caricamento."-KISSmetrics. Questo è quando il sito rallentato da 1 sec, immaginare quale sarebbe la reazione se il tuo sito web rifiuti molto più tempo di quello da solo chiedendo dettagli inutili per compilare sulle forme.
Quindi, non sprecare il loro tempo e la tua conversione chiedendo informazioni "non così importanti". Si noti che esiste una differenza tra informazioni "non necessarie" e informazioni "non così importanti".
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 è anche discutibile e soggettivo, ma credo che tu abbia avuto l'idea.
I campi "non così importanti" possono essere:
- ID e-mail aggiuntivo
- Numero di telefono aggiuntivo
- Data di nascita
- Numero di Fax
- Domanda di sicurezza e risposta
- Numero di previdenza sociale ecc.
Anche se hai bisogno di questi dettagli non è 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à di aggiornare il tuo profilo in un secondo momento.
Riguarda la presentazione, quindi dovresti chiedere solo i dettagli più 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à di determinate informazioni sull'utente, non chiedergli di nuovo, ma pre-compilare il modulo. Ad esempio, è possibile precompilare le informazioni nell'indirizzo di fatturazione da per compilare automaticamente il modulo dell'indirizzo di consegna se entrambi gli indirizzi sono uguali.
[Caption id = "attachment_4154" align = "alignCenter" width = "509"]
Pre-popolamento delle informazioni da una forma all'altra può far risparmiare tempo e fatica agli utenti [/ didascalia]
2. Posizionamento delle etichette ambiguo o non reattivo-
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 è 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.
[Caption id = "attachment_4155" align = "alignCenter" width = "291"]
Modulo di contatto mobile [/ caption] 
La maggior parte dei moduli di siti Web utilizza gli stessi posizionamenti di etichette su tutte le dimensioni dello schermo che non è una scelta consigliata [/ didascalia]
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à tutte le etichette facendo clic sul modulo in modalità zoom. Costringerà l'utente a ridurre il modulo ogni volta che si sposta alla voce successiva.
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.
3. Sostituzione di etichette con segnaposto-
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.
[Caption id = "attachment_4157" align = "alignCenter" width = "620"]
I segnaposto forniscono un breve suggerimento sui valori previsti nel campo modulo [/ didascalia]
In genere un segnaposto rimane visibile finché 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 è altamente confuso con quello delle etichette. Molti designer usano questi segnaposto anziché le etichette per descrivere i campi di input che sperano di ottenere un design più pulito. Questo è un grosso errore che compromette l'esperienza dell'utente.
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à solo con i dettagli che ha compilato.
[Caption id = "attachment_4158" align = "alignCenter" width = "529"]
L'uso di segnaposti al posto delle etichette confonderà i tuoi clienti soprattutto in forme lunghe [/ didascalia]
Quindi, usa sempre un'etichetta. Non usare le etichette potrebbe essere un risparmio di spazio, ma sorprenderà sapere con quanta facilità le persone dimenticano ciò che l'etichetta era una volta che riempivano le informazioni sul campo.
4. Utilizzo di spaziatura insufficiente e layout distorto
Un altro grosso errore che facciamo nella progettazione di un sito Web consiste nel posizionare troppi elementi su una singola pagina. Più sono il numero di elementi su una singola pagina in più è la competizione tra di loro per attirare l'attenzione.
La soluzione è lasciare uno spazio di respiro tra gli elementi mantenendo gli spazi bianchi. Un flusso adeguato per i tuoi utenti verrà fornito solo quando manterrai un'ampia spaziatura attorno ai campi e alle diverse sezioni.
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ù pulita.
[Caption id = "attachment_4159" align = "alignCenter" width = "648"]
La separazione di sezioni diverse previene l'ingombramento tra diverse sezioni [/ didascalia]
5. Messaggi di errore incerti e convalide di input
Durante la compilazione dei moduli del sito Web, ci sono alcune possibilità che gli utenti commettano degli errori a causa della quale il modulo non verrà 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 è un errore più grande che può persino frustrare l'utente quando vedono un messaggio di errore dopo aver inviato il modulo.
Invece, è 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.
[Caption id = "attachment_4160" align = "alignCenter" width = "648"]
La convalida in linea per verificare e mostrare gli errori in loco previene l'invio di moduli per la frustrazione [/ caption]
Inoltre, non utilizzare dichiarazioni confuse nei messaggi di convalida. Spiega semplicemente perché la voce è sbagliata descrivendo come dovrebbe apparire la voce corretta.
6. Usando Captcha che non sono progettati per l'uomo
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ì disperati da integrare i captcha che sono impegnativi anche per gli umani.
[Caption id = "attachment_4161" align = "alignCenter" width = "319"]
Captcha che impedisce lo spam ma frustra gli utenti umani [/ didascalia]
Capisco che la prevenzione dello spam è importante, ma captcha può essere fonte di confusione e di sfida per gli utenti per decodificarli. Puoi utilizzare una soluzione alternativa del cosiddetto Google re-Captcha, che è una versione più 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.
[Caption id = "attachment_4162" align = "alignCenter" width = "319"]
Google re-Captcha è relativamente più user-friendly nonostante sia difficile con i bot [/ caption]
Infine,
Il miglioramento dell'esperienza utente è un processo continuo che può 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.
Storie correlate:
- 5 Elementi del sito che possono deludere i tuoi clienti E-Commerce
- 5 surefire modi per raccogliere i dati di posta elettronica sul tuo negozio online
- 6 Checkout Pagina Errori che potrebbero causare la morte delle tue conversioni
- Suggerimenti 6 per creare un'efficace campagna promozionale su Prestashop
- 6 Motivi per cui hai bisogno di un'app mobile Magento per il tuo Fashion Store
