Miceplans

Javascript field validation is cool.

But there are some definite cases where it does not serve its purpose well.

For example, your bank routing number is 9 digits, while your account number is 9-16 digits. Most of us don't know our bank routing number off the top of our head, so we go and find our mostly disused and dusty checkbook. Then we painstakingly copy the routing number into the field. And put the account number in the next field.

Now, what happens when you're copying these numbers? I'm guessing most of us are looking at one of two things: the keyboard, or the check we're copying from. Why the keyboard, when we're all touch typers? Because most of us touch type numbers with a num pad, and many laptops don't have them.

So what happens if the form look like this?

So the user enters their bank name, realizes they need a check, finds one, enters their routing number, then their account number. And then notices there are two more fields. Oops. So they copy their account number out of the "Confirm Routing Number" field into the account number field.

Only there's a big problem here. The validation on the routing number field only allowed 9 digits, and the last account number disappeared, since it happened to be 10 digits. User doesn't notice, because he was staring at the check trying to very carefully to enter those numbers correctly. There was no javascript notice that he'd gone over the digit limit for the field. Honestly, he has no idea about the length of routing numbers versus account numbers.

So at this point, he thinks he's good to go. The confirmation fields were copy pasted, because honestly, he was very careful typing in those digits, and he's more likely to make an error typing them again anyway.

The next screen has a quick summary that doesn't include his account number, and his info is in. He pays his Chase Credit Card bill.

Only he's going to have his payment refused, and a late fee added, because of field validation that he never noticed occurred. Nothing warned him of that last digit disappearing off his account number before he copied it.

Granted the user made a pretty big mistake not confirming ONE MORE TIME that his account number was perfect, but creating errors is something field validation should never do.

So here's the bottom line for usability in this scenario:
Don't add "disappearing digit" validation to banking information numbers. Or any other number field that requires the user to type in a number he is not familiar with.
Alternately, highlight the box with red that has "disappearing digit" validation activated by too many digits, because if they've done it, there's a reason, and it's very likely that this exact scenario has occurred.

Today I'm proud of my open source roots.

Andy Talbot, my brother, and a fabulous caricature artist, recently moved to Bellingham. Since he's been here we've been busy setting up a new venture for him to get started making the big bucks. Not starting with big bucks, we set a four year old computer up with Ubuntu on it for him to edit, color, and manage his artwork from.

Wobbly windows has entranced him. I must admit some surprise as to the excitement he showed when dragging a window across desktops. He also seemed quite pleased with the Synaptic package manager, and the ease of finding and installing new programs.

Andy hasn't been a big computer user up to this point. He draws with markers and paper, checks his email, and flirts with girls on myspace - the usual. So this really was a perfect chance to see what a non-computer savvy, non-windows savvy user could do with open source tools.

The experience wasn't perfect, of course. He was baffled at the idea of firefox not shipping with flash installed. And would never have been able to install Adobe Air (for twhirl) without my help. (By the way, it requires chmodding a file and executing it from the terminal.) Earlier today, the sound in firefox (and only firefox) stopped working, only to be had again by restarting it. Strangely, closing the application was insufficient, a kill -9 was required.

I introduced him to inkscape a week or so ago, and he was very happy with it. We decided that he definitely needed a tablet to make full use of it.

His experience with The Gimp is what made me happy today though. After working with it for five hours coloring caricatures, he turns to me and says that he "loves this program". You can see the results of that love for yourself.

Why? Because I *love* transparency. When done right, that is. 99% of the time, however, I find transparency done in an utterly useless and obnoxious manner. See exhibit number 1:





Good transparency, on the other hand, understands the need of the software user to read the bloody text. See exhibits 2 and 3:





Great transparency understands the need to read text, understands that backgrounds vary, and understands what parts of the interface simply don't need to be there.





Of course I'm not saying that there's no user scenario where transparency of the font face should match that of the window, but for the most part, it's simply not the case. Yet the great majority of applications fail to understand this. It baffles me.

As a developer, I love software. And as a developer, I hate software. I've become very picky over the years, finding that little bugs can totally destroy the user experience in an otherwise excellent application. Sometimes it's a small thing, such as gmail not loading quite right or with a bug or two. But when software has bugs that impede you, the natural impulse is to switch to an app that doesn't have that problem. I'm a fan of trying new things though, and on a never-ending mission to find the perfect suite of software to suit my needs. Today's tale is of Mice and Men, err... Safari 4 and Firefox 3.

Here's the quickie on Safari 4:
The good: Many many new interesting and well-designed features.
The bad: Strange UI problems.

Let's talk about the bad first. So far I've noticed a couple things that are less than desirable.

Occasionally all JPEGS on a page don't load. Due to the infrequency of this problem, I suspect it's related to networking issues. Mostly it happens when I have just opened my laptop, or when my wireless is on the fritz. The odd thing is that the text always loads just fine, and sometimes a refresh will fix it, but other times it won't. I've never seen anything like this on Firefox, so I'm guessing Safari has some weird bug in its pipeline.

Another problem I've had is in the new tab bar. When I click on a tab, it should automatically take me to that tab and open it with one click. Sometimes it does, but other times it requires a second click. So far I've seen no pattern that would explain where the problem is coming from: it's not a matter of focusing in the tab bar first, or of clicking on the text versus the tab itself. This can be fairly annoying, as you can't just default to clicking it twice quickly, as that will minimize the window.

The new url bar is much improved over the old one, but it still has a few tweaks that make it less than ideal. First is something I'd consider a bug: when typing a url you've visited before, it will autocomplete after each letter, which is good - but each subsequent character to an already correct auto-correct causes the highlight to flash. This is really annoying. The other problem I have with it is that is not as good as firefox 3's new url bar. I've gotten very used to typing the title of a page I've recently visited instead of the url (which I won't remember, because in most cases I've never even visited that site before). That lack of a feature right there is probably enough to keep me from switching to Safari 4.

And where's my "/" find? :( Apple-f is too long.

Now for the good!

Safari 4 impresses me as fast - very fast. In many cases I didn't even know websites *could* load that fast, I'd assumed it was waiting on network resources, when it's becoming clear to me that it was actually waiting for the rendering engine. So that, as you can imagine, is totally sweet.

The new bookmarks "gallery" is very shiny. If I didn't keep all my bookmarks online in either delicious or google reader, this feature would be a deal-maker for me. As I do, it's totally useless. And Safari's lack of decent plugins (or hardly any plugins at all), keep this from ever being of real interest.

"Top Sites", while stolen from Chrome, is done very well. I love the look and feel, as well as the ease with which I can pin things to it, or see that there are recent changes. The ability to "slide" between varying numbers of sites is also very well thought out to match their desktop in consistency.

Full history search is definitely a nice addition. I'd like it to work in the url bar, though. I'm just used to it.

Haven't tried out the developer features yet. I'll update you when I know how it goes!

So for the wrap-up:
I like Safari 4 a *lot*. The new features are well-thought-out and much wished for, but I'm afraid to say I won't be switching to it at this point. Without a decent set of plugins for bookmarking online, and no, paying $100 a year to Mobile Me is not what I'm looking for, I can't switch to Safari. I spend about 50% of my browser time in google reader, or bookmarking pages for my friends or for future reading. Also, I can't get used to constantly accidentally minimizing the window when trying to switch tabs.

Going back to Firefox, I'll definitely miss the "Top Sites" and the blazing speed, as well as the nice space utilization of the tab bar.