A Customer Survey Laid Out as a Grid of Buttons

Fifty small circles after every job

After each job, a renovation company emails its customers a link to a survey. The page shows ten statements down the left and five columns across the top, from strongly disagree to strongly agree.

Each row has five small round buttons, one under each heading. A customer answers by clicking one circle in every row, fifty circles in all.

On a desktop screen it looks orderly. For a customer using a screen reader, or holding a phone, it is a different survey altogether.

What a screen reader announces

A screen reader reads the page aloud one item at a time, and the customer moves through it with the keyboard or with gestures on a phone.

The column headings sit at the top of the grid, far from the buttons in row seven. Unless each button is labelled in the page's code, it is announced as a radio button, not checked, and little else.

The customer has to hold five column names and the current statement in memory for every answer. Losing track once means rating the wrong statement without knowing it.

What goes wrong on a phone

A phone brings problems of its own:

• The grid runs off the edge, so customers scroll sideways and lose the column headings.
• The buttons are tiny and close together, so a thumb lands on the neighbour.
• Zooming in to tap accurately hides the statement the row belongs to.
• The headings scroll away as the customer moves down the rows.
• A missed row is flagged only after Send, often at the top of a long page.

The last is where patience runs out. Being sent back up a long page on a small screen to find row six is a good reason to close it.

One question at a time

The same questions can be asked one at a time. Each statement becomes a short question of its own, with its choices written out underneath in a single column.

Each choice is a radio button with its own visible words, such as Very satisfied, tied to it in the code so that tapping the words selects it.

The choices sit in a group whose title is the question itself. A screen reader then announces the question with each choice, and a phone shows everything in one narrow column.

One question per screen suits a phone best. On a computer, several questions can share a page, as long as each keeps its own group and its own title.

Words instead of columns

Five columns of agreement ask customers to turn how they feel into a position on a scale. A question with its answers in words is quicker to read and harder to misread.

Write choices that answer the question as asked, in plain words, rather than degrees of agreement with a statement the company wrote.

Keep the same number of choices for similar questions, in the same order, so a customer is never surprised by which end is good.

A worked example

A scuba diving school on the coast teaches beginners' courses in a pool and from a boat, and emails each student a survey once the course is finished.

The survey was a grid: twelve statements about instructors, equipment, pool sessions, boat days and booking, against five columns of agreement, with every row required.

A student who relies on a screen reader emailed to say she could not tell which statement each button belonged to. Many surveys opened on phones were abandoned partway.

The school cut the survey to four questions: the course overall, the instructor, the equipment, and what to change. Each now stands alone, with labelled choices stacked down the page.

The question about what to change comes last, with a plain text box, and it is where the specific comments arrive. A screen reader now announces each choice with its question, and nothing runs off a phone's screen.

Shorter is kinder

Ten statements after a job feel like homework. The questions that matter are usually few: how it went overall, whether anything went wrong, and what to change.

Ask only what someone will read and act on. A question nobody reviews costs the customer time and teaches them to skip the next survey.

Say how long it is at the top, such as four short questions, and keep that promise.

Required answers and error messages

Make questions optional where you can. A customer who skips one still gives you the rest.

Where an answer is required, say so in the question's text, not only with a star or a colour. If one is missing, show the message beside that question and move the focus there.

Keep every choice the customer already made when the page comes back with an error. A survey that clears itself is rarely filled in twice.

Testing without special equipment

Try the survey with the keyboard alone: Tab moves between questions, the arrow keys move between choices, and nothing should need a mouse. If any step fails, a screen reader will struggle too.

Then open it on a phone, in one hand, and answer every question with a thumb. Nothing should require sideways scrolling or zooming.

Phones and computers come with screen readers built in. Ten minutes listening to your own survey shows where it loses people.

The counter-case

A grid is compact, and on a large screen with a mouse, a sighted customer can answer it quickly. Some form tools produce grids by default, and many respondents manage.

For a long internal survey of staff at desks, a well-built grid with every button properly labelled in the code can work.

But a survey sent to customers after a job reaches every kind of reader on every kind of device, and a few questions asked one at a time serve all of them.

Rebuilding the survey

1. Count the questions and cut to what you will act on.
2. Turn each grid row into a question of its own.
3. Write the choices out in words.
4. Label each button so its words select it.
5. Mark required questions in their text.
6. Answer the survey with a keyboard alone.
7. Finish it on a phone with one thumb.

Step one makes every other step easier. Four questions need little layout, fit any screen, and leave customers willing to answer the next time they are asked.

Another form detail that costs answers, a second button beside Send that empties every field, is covered in a reset button right beside the send button.

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.