4 Suggerimenti per la progettazione di moduli UX da conoscere (con esempi)

Tendiamo a pensare alle forme come a un semplice mezzo per raccogliere i dati degli utenti, ma a volte sono anche a senso unico l'unico modo, per i nostri utenti Mettiti in comunicazione con noi. Probabilmente è illusorio pensare di poter creare utenti amore compilando moduli, tuttavia è certamente possibile per trovare soluzioni che non li infastidiscano troppo, e aiutarli nel processo.

Navigando in rete possiamo trovare soluzioni a volte sorprendenti che sono programmaticamente corrette, ma progettate in un modo che molto probabilmente fa sì che molti utenti abbandonino il sito a causa della scarsa esperienza utente.

Se i nostri moduli sono progettati bene, saremo in grado non solo di soddisfare i nostri utenti, ma anche il team di back-end che può gestire molto meno errori di input dell'utente. Quindi, in questo articolo, daremo un'occhiata a come possiamo minimizzare gli errori di input dell'utente e ancora mantenere i nostri utenti felici.

Anticipare le esigenze degli utenti

Siti web e applicazioni hanno basi utente e obiettivi diversi, e anche la stessa posizione può ospitare molte forme che raccolgono diversi tipi di dati, solo per citare i più frequenti:

• Moduli di accesso
• Moduli di registrazione
• Moduli del profilo utente
• Moduli di iscrizione alla newsletter
• Moduli di pagamento
• Sondaggi degli utenti
• Moduli di contatto
• Moduli di commento
• Forme di ricerca

Tutti questi tipi di forme richiedono cose diverse. Quando si progetta un modulo di checkout è fondamentale garantire in modo credibile agli utenti la sicurezza, mentre nel caso di moduli di commento è una buona idea aggiungi emoji o altri metodi che consentano agli utenti di esprimere il loro stato d'animo.

Tuttavia, anche i tipi di moduli simili potrebbero dover essere progettati diversamente, come tutti i siti hanno base utente unica. Prima di intraprendere il processo di progettazione, è sempre una buona idea anticipare ciò di cui i nostri utenti hanno bisogno, e progettare di conseguenza.

Esempio: accessi social indirizzati alle esigenze degli utenti

Il modulo di accesso di Codepen contiene tre accessi social con Github in alto. Questa scelta sarebbe irragionevole per la maggior parte dei siti.

Ma è perfetto per Codepen, poiché la loro base di utenti è composta da sviluppatori, molti dei quali vorranno effettuare il login con i loro account Github o collegare i loro account di sviluppo l'uno con l'altro contemporaneamente.

Pensa a Mobile-First

Gli utenti mobili e desktop hanno esigenze diverse, ma come completare le forme è una sfida molto più grande su uno schermo mobile, usando i gesti delle mani rispetto a una tastiera fisica, a approccio mobile-first può portarci oltre quando vogliamo progettare forme utilizzabili.

Inoltre, molti modelli di interfaccia utente che funzionano bene su dispositivi mobili funzioneranno bene anche su desktop.

Esempio: controlli tappabili

Le forme mobili di alta qualità non possono essere immaginate senza controlli visibili in cui gli utenti mobili possono facilmente toccare con le dita.

Il modulo di iscrizione alla newsletter della conferenza sul web design An Event Apart si adatta al modo in cui gli utenti mobili accedono allo schermo, che contiene due campi di input facili da toccare e a pulsante di dimensioni di un dito.

I campi di inserimento del testo sono più alti del solito in modo che gli utenti mobili possano toccarli facilmente, e il grande pulsante arancione con l'icona di spunta incoraggia ulteriormente gli utenti a inviare il modulo.

La versione desktop del sito usa lo stesso design del modulo, come sembra buono e funziona bene su schermi più grandi.

Esempio: ingresso spendibile

Quando si progettano moduli per dispositivi mobili, è sempre importante considerare come possiamo minimizzare lo spazio che usiamo. Il input spendibili Il modello di progettazione dell'interfaccia utente è diventato piuttosto popolare ultimamente e funziona particolarmente bene sui dispositivi mobili.

Booking.com sfrutta questo modello nel modulo di ricerca sul suo sito mobile. Quando l'utente tocca il campo di ricerca si espande per lasciare più spazio per i gesti, e una lista di selezione con raccomandazioni appare anche sotto di essa.

Quando l'utente tocca fuori dal campo, si restringe e le informazioni extra scompaiono.

Esempio: pulsante Morphing

Pulsanti di Morphing porta il modello di input spendibile ancora di un passo, in quanto gli utenti vedono prima un pulsante, che poi si trasforma in una forma quando lo toccano.

Lo screenshot qui sotto è tratto dal brillante articolo di Startup sull'innovativo design delle forme, che presenta anche molte altre soluzioni creative.

Facilitare l'ingresso in ingresso

Forme lunghe tendono a scoraggiare gli utenti. Il meglio che possiamo fare è chiedi solo l'input di cui abbiamo veramente bisogno. Questo non è importante solo dal punto di vista dell'esperienza utente, ma gli utenti possono anche esitare a fornire troppe informazioni personali a causa di preoccupazioni relative alla privacy.

A volte, tuttavia, noi ancora devono andare insieme a forme più lunghe. In questo caso è una buona idea affettarli in pezzi più piccoli, e servire i pezzi come schermi successivi.

