Here’s the output I received (of course, I’ve changed my address for this post):

Invalid? Really? A username with only alphabetical characters, followed by an “@” sign, followed by a domain name, a period, and the world’s most popular top-level domain? I realized the only possible reason (and not a good one) was that the programmer assumed no one could have a two-letter username. Poor guy probably just signed up for Gmail and ended up with something like joeschmoe420toker@gmail.com because all the other joeschmoes were already taken.

Fine and good, but it is a gross error to force your assumptions on users. There are any number of sites which offer email validation scripts and regular expression filters for what actually are valid and invalid addresses. Just making a guess with a less-than-complete ass is inexcusable for a company that provides Internet service to thousands.

Testing my hypothesis, I added a random letter:

Voilà! Satisfied that I was no longer a devious two-letter miscreant trying to slip past the wise validator with bogus credentials, it happily let me continue. I wouldn’t have been so surprised if it were a small online boutique, but from this company?

As the old joke goes, when you assUme, you make an ass out of u and me.

However, one thing that’s often overlooked is just as important, and will stop some people in their tracks from completing a form: stupidity.

Take, for example, this extract from a survey form from an affiliated site a major bookseller. Although I generally have many better things to do than click on links on my email to fill out online surveys, this was a lazy Sunday, so what the heck? First page, no problem. Second page presented me with this train wreck, such that I not only couldn’t continue, but had to post this to vent my frustration:

In case you’re baffled, wondering where’s the horrible usability issue, the problem is that the form is asking me to make an impossible choice. I’m a book lover, and I buy books from many different sources: Amazon, Borders, B & N, and I try to support my local independent stores as well, (which I wish I did more often). My specific recommendations would depend on which friend this is, and their specific priorities regarding the particular item they’d be interested in, e.g. cost, convenience, immediacy.

The key problem here is either/or choices are being forced upon the user, when the user may not necessarily think of the situation as being remotely exclusive, but as subtle, nuanced, and inclusive of many factors.

Check boxes would be what the doctor ordered here. This is a glaring problem on many forms. Users cannot give detailed, meaningful feedback on how they see things, if the form presumes to know a priori how they see things. This applies to more things than one might initially suspect.

Take the common fieldset “Select Your Religion” that you see on many social sites. Invariably the user is presented with list of popular choices (usually ending in “Other”) and a slew of radio buttons. This design undoubtedly works for many people, but it doesn’t for those who are questioning their religion, leaving it, changing it, or seriously exploring another without intending to make a complete conversion. These people might be better served by something more like: “Please Indicate Your Main Religious Preference(s)” and choices marked by checkboxes.

Is this overly picky? I think not. In the case of the choice of religion on a social networking or dating site, inappropriate either/or choices may indicate a bias against unconventional choices, particularly if the list is short.

In the case of the bookseller mentioned above, it conveyed a sense of not wanting to understand my preferences, which implies to me that they’re also not really interested in changing to help meet my needs and gain more of my business.

Bottom line: If you want honest, detailed feedback from users, or to make a positive impression on them, do not try to force the user’s mind to fit your form. Mold your form to allow them to express their mind.

Working on a new MacBook is like worshipping in the temple of the Goddess of Beauty.

Although on this particular site I use a fixed-width layout, I’m a huge fan of liquid layouts, as you can see at A1 ProCoat and frimmin.com. The common arrangement of a 640- or 800-pixel-wide fixed-pixel presentation floating in the middle (or worse, slapped against the left side of the window) of an 1200- or 1600- pixel-wide screen works for many situations (as for this site), but they have disadvantages as well. Web pages flow. W3C specifications speak of the flow of the page on the screen, but too many designers IMHO, don’t understand that the Web really isn’t print, and use pixel-perfect designs to try to translate a print message to the screen. Some problems I’ve noticed with these designs are:

• An absurd amount of wasted screen space; This will only get worse as monitor resolutions get bigger and bigger. I recently tested my personal site (all liquid) on a 2560-pixel-wide Mac monitor, maximized (or as close to maximized as Mac allows). It looked just as good as at 800px.
• Frequently, inaccessible text which can not be resized, which is amazing when you consider how many of these sites are in micro text! I propose every site should be tested by its designers for readability after 24 hrs. without sleep. (That would give some incentive to make the text scalable!)
• Frequently, an inability to think in semantic (X)HTML. (Great, you optimized it for a soon-to-be-obsolete monitor resolution, but what about the Palm? Or the cellphone? The Braille reader or text reader?)

Liquid layouts avoid these problems. They adapt to any size screen, they’re more conducive to thinking in terms of document flow rather than print positioning, and they simply “let the Web be the Web.” I can only speak for myself, but I think other designers who are comfortable using liquid layouts are probably also more comfortable thinking in semantic (X)HTML, and basic accessibility. Furthermore, they encourage users to resize, which is a great habit for users to get into, as they are the ones who ultimately know what’s “too big,” “too small,” or “too long” for themselves.

But there are disadvantages with liquid vis-a-vis fixed:

• Line lengths can become too long for extensive reading. (Easily remedied by resizing the browser window.)
• The huge screen resolutions available today, a layout stretched too wide can reveal “holes” or gaps where background images end. However, this can be worked around by using background colors in conjunction with background images, and making sure that the images used blend into the background colors.<”/li>
• A more serious difficulty is that images can break the layout when the window is made smaller.

Richard Rutter of clagnut.com » has done some fascinating work that solves the latter problem. I like his solution » of using percentage widths (with max-width set to actual width) for small and medium images, and overflow:hidden for wide images.

I’ve extensively used this technique on my personal website, The Wild Things of God.

NN4 will choke on a page where there is inline style on images, but this problem is rapidly becoming irrelevant as that browser fades from use.