The review checklist

Half an hour is enough

Open the screen on a computer and on a real phone. Go through it once with the mouse, once with only the Tab and Enter keys on the keyboard, and once with your thumb. Then fill in every form wrongly on purpose, and empty every list you can. Keep notes as you go, with a screenshot for each problem, and answer the questions below.

Forms

Can you still see the name of every box while you are typing in it? Is any hint written under the name rather than in grey inside the box? Did your phone show the right keyboard, and did it offer to fill in your name and email? When you made a mistake, did the message appear under the right box, in words and not only in red, and was everything you had typed still there? More on the Forms page.

Buttons

Is it obvious which button matters most on this screen? Does each button say what will happen, like “Save changes”, rather than “OK”? When you press something slow, does the button show that it is working? Does a greyed-out button explain what is missing, and can you undo a deletion? More on the Buttons page.

Menus and navigation

Do the menu words match what your customers would call things? Can you tell which page you are on, without relying on colour? Is there a “Skip to content” link for keyboard users, and does the Tab key move through the page in a sensible order? On a big site, is there a search box and a trail back to the start? More on Menus and navigation.

Tables

Are the numbers lined up on the right and the words on the left? Does the heading row stay in view on a long table? If a column is sorted, can you see which one and in which direction? And what happens to the table on a phone? More on the Tables page.

Waiting and messages

What does an empty list say, and does it show how to start? When something takes more than a second, can you see that it is working? When you turned off the internet, did the error say what happened and what to do? Did a “Saved” message stay long enough to read? More on Empty, loading and error screens.

Colour and contrast

Is all the text dark enough to read on your phone outside? Would the meaning of every red and green still be clear in black and white? When you moved around with the Tab key, could you always see where you were, and did nothing ever cover it? More on Colour and contrast.

Tap sizes

Could you hit every button with your thumb on the first try? Are small icons spaced out enough? Check the close crosses, page numbers and links at the bottom of the page in particular. More on Tap sizes.

Pop-up windows

Does a pop-up only appear when you really need to answer something? Does the Escape key close it, and do you land back where you were? Do its buttons say what they do? More on Pop-up windows.

Phones

Try it on the smallest phone you can find and zoom in with two fingers. Did you ever have to drag the page sideways? When you tapped into a box to type, did the whole page jump? Could your thumb reach the buttons you needed most without shifting your grip? And did the pictures arrive quickly, or did you sit looking at blank squares? More on Phone layouts.

Words

Does each thing have the same name everywhere? Could anyone misread a date? Do prices show the currency? Do links say where they lead, without “click here”? More on Words on the screen.

Text size and spacing

Is the normal text at least 16 pixels? Are the lines a comfortable length, not running across the whole screen? Is there enough space between lines, and do things that belong together sit closer to each other? More on Text size and spacing.

After the review

Some fixes take five minutes: writing a name above a box, changing “OK” to “Save changes”, picking a darker grey, adding a little space. Do those straight away, today if you can. Others need real work, such as designing an empty screen or rethinking a wide table for phones. Write each of those down with its screenshot and a link to the page of this handbook that explains it. Whoever takes the job later will then see the reason, not just the request.

Come back to this page whenever the screen changes. A checklist only helps if you use it every time, not just once before launch.