Field that doesn't allow spaces - giving correct feedback

Question

On our mobile app's login screen we have three fields, the last of which is used to build up a URL.

Since spaces isn't a good idea for the hostname part of a URL the user input must be sanitized before being used.

In my mind we have three options:

1. Do nothing and allow any input. Try and do your best with what user gives app.
2. Ignore spaces when pressed on keyboard.
3. Show error as user types when spaces are found in edit box.

1 is the easiest to build, and user won't even know it is happening. User isn't aware she is typing in a part of a URL, she is typing in a "Company name". (I thought user learning might be a problem, and giving some feedback might be useful, but the typical use case is user enters these values once, and never again.)

2 feels quite strange when using it. You press a key, and nothing happens, nothing turns red, key press just goes away. Not a slick experience.

3 is probably worst of all the options. It makes the user fix a problem she will only understand after reading an error message box, and the spec for fixing the problem is in the error message. (I really hate it when apps do that.)

Any other options that I am missing, or something that could be done better?

More background: This app is by a group of mobile workers that all work for one company. Our company sells the software to their "company" and pick a URL for them (a human does this. Our volumes are still low enough that this is practical). The end users (the mobile workers) then receive username, password and their chosen by us company name. This information is all entered once on log in.

It is on our road map, to change this to the end users' email address. Then there will be no need for the user to select company name. The app will ask a server what URL to go to given the user's email address. This will make the very first thing our end users do with our app a much smoother process.

Answer 1

Will Company Name be stored in the database with spaces and then a separate URL column will have no spaces?

I would recommend building the URL just below the Company Name as they type so when the user types "Super Duper Acme Co." your app will show:

Your dedicated URL will be: www.superduperacmeco.com

This will cause the user to pay attention and receive immediate feedback and won't be surprised/irritated later.

I am also under the assumption you don't want users creating mix-case URLS

Also, do not forget about other characters which might not be desirable in URLs. Think about "O'Reilly Parts"

Maybe add a required checkbox which states "I accept the formatting of the URL provided"

If there is not enough space then assuming there is a success page I would place:

Congratulations! Your dedicated URL is: www.superduperacmeco.com

Answer 2

I would go with what Microsoft did in this case for entering file names in Windows Explorer (which allows spaces but forbids some special characters).

When the user types any forbidden characters, simply refuse to add it in the input text box (your option 2) then show a helpful balloon hint on the text box like "Spaces and these characters not allowed: $#&%" (for example).

When pasting text that already contains forbidden characters, the characters are removed from the pasted text (the rest is kept). The hint is also displayed in this case (only if such removal happened).

Optionally you can convert spaces (not other forbidden characters) to dashes or underscores if this is typically expected from your users. Doing so makes it easier for them to input the allowed "faux space" character as they simply have to hit space bar instead of finding the - or _ key. In this case, entering space should show "Space converted to dash" (for example) and entering other disallowed characters should show "Characters not allowed: $#&%".

If your restriction is based on certain allowed character ranges only, show that as a hint when any character outside the range is entered. For example: "Only A-Z a-z 0-9 _ - are allowed." (users typically understand a-z to mean the range of alphabets).

Answer 3

Given that you're suggesting a URL based on their company name, you should go with option 1.

In this situation, options 2 and 3 will be very odd.

Create a prototype with option 1, then test it with 5 users (and test other things). Use one, fake company name that you decide for all tests.

Answer 4

How will you handle a company name like:

"#'s, ?'s, & ='s, Punctuation & Sons Inc."?

Or users who don't have a company name at all but want to give you money? ;)

Perhaps accept the whole company name (Option #1) for the database, which you'll likely want to have anyway (Would you address support or marketing emails "Dear http://customurl.com"?)

You could assign a random URL to start with (approach used by Flickr, Facebook, StackExchange, etc). That gets them signed up with a working acct faster w/less chance of errors or frustration.

Either on this same login screen, or later in settings, you could use their company name input to display your best guess for a custom URL & then give them the option to edit or accept it. At that point you could have an explicit statement that it can't contain spaces or certain other characters.

This is a bit more work, but ensures you have their a valid co. name and a working URL. This also puts the error-prone part of the process a bit later so it doesn't feel like such an obstacle/hassle. If they don't want a custom URL, they have a functioning acct in the meantime anyway.