Orders That Cannot Be Checked Before Sending

One press and it is gone

An order form asks for a date, a size, a quantity and an address, all on one page. At the bottom is a button marked Submit, and pressing it sends the order straight to the business.

There is no page that says what was ordered before it goes. The first summary the customer sees is the confirmation email, if there is one, by which time the order is being prepared.

A wrong date, a wrong size or an extra zero gets noticed when the delivery arrives, or does not, or when the invoice does.

Then both sides spend time unpicking it, and the business often absorbs the cost to keep the customer.

Who gets caught out

• Screen reader users, who hear the form one field at a time.
• People using magnification, who see only a corner of the page.
• Readers with dyslexia, for whom 18 and 81 can swap places.
• Anyone with a tremor, a small slip away from the wrong option.
• Phone users, fighting scroll wheels, autocorrect and small targets.
• Everybody interrupted halfway through by a call or a customer.

The first is the one designers think of least. A sighted person glances back over a form before pressing the button. Someone listening to it has no glance, only a long trip back through every field.

What WCAG 2.0 asks

The WCAG 2.0 accessibility guidelines address this directly. At level AA, the level most sites aim for, forms that commit people to money or to a legal agreement need a safety net.

At least one of three things should be true.

The submission can be reversed. The entries are checked for errors, with a chance to correct them. Or there is a step to review, confirm and correct everything before it becomes final.

The third is the most useful for a small business, because it catches the mistakes no automatic check can know about: the right size for the wrong person, a valid date in the wrong week.

Why one-page forms get built

A single page feels quicker, and nobody wants to add a step that might lose customers.

Many form tools also default to sending the moment the button is pressed, so a review step has to be asked for.

But the step that loses customers is a confusing one. A clear summary with one obvious button takes seconds, and people expect it from any site that takes their money.

What a good summary shows

Every choice, in words rather than codes: the date written out with the day of the week, the size by name, the quantity in large figures, the delivery address as entered.

The total, including tax and delivery, and anything that cannot be refunded or changed later.

A Change link beside each line that returns to that field with everything else still filled in. Making people retype a form to fix one detail punishes the very care the summary is meant to encourage.

And a final button that says what it does: Place order, Confirm booking for Saturday, Send to print. Submit tells nobody anything.

A summary everyone can use

The summary itself has to be accessible. Real text, not an image of the order, so screen readers and magnifiers can read it.

A heading at the top, such as Check your order, with the keyboard focus moved there when the page loads, so people using screen readers know the page has changed.

Change links labelled with what they change, such as Change quantity, rather than ten links that all say Edit.

No time limit that clears the order while someone reads it slowly. If a limit is unavoidable, a warning and a way to extend it.

A worked example

A print broker arranges business cards, letterhead and brochures for a few dozen offices, placing each job with the trade printer best suited to it.

Repeat clients reorder through a form on the broker's site: the item, a quantity from a drop-down, the paper, and the staff member's name and title exactly as they should print.

The form sent each order straight to production, and files went to the printer that afternoon.

An office manager ordering cards for a new hire chose 5,000 instead of 500, one arrow key away in the drop-down, and typed the title with two letters swapped. Nobody saw either until the boxes arrived.

The broker reprinted at its own cost and rebuilt the form.

Orders now end on a review page that shows the card as it will print and the quantity in large figures beside its price. A Change link on each line keeps everything else as entered.

The final button reads Send to print. The confirmation email repeats every detail and says changes are still possible until files go to the printer at three.

After the button

A confirmation email that repeats the order in full gives a second chance to spot a mistake, and a record nobody has to search for.

Where the work allows it, a window for changes after ordering covers the reversible option in the guidelines too: until the files go out, until the van is loaded, until the day before the booking.

Say how long that window is, on the summary page and in the email. A customer who knows they have until three to fix a typo will look again.

The counter-case

A contact form or a newsletter sign-up commits nobody to anything, and adding a review step there only slows people down. The step belongs on forms involving money, bookings or agreements.

A business that phones every customer to confirm an order already has a review step, though a person reading back twenty fields is slower and less reliable than a page.

Wherever money or a commitment is involved, the advice holds: show it all back in plain words, let people fix any part, and label the last button honestly.

Adding the review step

1. List every form that takes money or bookings.
2. Add a summary page before the final button.
3. Write dates and sizes out in words.
4. Keep entries intact when someone goes back to change one.
5. Rename the final button after its action.
6. Repeat the details in the confirmation email.
7. State the change window in both places.

Step four decides whether anyone uses the summary. If correcting one line means losing the rest, people stop correcting and start hoping.

Form controls that act before a choice is made are covered in a drop-down list that jumps as soon as you choose.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.