risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come indicare chiaramente all'utente quali caratteri sono validi

Sto cercando di determinare il modo migliore per informare l'utente che un input accetta determinati caratteri speciali. Gli alfanumerici sono abbastanza semplici, ma mi sento come se stessi perdendo chiarezza quando arrivo a personaggi come. e -. Uno stile che ho provato è questo:

Valid characters include A-z, 0-9, and (._-).

Dove la parentesi racchiude i caratteri validi, ma quando la parentesi non è valida, sembra troppo facile per loro essere confusi come parte dell'elenco.

Lo stile a cui mi sto appoggiando è il seguente:

Valid Characters include A-z, 0-9, '.', '_', and '-'.

Ma mi sento come se le virgolette singole ingombrassero le cose e rendessero facile perdersi nella lista, specialmente mentre cresce. Esiste un modo per trasmettere queste informazioni che sono accettate come "migliori", o in realtà ci sono modi migliori per farlo interamente?

39
MildWolfie

Il disordine è problematico. Enfatizzare i caratteri validi potrebbe essere sufficiente. Per esempio.:

I caratteri validi sono A - Z a - z -9._-.

Visualizzarli con colori diversi potrebbe anche aiutare.

48
NonNumeric

Ecco qualche consiglio:

  • vietare i caratteri solo se è assolutamente necessario (odio quando non posso usare _ nel mio soprannome)
  • visualizza un messaggio solo per l'utente che tenta di utilizzare uno di questi. Gli altri utenti non saranno disturbati
  • se l'utente inserisce un carattere proibito, non considerarlo e spiegargli il perché.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

32
Renaud

Vorrei suggerire di menzionare i caratteri non consentiti, poiché il numero di caratteri non validi è sempre inferiore per qualsiasi input richiesto. Ciò contribuirà a ridurre il disordine. Vedi l'esempio fornito da Windows Explorer.

enter image description here

13
SSuad

È possibile visualizzare blocchi di ogni tipo di carattere, in questo modo:

Caratteri consentiti:A-Za-z0-9-_.

12
rybo111

Tralascerei la A-z e forse anche lo 0-9, dato che questi dovrebbero ovviamente essere ammessi. Per i caratteri aggiuntivi andrei con i loro nomi piuttosto che con i simboli

Puoi anche usare il trattino basso, il trattino e il punto.

10
Roman Reiner

tl; dr

Dovresti mostrare tutti validi o tutti caratteri non validi prima l'utente inizia a digitare nel campo. Questo dovrebbe essere un suggerimento. Resta breve, facile da capire e semplice.

Dimostrazione

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Spiegazione approfondita

Segnaposto di esempio

Utilizzare i campi con un segnaposto che mostra un input di esempio valido. I segnaposto di esempio indicano il formato preferito dell'input. Ciò potrebbe essere utile, ad esempio, nel campo di un numero di telefono.

Messaggio in primo piano

Visualizza un'etichetta fissa o un fumetto pop-up quando l'utente accede al campo.
L'utente vedrà il suggerimento prima che inizi a inserire l'input, in modo che possa pensare a un valore diverso se quello che voleva l'ingresso non è corretto. Questo risolve anche la possibile domanda che un utente farebbe prima di dare l'input: "cosa devo scrivere qui? Il mio input sarà corretto?".

Elenco di caratteri breve e in grassetto

Usa una forma abbreviata dei caratteri validi come "a-z" e non qualcosa come "solo alfanumerico".
È molto più facile supervisionare e comprendere i personaggi accettati. Non devi scoprire il significato di parole come: "ok, i caratteri alfanumerici sono caratteri dalla a alla z con i numeri". Chiarisce anche l'oscurità come: "sono consentite lettere maiuscole?".

Vorrei anche raccomandare @ Soluzione di NonNumeric con l'uso in grassetto nell'elenco dei caratteri consentiti. Questo guida l'attenzione sull'essenza del messaggio popup.

Feedback sulla sfocatura

