How to clearly state to the User what characters are valid

Question

I'm trying to determine the best way to inform the User that an input accepts certain special characters. Alphanumerics are simple enough, but I feel like I'm losing clarity when I get to characters such as . and -. One style I've tried is this:

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

Where the parenthesis wrap the valid characters, but when the parenthesis are not valid, it seems too easy for them to be mistaken as part of the list.

The style I'm leaning towards is the following:

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

But I feel as though the single quotes clutter things up, and makes it easy to lose yourself in the list, especially as it grows. Is there any way to convey this information that's accepted as 'better', or are there in fact better ways to go about this entirely?

Answer 1

Clutter is problematic. Emphasizing the valid characters might be enough. E.g.:

Valid characters are A-Z a-z 0-9 . _ -.

Displaying them with different color might also help.

Answer 2

Here is some advice :

• forbid characters only if it is absolutely necessary (I hate when I cannot use _ in my nickname)
• display a message only to the user who tries to use one of these. Other users won't be bothered
• if the user enter a forbidden caracter, just don't consider it and explain him why.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

You could display blocks of each character type, like this:

Allowed characters: A-Z a-z 0-9 - _ .

Answer 4

I would suggest to mention about the characters that are not allowed, because number of invalid characters is always lesser for any required input. This will help to reduce clutter. See the given example from windows explorer.

Answer 5

I'd leave out A-z and possibly even 0-9 as these should be obviously allowed. For the additional characters I'd go with their names rather than the symbols

You may also use underscore, dash and period.

Answer 6

tl;dr

You should show all valid or all invalid characters before the user starts to type into the field. This should be a hint. Keep it short, easy to understand and straightforward.

Demonstration

^{download bmml source – Wireframes created with Balsamiq Mockups}

In depth explanation

Example placeholders

Use fields with a placeholder that shows a valid example input. Example placeholders indicate the preferred format of the input. This could help for example in a telephone number field.

Message on focus

Display a fixed label or a popup bubble when the user enters the field.
The user will see the hint before he starts to enter the input, so he can think of a different value if the one he wanted to entry is incorrect. This also solves the possible question that a user would ask before giving the input: "what should I write over here? Will my input correct?".

Short and bold character list

Use short form of the valid characters like "a-z" not something like "alphanumerical only".
It's much easier to oversee and understand the accepted characters. You don't have to find out the meaning of the words like: "ok, alphanumerical characters are characters from a to z with numbers". Also clarifies obscurity like: "are uppercase letters allowed?".

I would also recommend @NonNumeric's solution with using bold on the allowed character list. This guides attention to the essence of the popup message.

Feedback on blur

After the user filled the field and the focus is lost, you should validate the field.

• If the input is valid, show a check mark that indicates the valid input.
• If the input is invalid, leave the popup there and make it or the user field (or both) red, so it will indicate that something went wrong.

Thanks to this, if the user missed the guide before typing, he has a feedback after his input. The errors/check marks also simplify the overview of the filled form.

Answer 7

One way to deal with this is to not say anything at all at first and then let the user know when a disallowed character is entered. If you use in-line validation and apply after each character input, the user (almost) won't even need to be notified of which character was forbidden.

It depends on what should go in the field. If the data that should go in the field follows a certain form (e.g. a postal code or something), there is a very limited set of characters that should end up there. Type-Os and very alternative ways of typing the data will be handled by the error message and the rest will just float by without even noticing.

It might be though, that the field is made for data that has less conventions around its format. In such case, the number of erroneous inputs may reach unacceptable levels and instructions pre-input is required.

Both in the inline error message and in the case where an info text is needed, I prefer writing "Letters and numbers" rather than "A-Z, a-Z, 0-9" because it's a lot easier to make sense of, and you can save the clutter for the special characters.

Ex: Please, use only letters, numbers and these special characters ( _ . - )

Answer 8

I would say that your best bet is to use a table-like structure to clearly label and isolate each rule:

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/

So now if your list grows then you do not have to worry about future characters messing with any sort of formatting you may have chosen for previous characters.

Answer 9

If you just allow all utf8 characters as input, you don't need to worry about how to explain it to the user. And it will save you a big headache when going global with your app/website.

If they have to enter an email, you can write "this email address is not valid according to internet standard RFC ". That is much easier and people will understand why they need to enter only those characters instead of thinking you are a meany.

Answer 10

In order to avoid all the clutter, but to still provide all the descriptive information you want ahead of time, you could have a "link" near the input field that says something like "What characters are valid here.". When a person moves their mouse to (hovers their mouse over) the link, a "tooltip" is shown that describes what is valid, in whatever detail you want.

Answer 11

If space isn't an issue, then use a vertical list with word and actual cues.

You can use

• Numbers (0-9),
• Letters (A-Z and a-z),
• Underscores (_),
• Hyphens (-), and
• Periods (.)

In any case, explain the valid characters before the user enters data, not after submission or upon typing.

Answer 12

If you use the word "Alphanumeric" instead of writing A-Z and 0-9, it will reduce the amount of clutter and be clearer to the user.