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.

Currently our webapplication simply shows a textbox with no validation at all. There is a small icon placed next to the textbox that allows the user to open the URL in a new browser window to check the validity. This is not a good way to stimulate a user to input a valid URL and with no other validation in place, our customers databases are full of stuff like e-mail addresses and "See Notes". We would really like to improve this situation, but with no UX-specialist on our team, we seem not to be able to find a proper way of allowing URL input.

I imagine a simple textbox would be easiest to use, but would also be hardest to validate. For example, we would like to allow the to enter URLs as http://www.google.com/ or www.google.com and only google.com. Splitting the protocol and allowing users to select it in a dropdownlist (defaulting to http://) would make validation easier and perhaps also entering the URL. However, the user would then be bugged with technical terminology. Only about 1% of the current URLs in the database are properly prefixed with the protocol and we suspect these are the result of copying the URL from the browsers addressbar.

As for the validation, I know there are a lot regular expressions out there for URL validation, but I assume these suffer from the same problems as e-mailaddress regular expressions in that either they are to strict or very, very loose, or are a couple of pages long.

So my questions are:

  • What (combination of) control(s) would allow the user to enter a URL a easy as possible?
  • What kind of validation would suffice so all valid URLs are allowed, but the most obviously wrong are not?
share|improve this question
add comment

5 Answers 5

up vote 12 down vote accepted

If you really care about UX, so you have to validate URL automatically. So if user types "example.com" you have to change it to "http://example.com".

If you want to add ability to navigate to url, that is just typed, so just underline it and make it blue; user will understand, that this is a link.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
+1 Exactly. Make it a no brainer. Effortless (for the user). –  Matt Rockwell Jul 20 '11 at 16:04
    
If you are doing this on a mobile OS, make sure you aren't violating an apple patent. :) –  bhagyas Jul 21 '11 at 4:43
add comment

Why do you scare away from the validations with regular expressions? You could search your already filled database for the most common data-entries (how the user really enter the urls so far) and write scripts for the top 5 of these input forms.

The scripts should expand the input-url to a correct one and display the correct one in the field after loosing focus.

Also you could use a technique like facebook these days, connect to the correctly expanded url and fetch a preview. you can show this preview alongside the textfield. this ensures the user he entered the correct url.

facebook-like url validation

share|improve this answer
    
The auto-preview is not a bad idea for visual validation for the user - I have used shrinktheweb.com in some WordPress sites. –  Roger Attrill Jul 20 '11 at 19:22
    
and if you are going to preview-fetch, please consider checking the source of the fetched resource for a canonical URL and use that instead. It's just good manners. –  Erics Oct 17 '11 at 11:16
add comment

You might want to take a look at The New and Improved Way to Create Forms with HTML5 from Web Design Ledger. You can set a field-type to be URL (<input type="url">), which results in client-side validation in supported browsers - though I'm not sure what kind of regex is used for such validation. Using this field-type also has the nice effect of presenting the user with a url-entering-friendly keyboard when browsing from an iPhone.

Of course, the above info will only be useful if users are browsing with a HTML5-compatible browser.

share|improve this answer
    
I'm afraid we have to support older browsers. –  Thorsal Jul 21 '11 at 10:59
3  
This is fine on older browsers too, as they will just fall back to a standard text input type. –  Steven Benitez Jul 24 '11 at 18:12
add comment

You can provide an attach link, before saving and updating the link field try to access the url destination. if its ok then go ahead.

Facebook Link Example

share|improve this answer
add comment

How about providing an example in the field itself?

Website: [example www.google.com]

The example should disappear once the person clicks to focus on the field. I understand that this is not validation, but it provides an example of what the user should type in.

share|improve this answer
    
In an HTML5 form, you can do: <input type="url" placeholder="http://example.com"> –  msanford Jul 24 '12 at 16:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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