Enhance Web Form Usability with JavaScript

closeThis post was published 10 years 7 months 15 days ago. A number of changes have been made to the site since then, so please contact me if anything is broken or seems wrong.

This is my last canned post for the week. I wrote it on Wednesday, before leaving for Chicago on Thursday morning. I’m getting back tonight, so hopefully a fresh post will arrive sometime tomorrow. I didn’t can any more, so I better be up for writing. Probably a recap of my trip.

Earlier this month, I had the dubious pleasure of filling out applications to a couple of summer programs. The first was at the University of Chicago, studying Greek drama — in Greece — for three weeks. The other was at Northwestern University, studying theater — just in Chicago — for five weeks. Both applications were completed online, with supplemental materials submitted in other ways (email, postal mail, etc.).

I noticed a big difference between the two applications. In terms of usability, they were like night and day. The comparison is almost like trying to compare apples and oranges; there’s just no way to reconcile the differences.

Northwestern University’s was very easy to use. It utilized the principles of unobtrusive JavaScript quite well to create a highly usable and nearly frictionless form to fill out. Phone number inputs moved the caret to the next box automatically when the correct number of digits had been typed; sections expanded and collapsed depending upon other options; the whole nine yards. It was not just an application; I actually enjoyed watching the care Northwestern’s development team had put into the one-page form.

The University of Chicago, on the other hand, had a rather annoying multi-page (six, to be exact, counting confirmation and registration fee payment pages) process, and no JavaScript helped along the way. Not only that, but the essay I had carefully constructed in Microsoft Word (for a change) blew up when copied and pasted into the textbox provided in the form. It kept all the letters and everything, but all the special “smart quotes” that Word makes by default got turned into question-mark strings when I saved, and then returned to, the page. I had to spend about ten minutes figuring out how to keep that from happening. Proper encoding would have been nice. (Or whatever the problem was; I was too focused to pay much attention.)

So, while the two forms are kind of like apples and oranges (only one of them had an essay input), the JavaScript assistance was still quite welcome on Northwestern’s site. It’s a perfect example of how JavaScript can be used in a way that the average user probably won’t consciously notice as script at all. Well done, Northwestern! UChicago, we’ll take a look at your form again next year, eh?

Just so y’all know, I got accepted to the UChicago program this past week, before I left (for Chicago, even; not that I’ll be anywhere near either school). Still haven’t heard anything from Northwestern. I’m crossing my fingers; this is the only year I can do that program. UChicago’s can wait a year (can’t do both, as they overlap).

dgw

I am an avid technology and software user, in addition to being reasonably well-versed in CSS, JavaScript, HTML, PHP, Python, and (though it still scares me) Perl. Aside from my technological tendencies, I am also a theatre technician, sound designer, violinist, singer, and actor.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail (or subscribe without commenting)

Comments are subject to moderation, and are licensed for display in perpetuity once posted. Learn more.