The following is an an excerpt from “Make Your Small Business Website Work, Easy Answers to Content, Navigation, and Design”
John Heartfield wrote and designed this comprehensive book on building and maintaining business web sites (Rockport Publishers).
The small business website information presented in this book refers to the timeless best practices for creating an effective small business website.
Available on Amazon.com
Every day, untold amounts of money are lost because of mistakes that should have, and could have, been easily caught and corrected.
Here’s one example (the story is true, but the product has been changed to protect the innocent): A web shopper hears about a website that sells a revolutionary new type of garden tool. The shopper types in the URL and arrives at a homepage touting the new tool, displaying a photo, and offering a special discount for buying direct from the website. The site boasts a prominent “buy now” button.
The shopper is impressed, gets out a credit card, and clicks “buy now.” A form appears requesting the usual information including a phone number field. The shopper types in all the information except the phone number (people are hesitant to give their phone number to ecommerce sites) and clicks the submit button. Instead of verification that the order has been received or a “thank you!” message, the shopper is taken directly to the exact same homepage with everything, including the prominent “buy now” message, as it was before.
The shopper assumes it’s some kind of glitch but feels the tool would really make gardening easier. The “buy now” button is clicked again and, once again, the same form appears. All the shopper’s information is still in the fields of the form. The shopper doesn’t see any errors in their credit card info and, once again, the shopper in sent to the homepage. Once again the shopper is sent to the homepage.
Forget it, the shopper thinks, I’ll live without it.
The problem? The form was located “below the fold” (the non visible area of a long vertical page in a browser open to normal size). When the shopper clicked “buy now” instead of going to a new page, the navigation used an “anchor” (an marker inside the page) to jump to the form at the bottom of the page.
When the shopper clicked submit, the website detected an error. The phone number field was empty. The page was loaded again. But since the form was below the fold, the homepage appeared normal. The only difference in the newly reloaded homepage page was that a small line was added above the buy form noting that the phone number field could not be left blank. When the shopper clicked “buy now” again, the “you must complete the phone number field” message was, in essence, invisible to the shopper. Of course, the shopper could have put any phone number into that field.
If the person who designed the navigation above had read this book, that company would be shipping many more orders.