Molti siti di e-commerce (ad esempio Amazon) utilizzano questa soluzione per ridurre i tassi di abbandono del carrello.

Se vogliamo semplificare il completamento dei campi modulo, la regola generale è di ridurre sia le distrazioni che le azioni dell'utente per quanto possibile.

Esempio: selettore di input personalizzato

Diversi raccoglitori di contenuti, come i raccoglitori di date o i selettori di colori, non solo semplificano l'inserimento del giusto input, ma rendono anche il modulo più attraente, e in modo significativo ridurre gli errori degli utenti.

L'app per la raccolta di elenchi Todoist dà suggerimenti personalizzati all'interno del selettore di date quando l'utente si posiziona nei giorni.

Ad esempio sullo screenshot qui sotto, l'utente può vedere che per il 31 agosto ha già 2 compiti a scadenza, e può tenere conto di queste informazioni al momento di decidere la data giusta per le attività. È un'idea eccellente per un'app in cui la produttività è la preoccupazione principale dell'utente.

Esempio: trascinamento della selezione

Disegni drag-and-drop di solito funzionano bene con i campi di caricamento dei file, in particolare dove gli utenti devono caricare le immagini.

Probabilmente non riducono le azioni degli utenti rispetto al normale pulsante Carica un file, ma lo rendono molto più facile scegli il file che l'utente desidera caricare, quindi riducendo la possibilità di inviare un file sbagliato.

WordPress.com fornisce un'interfaccia di input utente drag-and-drop elegante e intuitiva nella sua forma di editor di post. Il piccole miniature e il rappresentazione visiva dei file già caricati aiutare ulteriormente gli utenti a eseguire rapidamente il caricamento.

Esempio: sovrapposizione per rimuovere distrazioni

Se gli utenti sono distratti mentre completano il nostro modulo, sono più inclini agli errori e si infastidiscono anche più facilmente

Sovrapposizioni di contenuti sono un'ottima alternativa al design minimalista della forma. Sono usati da siti più complessi che vogliono mostrare diversi tipi di informazioni sullo stesso schermo.

Nello screenshot qui sotto, puoi vedere la versione desktop di Booking.com. Quando gli utenti si posizionano sul modulo di ricerca ottiene il resto del contenuto coperto da una sovrapposizione grigiastro per aiutarli concentrati sul processo di compilazione del modulo.

Dai un feedback agli utenti

Dare il feedback corretto al momento giusto può migliorare significativamente l'esperienza dell'utente.

Nel design del modulo, ci sono due tipi di feedback degli utenti:

1. Feedback dato prima modulo di invio - in modo da ridurre gli errori e forma i tassi di abbandono, come ad esempio progress tracker, convalida dell'input istantaneo che premia immediatamente gli utenti per l'input corretto o tooltip di aiuto
2. Feedback dato dopo modulo di invio - per far sapere agli utenti hanno commesso un errore, come messaggi di errore

Il tipo di feedback degli utenti che i nostri utenti necessitano altamente dipende dalle caratteristiche del nostro target di riferimento e dall'obiettivo del nostro sito.

Esempio: Progress Tracker

I moduli più lunghi di una pagina, come i sondaggi e la maggior parte dei moduli di checkout per l'e-commerce, possono fare leva sul progress tracker design pattern. I tracker dei progressi danno un feedback visivo istantaneo agli utenti del loro stato e incoraggiarli a proseguire con il processo.

L'app Web di creator di sondaggi SnapSurveys mostra un piccolo indicatore di avanzamento proprio sopra i pulsanti di invio in modo che gli utenti possano farlo naturalmente avvistarlo.

lui progress tracker non usa etichette, ma il modo in cui è progettato rende chiaro il suo obiettivo - il numero di cerchi indica il numero di passaggi, i passaggi già eseguiti diventano blu e gli utenti possono facilmente vedere quanti passaggi sono ancora in anticipo su di essi.

Esempio: convalida in tempo reale

Utilizzano i rivenditori di cosmetici di Body Shop convalida in tempo reale sul suo modulo Profilo utente per eliminare gli errori e migliorare l'UX del processo di completamento del modulo.

Gli input vengono controllati mentre gli utenti completano il modulo e le risposte corrette e sbagliate vengono immediatamente indicate da icone facilmente distinguibili un po 'più a destra ma ancora nell'area visibile.

Esempio: descrizioni comandi espressive

Microcopia comprensibile è anche una parte essenziale del feedback degli utenti di successo nella progettazione dei moduli. Per definizione, il microcopy di un sito Web è costituito da piccoli pezzi di testo utilizzato in diversi elementi: etichette, pulsanti, messaggi di errore, descrizioni comandi, ecc.

Nel suo modulo di login, il gruppo bancario di Barclay risponde alle domande che gli utenti potrebbero potenzialmente chiedere con l'aiuto di tooltips ben progettati questo include microcopia facile da capire.

I tooltip sono nascosti dietro a poco? icone non distrarre gli utenti chi sa come completare il modulo di accesso, ma essere sempre presente per gli utenti che non sono sicuri.

Alcuni dei tooltip contengono persino una piccola visuale di una carta di debito annotata in modo che gli utenti possano trovare facilmente i dati che devono inserire nel modulo di accesso.