10 things that will annoy the hell out of your Web site

Takeaway: It’s easy to get caught up in the implementation details of a Web site design project and lose sight of the hands-on user perspective. Calvin Sun airs a few user experience grievances that can alienate site visitors — permanently.

A hard-to-use Web site can be just as deadly to a business as a rude front-line service person. Once a visitor leaves in disgust, getting that person back can be next to impossible. Here are some potential irritants to watch for. Note that in many cases, the issue can be avoided without having to do special coding. Simple changes in text/instructions to the visitor alone are often sufficient.

1: Nonexistent instructions regarding case sensitivity

Tell the visitor explicitly if input must be case sensitive. Having to press that [Shift] key with your left pinky finger may not be a big deal, but it’s an effort nonetheless. Such instructions are particularly important if you require any kind of CAPTCHA input.

2: Having to guess at formatting of dates, phone numbers, or social security numbers

Be sensitive to input that is associated with special formatting, such as dashes in Social Security numbers or telephone numbers or dashes or slashes in dates. Tell the visitor whether the special characters must be provided — or must not be provided. Nothing is more annoying than entering a date with the slashes, only to find that you’ve run out of space. Equally annoying is when you enter the data without those characters, only to be told that they are required. The best option is to preformat the form. If doing so requires too much development, at least tell the visitor, via instructional text, the required format for the entry.

3: Transaction “false positives”

In medicine, a “false positive” refers to a test that says the patient is ill when the patient really is fine. In the world of Web pages, I use “false positive” to refer to a situation where a visitor thinks a transaction is complete, but it really isn’t.

A few months ago, my daughter called and said, “Daddy, where is the money that was to be transferred to my account?” I told her I was certain I had performed the transfer and that I recalled clicking on the bank Web site’s Submit button, but that I would go back and check.

Yes, you guessed it: When I did a test transfer, and arrived at the place where I previously clicked Submit, the Web page did not execute the transfer. All it did was take me to a subsequent page that asked me if I REALLY wanted to do the transfer. In other words, I erroneously thought that by clicking Submit, I had made the transfer.

Be careful about how you label the action buttons. Specifically, be aware that labels such as Submit might lead visitors to think that clicking on the associated button will perform a transaction. If it doesn’t, they will be upset later to find out they were wrong.

4: Transaction “false negatives”

Watch out for false negatives as well. You don’t want visitors to click a button, thinking they will not execute a transaction as a result, only to find that they really DID execute that transaction.

Continental Airlines uses a screen that has a button labeled Continue to Purchase. The first time I saw it, I thought that clicking it would take me to a screen that would show a summary of my proposed purchase and ask me if I really wanted to make the purchase. However, when I clicked that  button, the Web page actually purchased my ticket and charged my credit card.

A better label would have been simply Purchase, along with a text that said Clicking will purchase the ticket and will charge your credit card.

Avoid similar misleading labels on your own Web sites.

5: Misleading “Contact Us”

I wish I had a dollar for every time I clicked on a Contact Us link, only to see an email form pop up. When I click on such a link, I am looking for multiple ways to contact the organization, and email is only one of those ways. If you have such a link, make the result more than an email form. Take them to a page that shows physical address, phone number, and fax number.

Providing a link to an email form is fine, but label it appropriately as Email Us, not Contact Us.

6: Disabled backward navigation

He may ride forever ‘neath the streets of Boston,
He’s the man who never returned.

The song “MTA” tells the story of Charley, a man who gets onto a Boston subway. However, because he has too little money, he can’t get off, and he rides forever on that subway.

Your visitors will feel like Charley if the Back button is disabled once they enter your site. They will be annoyed at having to remember and retype the address of their previous site. If you do really want to disable the Back button, make sure you have a good reason for doing so.

7: Blanking out an entire data entry form due to one small error

In Greek mythology, King Sisyphus was ordered by the gods to push a huge boulder to the top of a hill. However, every time he almost reached the top, the boulder would slip from his hands and roll all the way to the bottom. For all eternity, Sisyphus would have to push that boulder.

If you have lengthy data input forms, how does your system handle errors in one or more fields? If it blanks out every field on that form, your visitors will feel like Sisyphus, and they’ll justifiably feel angry. When an input error occurs, try to save as much of the other valid input as you can.

8: Incompatibility with non-computer devices

Your Web pages possibly may be accessed by smartphones as well as computers, so make sure your pages can still be used by them. In particular, if you use drop-down lists, be sure that every item on that list can be chosen via the phone. For example, I no longer use infospace.com on my iPhone because I can select only states from Alabama to Kansas.

9: Primrose path links

The Web site avvo.com provides for reviews and rankings of physicians and attorneys. In particular, it allows attorneys to endorse other attorneys. One day, I was looking at my own profile and saw the Endorse this Attorney link next to my photo. Of course I clicked it. But when I did, I got a screen that said You cannot endorse yourself.

Such a link is what I call a “primrose path” link, because it leads nowhere. Rather than have such links, consider having logic that instead grays out or otherwise disables the link, depending on the context.

10: Failure to provide default responses

The 80-20 rule states that large effects can be the result of small things. For example, 80% of complaints come from 20% of your end users; 80% of your visitors visit 20% of your Web site; 80% of the time a given field will have only 20% of available options entered.

This last example illustrates the benefit of using default entries when appropriate. For example, if most bank transfer requests are “immediate” requests rather than “future scheduled” requests, consider defaulting the field accordingly. Your visitors will appreciate this feature. Of course, every Web page and every industry will have a different situation, so you will want to analyze your Web page data before making a decision in this regard. –Calvin Sun, http://www.techrepublic.com/blog/10things/10-things-that-will-annoy-the-hell-out-of-your-web-site-visitors/2523