MarcFriedenberg.com

Ouch, right on the homepage of the new psucollegian.com:

This is not only embarrassing, but slightly mean.

Please fix this.

I know that picking on the DMV is like shooting fish in a barrel. I don’t care.

Recent events have forced me to interact with PENNDOT. I wanted to contact them with a question, so I went to their contact page.

The page isn’t terrible, really, but it’s guilty of committing two design mistakes that drive me up the wall. First, look at the telephone number entry form. Dividing the form into three fields is just plain inexcusable. All you need is one field - let people put in parenthesis, or periods, or whatever punctuation they wish to use to separate the area code, exchange, and number. It’s trivial to parse and trim the user entry, on either the client- or server-side. If you’re worried about people forgetting to include an area code (in my opinion, unlikely in this day and age), you can check for this, too. So, there’s really no need to have the three little boxes.

Even if you think having the clutter is necessary, though, having the “helpful” Javascript to advance you automatically between fields is a usability no-no. Consider the following:

1. I, like most computer users, am entirely accustomed to using the tab key to move between form fields. So, I see the three telephone fields on the PENNDOT page. I enter the three digits of my area code, and then press tab, excited about the prospect of entering my telephone exchange. However, my dreams are dashed: I am now at the third field, rather than the second (because, of course, as soon as I entered the third digit of my area code, the Javascript advanced me to the second field; my tab press moved me to third). Not a big deal, but come on, that’s annoying as hell.
2. A variation on the above. Say that I’m entering my phone number and I realize that I made a typo in a previous field (Aside: Is “made a typo” the right phrase? It seems awkward. Perhaps “committed a typo” is better, or “brought about the existence of a typo”). So, I use the helpful shift-tab key combination to go back and correct the misdeed. However, since that field is already filled, I automatically get pushed back to where I started; it is impossible to go back to a filled field using only the keyboard. What a drag.

Anyway, PENNDOT, if you’re listening, make life easier for everyone and just have the one field. Then, write the single line of code that will check the length of the parsed, trimmed entry.

So, that’s the first problem. The second is that “Driver License/Photo ID Number” field a few lines down from the phone number field(s). You go out of your way to implore “(no spaces of dashes - Example: ABC1234)”, when we all know perfectly well that one line of code can do this work, instead of the user. Also, I think you mean “spaces or dashes”…

I’ve decided to start cataloguing what I’m going to call “egregious design errors.” There’s so much bad design out there, and it will at the very least make me feel better to call it out. Most of it will be on the Web, but as Becky will tell you, nothing can stop me from critiquing household appliances, architecture, pens, etc.

Here’s a typically moronic example: Restaurants that post their menus online as PDFs. There are all sorts of problems here. PDF files are large (one to two megabytes per page, in some cases) and require plugins. Of course, there are plenty of good reasons to use PDFs, but this isn’t one of them. Precise layout isn’t critical. The Web is not a printed publication (in some cases, it might be nice to offer a PDF if you think for some reason that people want to print out copies for around the office - but this will never happen if you make the Web page look good). The linked example even goes out of its way to be worse: it links to individual pages of the menu! So to view the whole menu, I need to download at least five megabytes and click five links. So let’s just “do it up” in HTML and use a few kilobyes of bandwidth, on both ends.

P.S. - Bonus points awarded to the reader who can find at least two types of irony in this post.