How To Put a Label Inside of an HTML Text Box

In this post I am going to show you a relatively basic trick in the world of web development and web design, but has a big impact on the design and usability of your web forms. This post will explain how to put the label inside of an HTML text box and then have it appear and reappear based on if the user click inside or outside of the text box.

EXAMPLE OF HOW IT WORKS

Here is a text box with this code implemented. Notice that when you click on the text box the “Click Here to Test” text goes away and you can type. When you then click outside of the text box the “Click Here to Test” text then reappears.

THE CODE TO IMPLEMENT

From the following code you can probably pretty easily see how this is implemented. The “onclick” and “onblur” attributes are the pieces of code that you will want to edit.

How to do usability testing of your website for cheap

Usability TestingToday I came across a great idea from Dan Shapiro on how he does usability testing for his website called SparkBuy. If you are a web developer, you know that usability of your website is one of the most important aspects in converting a visitor into a subscriber/member/customer. You only have a few seconds for that visitor to truly understand what your website does and what value you provide to them before they click the “back” button and you lose them forever.

WHAT USABILITY TOOLS ARE OUT THERE?

There are many usability testing tools out there today that allow you to see how a visitor is interacting on your website. A couple interesting, but expensive, services include ClickTale and UserTesting.com. ClickTale records the mouse movements of actual visitors on your website and then aggregates all the data to give you interesting statistics. If you are a subscriber of ClickTale, you can actually login and watch recordings of every Internet Explorer and Firefox visitor that has come to your website. ClickTale is an awesome technology, but the service starts at $99/mo for the cheapest package. Also, since visitors being recorded by ClickTale don’t actually know they are being recorded, there is not audio or feedback from the actual visitors.

UserTesting.comThe other interesting service in the usability testing space is UserTesting.com. UserTesting.com is a service where you pay $39 for a video recording of someone actually browsing your site and the user talks through what they see and experience as they are on your website. The one downside to using a service like UserTesting.com is that the users viewing your site may not be your typical user as these are people who are getting paid to provide this service, therefore there opinion can be bias.

SO HOW CAN YOU DO USABILITY TEST ON YOUR WEBSITE FOR CHEAP?

screencast-o-maticThe innovation solution that Dan Shapiro outlines is using a service called screencast-o-matic.com. Their basic version is FREE and their premium plan is a whopping $9/yr – yes, that is $9 per year, not month. Using this service you can then go out and recruit usability testers. Where can you find usability testers for cheap? Amazon’s Mechanical Turk. On Mechanical Turk, you should be able to find people willing to do a quick usability test of your website and record their screen and voice using screencast-o-matic, all for as cheap as $2-$5 per recording. Now how is that for cheap usability testing!