Improving User Experience, One Field at a Time

HTTP:// checker

Sometimes, users need a little help with inputting full, proper URLs. While working with Dibster, a local start-up MVP client, we ran in to a small usability problem while going through user testing. A lot of the users of the system are non-technical, and we kept finding that they were not inputting URLs the way that our system wanted.

For reference, systems typically want something like:

http://curtisdigital.wpengine.com vs. quotient.net

The common approach to this data problem is to handle it on the back-end during transit to the application or before inserting to the database. We felt that the user needed to know what was going on with their data, like why and how it was changing.  We created this quick script to assist. The high level here is that this script will put the http:// in place so the user can start typing. A lot of solutions do this. But we needed to handle the case that the user pasted over it and then excluded our placeholder in put.

The end result is a well informed user, a better overall UX (user experience), and a happy set of users.  Keeping with the spirit of MVP and Agile, we will keep this post updated if we end up with something cooler or more usable as our testing continues.

See the Pen http input checker by John Curtis (@social_quotient) on CodePen.