Questa è la traduzione dell'articolo Dynamic Help in Web Forms di Luke Wroblewski, pubblicato originariamente su UXmatters il 21 Maggio 2007. La traduzione viene qui presentata con il consenso dell'editore (UXmatters) e dell'autore.
Molti designer di applicazioni web si sforzano di ridurre la quantità di testo esplicativo che appare nelle interfacce utente da loro create. Una possibile spiegazione di questo fatto si ritrova nell’impressione che, se spiegare come utilizzare qualcosa richiede troppe istruzioni, vorrà dire che probabilmente non è semplice da utilizzare e, perciò, vi è margine di miglioramento per il design. Una seconda motivazione potrebbe essere la tendenza di molti a non leggere nessuna delle istruzioni poste sullo schermo, esattamente come non si curano di leggere il manuale di istruzioni di alcuni prodotti.
Questo tipo di ragionamento si può applicare anche ai form del web. Quando possibile, i designer si impegnano sempre ad utilizzare pochi testi per spiegare agli utenti come completare i vari campi di input in un form. Nei casi in cui i form richiedano tassativamente delle spiegazioni addizionali o degli esempi, un piccolo e chiaro testo accanto a un campo di input può essere un ottimo trucco, come mostrato nella figura 1.
Un conciso testo d’aiuto, posto accanto ad un campo di input, è molto utile se:
- si richiedono dati su cose poco familiari per l'utente – Cos’è il codice PAC?
- le persone si domandano perché certi dati sono necessari – Perché vi serve la mia data di nascita?
- vi sono modi specifici per fornire dei dati – Separate gli elementi utilizzando le virgole
- certi campi di dati sono facoltativi.
Ad ogni modo, esistono diversi tipi di form che richiedono dati particolari, perché formati unici oppure perché hanno delle limitazioni nell'input. In tali circostanze, la quantità di testi d’aiuto necessari per ogni campo di input potrebbe facilmente inondare un form, rendendolo relativamente complesso o addirittura intimidatorio. Per questo tipo di form, potrebbe essere conveniente prendere in considerazione un aiuto contestuale dinamico. Dato il continuo aumento di sistemi d’aiuto apparsi su internet, ho pensato di catalogare i vari tipi che ho incontrato.
Il comportamento delle persone può automaticamente condizionare l’accesso ai sistemi d’aiuto. I sistemi automatici mostrano testi d’aiuto quando gli utenti utilizzano un dato form. Azioni quali il muoversi tra vari campi del form oppure tra diversi gruppi di elementi delllo stesso form portano alla visualizzazione di utili testi d’aiuto. Sistemi d’aiuto attivabili dall’utente, d’altro lato, richiedono specifiche azioni per poter rivelare importanti testi d’aiuto.
Visualizzazione automatica
Sistemi d’aiuto in linea automatici compaiono dove e quando sono maggiormente applicabili le informazioni che contengono. Per esempio, quando un utente preme o si sposta su un campo di input, l’appropriato testo d’aiuto apparirà accanto o sotto tale campo. La figura 2 mostra questo comportamento in un form su Wufoo.
Alcuni siti espongono automaticamente un testo d’aiuto in linea per una serie di campi relazionati tra di loro piuttosto che uno individuale. Come si mostra nella figura 3, l’applicazione SnapTax evidenzia automaticamente l’elemento rilevante per ogni gruppo di informazioni: identità, consorte, indirizzo e così via.
È importante notare come entrambi questi esempi utilizzino un forte elemento visuale per comunicare le relazioni tra il campo di input e l’aiuto ad essi associato:
- nella dimostrazione con Wufoo – due rettangoli allineati;
- nella dimostrazione con SnapTax – un colore di sfondo comune.
Un potenziale inconveniente di questo tipo di sistema di aiuto automatico è che le persone probabilmente non sapranno della presenza di testi d’aiuto disponibili finché essi non iniziano a completare il form. Poche volte nella presentazione di questi form vengono indicati gli aiuti disponibili. Come risultato, utenti che sentono la necessità di essere guidati nel completamento di un form potrebbero sentirsi scoraggiati o addirittura rinunciare.
Visualizzazione in linea attivata dall’utente
Una tecnica alternativa di visualizzazione è quella che lascia alle persone l’accesso ai testi d’aiuto soltanto quando ne hanno bisogno. Questo sistema normalmente utilizza grandi quantità di icone, bottoni, immagini o link di testo per mostrare all’utente la disponibilità di aiuti. Egli potrà cliccare o puntare uno di questi bottoni speciali per far comparire il testo d’aiuto necessario.
Aggiungere i testi d’aiuto ad un form in questa maniera può causare qualche problematica, come spostare gli altri contenuti preesistenti più in basso nella pagina. La figura 4 mostra come il testo d’aiuto ha spostato un altro campo di input più in basso nella pagina. Il continuo spostamento di elementi nella pagina può disorientare l’utente. Un altro potenziale inconveniente di questa tecnica è la possibilità di dover mostrare l’aiuto differentemente, dipendendo dai vari campi di input – oppure set di campi – ai quali si applica. Un insieme di checkbox o di menu a tendina potrebbe richiedere un posizionamento differente del testo d'aiuto rispetto ad un semplice campo di testo isolato.
Utilizzare un rollover per visualizzare un testo d’aiuto, come si mostra nella figura 5, non richiede l’inserimento di contenuti in un form ed inoltre evita quell’effetto di salto della esposizione inline. Tuttavia, le interazioni con rollover necessitano che l’utente mantenga il puntatore del mouse continuamente posizionato su questi elementi. Aumentare la dimensione dell’area di attivazione del rollover renderà più semplice per gli utenti attivare i contenuti.
Il punto di domanda viene considerato il simbolo più comune per mostrare il testo d’aiuto, ma come chiaramente si vede nella figura 6, ci sono molti altri elementi che possono essere usati. Indipendentemente dall’utilizzo di un’icona, di un pulsante, di un testo o una combinazioni di elementi che mostrano all’utente la presenza di un aiuto, è sempre un’ottima idea includere alcuni tipi di supporti visuali per indicare quali elementi sono attivabili – come per esempio un oggetto in rilievo oppure una sottolineatura al testo.
Sezione d'aiuto attivata dall'utente
Alcuni siti mostrano aiuti attivabili dall’utente in un luogo fisso su una pagina invece di visualizzarlo adiacente ai campi di input. Utilizzare un’area consistente dove appare il testo d’aiuto, può fornire un’area di visualizzazione maggiore per contenuti di aiuto estensivi e così può andare incontro alle aspettative dell’utente riguardo ad un posto fisso in cui può incontrare il testo d’aiuto, come si mostra nella figura 7.
Su eBay il form “Vendi”, come mostra la figura 8, utilizza un pannello d’aiuto che lo stesso utente può far comparire o scomparire cliccando un’icona di aiuto generale, posta sopra il form. Il contenuto nel pannello si aggiorna con testi d’aiuto contestualmente rilevanti quando una persona clicca una delle icone vicina ad ognuno dei campi di input. Quando è aperto, il pannello di aiuto si può automaticamente aggiornare con contenuti importanti mentre l’utente si muove da un campo all’altro, completando il form.
In conclusione
Ognuno di questi sistemi di aiuto dinamici per i form ha vantaggi e svantaggi. Così come per tutte le decisioni che riguardano il design, capire le necessità e gli interessi produttivi dell’utente può farci capire quale di questi sistemi di aiuto sia più idoneo per il vostro form.
Traduzione a cura di Nicole Brioschi.
