Hallway usability testing

This point in the development cycle seemed appropriate to attempt a couple quick usability tests. The aim here was to watch someone other then myself use the site, to note any quirks that come up along the way, and especially watch for usage that I don't anticipate. Steve Krug claims that with only 5 usability tests, you'll catch the vast majority of your issues. I totally believe it.

Usability testing

First up was my fiance, Katie. I sat her down in front of my laptop, and walked her through the scenario. She's pretending that she got to the site from Google, and is looking to call Australia. Within 2 minutes the usability test was done, since the site is so simple. Nonetheless, I noted some very valuable information:

1. My attempt to default to "United States of America" as the country of origin confused her a bit, since she slicked in the text field and saw that default text disappear. This defeated the purpose of the default option, especially since she was calling from the US. Lesson: Either find a better way to offer a default (maybe by Geo IP location, that doesn't disappear when you click it?), or don't have a default.
2. After completing the first text field, having typed "United States of America", she pressed "Enter". This caused the entire form to submit, and since the second text field had not yet been filled out, she got back an error message saying that she entered an invalid country. Lesson: Try to disable the enter key from submitting the form when entering the origin country.
3. Noticed that she didn't use the tab key at all. She either used the mouse to select the country from the auto-complete options, or used the enter key to submit. Lesson: Don't assume everyone will us the app the same way, be it keyboard focused or mouse focused.
4. She liked (and more importantly understood) the "thought bubble" of additional information for the special case countries. Yay!
5. After asking whether she thought the "Lookup" button was worth keeping, she suggested getting rid of it. Since the form submits automatically once you enter your destination country, the Lookup button only confuses the matter. Agreed!

Next up was my sister, Yelena. This test was very brief, as she was remote and ran into an issue pretty early. Nonetheless, also learned some valuable information:

1. Running the idea by her, of why this is worth creating site for, she agreed it would be useful to her, and she would look for this information on Google. She noted that she would Google for "russia country codes" if she were attempting to call Russia. That will be valuable down the road.
2. When attempting to use the site, it turned out she was using IE7, which I hadn't tested up to that point. As it turns out, the auto-complete was not working and she ended up submitting the page with invalid country names (e.g. Russia instead of Russian Federation)...which resulted in an error page. Lesson: Make the site work in IE7 (among other browsers).
3. I asked her about the results page, and she said it looked great. Good news.

That's plenty to work with for now. Let's get to implementing the feedback...


Browser compatibility

Knowing the site was broken in IE7, I decided to focus on it. After a bit of struggling to figure out what IE's cryptic Javascript error messages were telling me, I found that I had a couple trailing comma's in some code I wrote. Taking care of those, plus taking the advice of the trusty W3C Validator, got the site up and running in Firefox, IE, and Safari. This process was easier then it would generally be because of the simplicity of the site, and my reliance on the always awesome (and cross-browser compliant) JQuery.

Usability of enter/tabs, and the Lookup button

I knew something was off here, but wasn't quite sure what the most intuitive solution for the user was. I knew I wanted to remove the Lookup button (though leave the option of bringing it back if I found that it's unnatural to not have submit button). I also knew that I wanted to avoid the all too easy mistake of submitting the form prematurely, while still allowing the user to submit it without clicking a button. What complicated the matter was the fact that not having a submit button in a form kept you from being able to submit the form with the enter key. So I went from submitting too easily to making it nearly impossible to submit.

After some digging around, I found a couple useful pages that led me to the ideal solution. I would capture the enter key event, and submit the form only if the user has provided the destination country. Otherwise, if they press enter while typing the origin country, I would simply tab them over to the next text field, instead of submitting the form. This way, while entering the origin country, they can either type the entire name, press enter, press tab, or click their choice. All of these options should be natural while at the same time keep them from making a mistake. That's win-win.

Miscellaneous

1. Added a disclaimer and contact information to the bottom of the page, both the front page and the results. I want to try something novel here...having users contact me through Twitter for bugs/comments/suggestions. Haven't seen anyone try this before, so we'll see how it goes. If that doesn't work out, I'm thinking of setting up a UserVoice page.
2. Pointed the real domain to the application. This was relatively straight forward, using the Google App Engine help docs.
   

HowtoDialIternationally.com is live! Check it out yourself, or view the screenshots below...





Next up is a soft beta launch.