Dopo che l'utente ha riempito il campo e lo stato attivo viene perso, è necessario convalidare il campo.

  • Se l'input è valido, mostra un segno di spunta che indica l'input valido.
  • Se l'input non è valido, lascia il popup lì e rendilo rosso o il campo utente (o entrambi), quindi indicherà che qualcosa è andato storto.

Grazie a ciò, se l'utente ha perso la guida prima di digitare, ha un feedback dopo il suo input. Gli errori/i segni di spunta semplificano anche la panoramica del modulo compilato.

3
totymedli

Un modo per affrontarlo è quello di non dire nulla e poi far sapere all'utente quando viene inserito un carattere non consentito. Se si utilizza la convalida in linea e si applica dopo l'inserimento di ciascun carattere, l'utente (quasi) non avrà nemmeno bisogno di essere informato di quale personaggio era proibito.

Dipende da cosa dovrebbe andare sul campo. Se i dati che devono essere inseriti nel campo seguono una determinata forma (ad esempio un codice postale o qualcosa del genere), esiste un numero molto limitato di caratteri che dovrebbe finire lì. Il tipo di errore e modi molto alternativi di digitare i dati saranno gestiti dal messaggio di errore e il resto fluttuerà senza nemmeno accorgersene.

È possibile che il campo sia creato per dati con meno convenzioni attorno al suo formato. In tal caso, il numero di ingressi errati può raggiungere livelli inaccettabili e sono necessarie istruzioni pre-ingresso.

Sia nel messaggio di errore in linea che nel caso in cui sia necessario un testo informativo, preferisco scrivere "Lettere e numeri" piuttosto che "AZ, aZ, 0-9" perché è molto più facile da capire e puoi salvare il disordine per i personaggi speciali.

Es: Per favore, usa solo lettere, numeri e questi caratteri speciali (_. -)

1
Babossa

Direi che la soluzione migliore è utilizzare una struttura simile a una tabella per etichettare e isolare chiaramente ogni regola:

[~ ~ #] css [~ ~ #]

table{
    border-collapse:collapse;
}
td{
    padding:3px 6px 3px 6px;
    vertical-align:top;
    border:solid 1px #000;
}

[~ ~ #] HTML [~ ~ #]

<h3>Allowed characters</h3>
<table>
    <tr><td>Alphabet: lower-case and UPPER-case</td><td>A through Z<br>a through z</td></tr>
    <tr><td>Numbers</td><td>0 through 9</td></tr>
    <tr><td>Punctuation: period, underscore, hyphen</td><td>.<br>_<br>-</td></tr>
</table>

http://jsfiddle.net/F74L8/

Quindi ora se la tua lista cresce, allora non devi preoccuparti di futuri personaggi che pasticciano con qualsiasi tipo di formattazione che potresti aver scelto per i personaggi precedenti.

1
MonkeyZeus

Se permetti solo tutti i caratteri utf8 come input, non devi preoccuparti di come spiegarlo all'utente. E ti farà risparmiare un grosso mal di testa quando diventerai globale con la tua app/sito web.

Se devono inserire una e-mail, puoi scrivere "questo indirizzo e-mail non è valido secondo lo standard Internet RFC". È molto più facile e le persone capiranno perché devono inserire solo quei personaggi invece di pensare che tu sia un cattivo.

0
awsm

Al fine di evitare tutto il disordine, ma per fornire comunque tutte le informazioni descrittive che desideri in anticipo, potresti avere un "link" vicino al campo di input che dice qualcosa del tipo "Quali caratteri sono validi qui". Quando una persona sposta il mouse (passa il mouse sopra il link) sul collegamento, viene visualizzata una "descrizione comandi" che descrive ciò che è valido, nel dettaglio che desideri.

0
Kevin Fegan

Se lo spazio non è un problema, utilizza un elenco verticale con Word e segnali effettivi.

Puoi usare

  • Numeri (-9),
  • Lettere (A-Z e a-z),
  • Sottolineature (_),
  • Trattini (-) e
  • Periodi (.)

In ogni caso, spiegare i caratteri validi prima di l'utente inserisce i dati, non dopo l'invio o dopo aver digitato.

0
Tim Huynh