UserTesting Tuesday: A Form, A Calendar, and Captain Kirk

Every day it happens to you. I guarantee it.

You stare at your computer screen, shake your fists in the air, and shout:

“WHERE SHOULD I PUT THE CALENDAR IN RELATION TO THE INPUT FIELD OF MY FORM? WHERE!!!?!??!?!!?!??!”

It’s okay to admit it…you’re in good company. I’m pretty sure that’s what Captain Kirk is yelling in the picture below.

If Captain Kirk does it, then so can you!

To help answer this question, we used this week’s UserTesting Tuesday to run a UserTesting.com test on one of my favorite sites: Hipmunk.com. Here’s a 58 second clip --

UserTesting Tuesday:

Website: Hipmunk.com

Task: Use Hipmunk.com to find the best round trip flight for you to New York City at some point in July of 2013. Talk through your thought process and stop when you've found the flight you like.

Phil's 3 Key Takeaways:

1. A/B test your forms – Forms are important. They’re a way for us to find out more about our visitors, build relationships, and take orders. A better form in a shopping cart, whitepaper download, or date selection can have a HUGE impact on your business. Test it!

2. One calendar per input field –If you’re like Hipmunk.com and have a date input field, then test giving each field its own calendar. In our user testing video clip, our tester seems to be confused by the fact the “depart” field and the “return” field share the same calendar:

   On Hipmunk.com the “depart” and “return” fields share the same calendar

   Perhaps this tester would find a site with one calendar per input field to be easier to use. This is what Google and Kayak both do for flight searches -- when you click inside the input field, a calendar appears.

   Google shows one calendar per input field

   Kayak also shows one calendar per input field

3. Proximity matters – One way to show our web visitors that things are related is to keep them close to each other on the screen. Maybe our tester was confused by the form because the calendar isn’t next to the “depart” input field. The folks at Webdesigner Depot have written a great post about the principle of proximity in web design. If you’re interested in learning more, then you can read the post here.

Enough from me…what did you take away from the video? How do you make the most of your forms? Leave your thoughts in the comments below.