12

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?
11

If you really care about UX - validate the URL automatically. E.g. if user types "example.com" - change it to "http://example.com".

If you want to add an ability to navigate to the URL that wasjust typed - just underline it and make it blue; the user will understand that this is a link.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • +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
  • I would agree, except that this assumes a case in which the protocol for any entered URL is http://, which is to say a non-secure site (a secure URL would use https://). It gets trickier if the user also needs to specify the protocol, since either they need to enter the fully qualified URL, or you need to provide them with a way to enter both the protocol and the domain separately. If anyone has suggestions for best ways to do the latter, especially for long lists of URLs that need to be added, I'd love to hear them. – Mattynabib Dec 29 '16 at 15:03
  • @Mattynabib, what about making "http://" default? Websites either redirect to "https://" automatically or support both versions. – Dmitry Semenov Dec 29 '16 at 17:01
  • Is that universal? Can we assume that if a user specifies http that all browsers and sites will recognize and redirect if it is actually a secure URL? If so, that's awesome, I did not know it would automatically "update." – Mattynabib Dec 29 '16 at 18:00
6

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

  • 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
  • 1
    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
4

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.

  • 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
3

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

2

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.

  • 1
    In an HTML5 form, you can do: <input type="url" placeholder="http://example.com"> – msanford Jul 24 '12 at 16:34
1

There are multiple ways to handle a URL input by a user, and several considerations to make when you are designing an input like this:

  • Most non-technical users will not necessarily understand the term "URL". You can try the terms "link", "web link", "web address" or a variety of other more user-friendly things in its place.
  • You should validate the URL inline and tell the user straight away if their input does not match your format.
  • You can give examples of a valid input in the form inline - this is exactly what both placeholders and helper text is for.
  • You should NOT automatically change the user's input. This is a bad practice for many reasons, least of which is you don't know what the user is trying to accomplish. Perhaps they are actively typing an address, or they've pasted one they copied from somewhere else. Maybe they pasted one and are then trying to change a part of it - but you do not know at this stage, and modifying it will just throw them off.
  • There are multiple valid protocols if you are just looking for a "URL" and not specifically the address of a web page. http, https, ftp, file, data, mailto, and several more are all valid in these cases.
  • You can display an example of how the link will be interpreted by the system, so the user can click it and confirm it's valid.
  • You can display information from the URL to the user to let the user confirm it is valid.
    • Scrape the website's metadata to get the title, description, favicon, etc. to display to the user.
    • Display a screenshot/preview of the URL to the user - there are many methods and tools to do this available online. One thing to remember here though is that some URL's content may be blocked by user login, so the preview may just display a login page.

For an example, here is an input that conforms to all of the above.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

One other common usage that is found around the web is offering a select box with multiple choices for the allowed protocols, and then automatically stripping out the protocol from any input URL.

mockup

download bmml source

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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