Posts tagged ‘forms’

My talk from The AJAX Experience

Back in September 2008 I had the privilege of speaking at The AJAX Experience in Boston.  I talked about designing great forms and covered a lot of my own pet-peeves with forms on the web and shared some of the things I’ve learned along the way.

Today I got an email from a guy who found the video online and said he’d gotten some great stuff out of it. I had no idea a video even existed.  600 views and many months later I finally found out about it.  And in the spirit of better late than never, I’m posting it now.  The talk is about an hour long and covers a lot of my thoughts around form design, usability and creating experiences on the web that are actually fun!

One of the coolest parts for me was the amount of discussion this talk generated, both during the show and afterwards.  I had a great audience with lots of participation but I apologize for the parts you can’t hear since we didn’t have an audience mic set up.

And here are the slides:

As always, if you’re interested in having me speak at your event, let me know.


Auto detect a time zone with JavaScript

This blog post will attempt to explain how to automatically detect your user’s time zone using JavaScript. If you’re in a hurry, you can skip directly to the JavaScript timezone detection code on Github.

Previous attempts to solve this problem:

Server side:

Time is not included in an HTTP request. This means that there is no way to get your user’s time zone using a server side scripting language like PHP.

IP address geocoding:

Another method that people have used to address this problem is to geocode your visitors IP address. IP geocoding is what is used when you go to a website and are shown an ad to “meet other singles in Boulder”. Unfortunately, for simply detecting a timezone, IP geo-coding is an expensive way to go. Just check out the prices for Maxmind and ip2location. There’s no way I’m paying for that. I did find a free provider called hostip, but it is worthless as it couldn’t decide whether I live in CA or NC.

With JavaScript:

The common JavaScript that is used to detect a visitor’s timezone is:

var myDate = new Date();

As I started reading up on the getTimezoneOffset code I realized it was too buggy to be used in any critical application. The function returned inconsistent results in different browsers and it never seemed to account for daylight saving time correctly. It quickly became clear that I was going to have to write my own script if I wanted this to work.

How I ended up doing it:

There are basically two things needed to figure out a visitor’s time zone. First, we need to determine the time offset from Greenwich Mean Time (GMT). This can easily be done by creating two dates (one local, and one in GMT) and comparing the time difference between them:

var rightNow = new Date();
var jan1 = new Date(rightNow.getFullYear(), 0, 1, 0, 0, 0, 0);
var temp = jan1.toGMTString();
var jan2 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var std_time_offset = (jan1 - jan2) / (1000 * 60 * 60);

The second thing that you need to know is whether the location observes daylight savings time (DST) or not. Since DST is always observed during the summer, we can compare the time offset between two dates in January, to the time offset between two dates in June. If the offsets are different, then we know that the location observes DST. If the offsets are the same, then we know that the location DOES NOT observe DST.

var june1 = new Date(rightNow.getFullYear(), 6, 1, 0, 0, 0, 0);
temp = june1.toGMTString();
var june2 = new Date(temp.substring(0, temp.lastIndexOf(" ")-1));
var daylight_time_offset = (june1 - june2) / (1000 * 60 * 60);
var dst;
if (std_time_offset == daylight_time_offset) {
    dst = "0"; // daylight savings time is NOT observed
} else {
    dst = "1"; // daylight savings time is observed

Once I had this code written, the next step was to compile a list of the various time zones around the world along with their opinions on DST. I actually ended up using the list of time zones from Microsoft Windows. It was rather time consuming to compile this list, so I hope you can make use of my work to save yourself some time.

Please let me know if you have any comments, questions or problems with this code. As with anything that I post on this blog, feel free to use this code however you want. Just don’t blame me if it breaks.

Update (06/27/07):

My code wasn’t correctly detecting timezones in the lower hemisphere. I have added hemisphere detection for all our Aussie friends out there. I also fixed a bug in the convert() function that was leaving off the + sign at certain offsets. Thanks Val for pointing this out and helping me with the fix.

Update (10/24/08):

Fixed the bug that Rama and Will pointed out in the comments.

Update (12/22/10):

Jon Nylander has taken my original code and written a a more robust solution. Use his version instead.

How to build great forms

Aristotle said, “We are what we repeatedly do. Excellence, then, is not an act, but a habit”. What many people don’t realize is that excellence isn’t achieved at the macro level. You don’t reach excellence by making one great decision. Instead, you reach excellence through making lots of small decisions consistently well. Here are some simple guidelines to help you improve the quality of your user forms:

1. Do your research

When designing a user interface, take the time to read up on stuff like eyetracking research before you design your forms. For example, did you know that you can reduce your users saccade time from 500ms to 50ms per input field, just by placing form labels above the field instead of left aligning them in another column?

2. Know your user (see #1)

Talk to people! Ask questions. And when all else fails, use common sense. For example, we recently redesigned our date input fields. We were using the popular date picker which allows user’s to select the date from a popup calendar. We thought this feature was cool, until we realized that conference organizers usually register their events 6 or more months in advance – that means they have 6 or more unnecessary clicks just to get to the right month. This didn’t make sense to us, so we went back to the drawing board and opted for regular drop-down date inputs instead.

3. Reduce friction

Every input field that you have people fill out is friction. With every second that you keep people waiting, you increase your likelihood of losing them. You need to do everything you can to reduce this friction. Sit down and evaluate every question in your form design and ask yourself what it would take to get rid of it.

I came across a good example of this yesterday as I was working on the registration form for EventVue. Since our conferences can be located anywhere, we need to collect time zone information. Every website I’ve found requires the user to manually enter their time zone. Why do they do that? Why can’t the browser just tell you which time zone the user is in and automatically select it for them? I spent a day looking into this problem, and sure enough, all it took was some time and some javascript to detect the user’s time zone automagically. So what fields do you have that you could eliminate?

 1 comment