Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
This is very closely related to another question about validation but I'm not sure if it's a duplicate. It might be. –  Andrew Leach May 19 at 20:35
    
@AndrewLeach It's definitely similar, but that question seems more related to When validation information should be displayed. I was concerned with verbiage. Unfortunately in my case, I have no choice as to the when. –  caackley May 19 at 21:41
5  
For better user experience, a good rule of thumb for presenting such complex requirements is to question the actual requirements. Is it so absolutely neccessary to have this exact limitation? Could you go out of your way and change your systems (perhaps re-encoding or 'escaping' their original input) so that there aren't arbitrary sets of 'valid characters' anymore? The best UX for this message would be no message at all, except when completely abnormal edge cases are encountered ("Please don't input 2 gigabytes of text here"). –  Peteris May 20 at 7:48
2  
Personally, I would really like it it if it just said "Your username must match the pattern insert-relevant-regex-here," because then there is no ambiguity about allowed characters, Unicode, allowed lengths, or any weird restrictions that some sites seem to like. Unfortunately, most users do not know regular expressions, so this is unlikely to ever happen. –  AJMansfield May 20 at 20:57
3  
Although the best solution is actually "don't impose these restrictions on your users". –  AJMansfield May 20 at 21:04

12 Answers 12

up vote 40 down vote accepted

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.

share|improve this answer
7  
+1 for the bold –  Mishax May 19 at 14:38
1  
I would have used something like this for the emphasis. –  Darkhogg May 21 at 20:42

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
13  
This is good feedback, but trial-and-error can get pretty annoying. I'd say give the list and do this. –  Brendan Long May 19 at 19:19
18  
I disagree. I hate it when I spend five minutes thinking of a new password for a site, only to be told that it’s unacceptable after I’ve typed it. –  Scott May 19 at 20:35
6  
@Scott: I think that is where his first point comes in. There just shouldn't be a limitation on characters for passwords in the first place. –  x3ro May 19 at 22:42
2  
Showing all characters you don't allow in the first attempt would work better. imgur.com/AEoYUTJ –  Ayesh K May 20 at 16:13
2  
I really get angry when I’m not being told upfront which characters are (generally; eMail address validation is probably not a good example for this) valid. I consider this bad advice for the general case. Do show all valid characters first. –  mirabilos May 21 at 8:05

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.

enter image description here

share|improve this answer
5  
In my case the number of valid special characters is actually the smaller set. I know that's not the norm, though, so it's a good answer for most cases. –  caackley May 20 at 12:21

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

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

share|improve this answer

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.

share|improve this answer
4  
It's worth giving the symbols as well if US English isn't guaranteed to be your users' instinctive language (in UK English these would be underline/underscore, hyphen and full stop, goodness knows about some of the rest of the commonwealth). It's technically not a dash but a hyphen, I'm guessing you don't want the user entering U+2013! –  Chris H May 19 at 19:34
4  
Good point. How about: "You may use period (.), underscore (_) and dash (-)." This resolves ambiguities and it still looks nicer (imho) than a list of symbols only. (Note, that I moved period to the front to avoid confusion with the period of the sentence). –  Roman Reiner May 20 at 7:22
    
@ChrisH For a non-English user A-z may include all the accented letters as they're sorted in their alphabet, so it doesn't help much. Something like "Latin letters without diacritics" would be more precise but probably also more confusing. –  maaartinus May 25 at 14:08
    
@maaartinus - even more to consider when it comes to international users! How about "A-z (no accents)"? –  Chris H May 25 at 16:33
    
@ChrisH Someone could claim, that A-z includes also the six non-letters in between, but yes. It's short and clear (unless someone wants to misunderstand). –  maaartinus May 25 at 17:17

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 ( _ . - )

share|improve this answer
2  
I disagree. I hate it when I spend five minutes thinking of a new password for a site, only to be told that it’s unacceptable after I’ve typed it. –  Scott May 19 at 20:36
    
Well, that's not exactly what I wrote now, was it...? –  Babossa May 19 at 21:06
    
Well, you did say, “not say anything at all at first and then let the user know when a disallowed character is entered”. –  Scott May 19 at 23:23
    
...when suitable, yes. I also said that fields for data with less convention around its format should use a different approach. Password is for sure one of them. –  Babossa May 20 at 4:58

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

mockup

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.

share|improve this answer

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.

share|improve this answer
1  
This is very clear, but also extremely verbose. In most web forms I encountered, there would simply be no space to (dynamically) insert this kind of table when invalid characters are entered. –  user1884155 May 20 at 8:25
    
@user1884155 I agree to a very basic an narrow extent. If I were to implement this then my error message would simply read something like Invalid characters detected<br><a href="open a modal window when clicked">Click to view list of allowed characters</a> –  MonkeyZeus May 20 at 12:51
    
1. This describes how to implement a solution rather than how to present the information. 2. It is a bad implementation. Table-based layout is not the correct way to present information that is not semantically tabular data. It's a bad short-cut that can present all sorts of page layout issues. You can achieve the intended layout using proper CSS and HTML markup –  Bill Dagg May 22 at 19:08
    
@BillDagg Yes I know <table>'s suck and I wouldn't use it in a real implementation but my answer does show how you can clearly present the information. The other solutions presented here are relying on a user's pre-disposition to identifying what bold means and when punctuation begins vs. allowed chars begin. I would imagine that an older person is going to have trouble with the web form in the first place so why create a cryptic design that may/may not be recognized? Also please read my first comment to get an idea of how to implement this without killing your page layout. –  MonkeyZeus May 22 at 20:06
    
@BillDagg I think tables are perfectly fine for enumerations, and in the answer above there is an enumeration of size 3. I also think that in the context of this question (and the answer provided) a comment about the misuse of tables is out of place. –  user1884155 Jun 4 at 8:45

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.

share|improve this answer
11  
I don't know that "most people" know what an RFC is? –  Charles Wesley May 19 at 18:41
    
According to which RFC? –  Bergi May 21 at 8:43
    
@CharlesWesley RFC: Request For Coitous duhhhh =) –  MonkeyZeus May 22 at 20: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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
The trouble with using the word 'Alphanumeric' is that it doesn't include . , _ etc. –  JonW May 19 at 17:33
3  
Also for average user it takes a significant amount of cognitive effort to go from 'Alphanumeric' to characters a-z 0-9 and even then tiny doubt about A-Z. –  Jayfang May 20 at 20:41

protected by Ben Brocka May 21 at 13:07

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.