Prices Placed Far From the Products They Belong To

Across a wide screen

A lighting shop's website lists its pendant lamps in rows that stretch across the whole screen. Each row starts at the far left with a small photograph and the lamp's name.

The price, a quantity box and an Add to cart button sit at the far right. On a large monitor, a hand's width of empty space separates each name from its price.

A customer using a screen magnifier sees a small part of each row at a time. She reads a name, crosses the gap to find a price, and cannot be sure she is on the same row.

Nothing on the page is wrong, exactly. Every detail is there, just too far from the details it belongs with.

What a magnifier shows

A screen magnifier enlarges part of the screen to fill the whole display. The user sees a small window onto the page and moves it around with the mouse or keyboard.

People with low vision use one, either the magnifier built into Windows and Mac computers or a separate program. Others simply zoom the browser a long way in.

Magnifier users read a page in pieces, holding the layout in memory as they move.

Seen that way, a wide row is a long trip across empty space, and nothing keeps the eye on the right line.

What gets lost in a wide layout

When related details sit far apart, a magnified view loses the connections between them:

• Which price belongs to which product.
• Which button adds which item to the cart.
• Which option, such as a finish or a bulb type, goes with which name.
• Whether a note such as sold out applies to this row or the next.
• The column headings, which scroll out of view at the top.

Each of these leads to a wrong order or a phone call. A customer who orders the wrong lamp may blame herself, but the layout made the mistake easy.

Large monitors too

It is not only magnifier users. On a large monitor at full width, the eye travels a long way from name to price, and it is easy to land one row up or down.

Shops designed on a laptop rarely notice. The layout looked tidy at the width it was built for and stretched when someone opened it on a wider screen.

The fix is the same for both groups: what helps a magnifier user also helps every visitor scanning a long list.

Keep related details close

People read things placed close together as belonging together. A price directly after a name, or just beneath it, needs no effort to match.

Group each product's details into one compact block: photograph, name, short description, options, price and button. On a list, that block is a short row; on a grid, it is a card.

Limit how wide a list can grow, so rows stay short on large monitors. Where a row must stay wide, light shading on alternate rows or a thin line between them helps the eye follow it.

A worked example

A chair and table rental company in Kamloops, which also supplies linens, tents and dishes, serves weddings, reunions and company events from a warehouse with a small showroom.

Its price list was one long table across the full width of the page: the item at the left, the description in the middle, and the daily price and an Add to quote button at the right.

Customers sometimes quoted the price of the row above when they phoned. A regular customer who uses a magnifier said she had stopped using the list and simply called instead.

The list is now grouped by category, each item on a short row: name, then price per day, then quantity and button, all within a narrow column. Descriptions sit beneath the names in smaller type.

Rows are shaded in turn, each category's heading stays in view while scrolling, and the page was checked with the magnifier built into Windows before it went live.

Name, price and button now fit inside a magnifier's window together, so there is nothing to match across the page.

Forms and carts

The same gap appears elsewhere. A form that puts each label at the far left and its box at the far right leaves magnifier users unsure which box they are filling in.

A cart with the item name at the left and the remove link or line total at the right has the same weakness. Keep labels directly above or beside their boxes, and keep cart lines short.

Error messages placed far from the field they refer to cause the same confusion, especially on long forms.

Checking a price list

Open each product and price list on the widest screen you can find, zoom the browser in several steps, and read a few rows from name to button.

Then turn on your computer's magnifier and try to order one item without moving back to the left to check. If you have to check, the layout needs work.

Better still, ask a customer who uses a magnifier to try it while you watch. A few minutes of watching will show more than any checklist.

The counter-case

Lists with several prices per item genuinely need columns. A rental list with prices per day, per weekend and per week has to line them up so people can compare.

A table is the right tool there. Keep it as narrow as the content allows, label every column clearly, repeat the headings on long lists, and keep each name close to its first price.

On phones, a responsive layout usually stacks each product's details anyway. The wide gap is a problem of large and magnified screens, which is why it goes unnoticed by anyone testing only on a laptop.

What to check on every list

1. Open each price list on a large monitor.
2. Zoom the browser in several steps.
3. Try ordering one item with the magnifier on.
4. Group each product's details in one block.
5. Limit how wide lists and tables can grow.
6. Shade alternate rows on lists that stay wide.
7. Keep form labels beside or above their boxes.

Step four solves most of the rest. When a product's name, price and button sit in one block, there is no gap to cross, whatever the size of the screen or the magnification.

Another way details slip past some readers, a sale posted as words inside a picture that screen readers cannot read, is covered in social posts that are only a picture of words.

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.