What we are making: buttons that look like buttons, say what they do, and confirm that they did it.

Three things a control has to do

1. Look pressable. A blue underlined word does not. A big block with a border does. You styled one in session 14 — use it.
2. Say what will happen, not what is happening. A button labelled ‘OPEN’ should open the gate. If it is a label showing that the gate is open, it should not look like a button at all.
3. Confirm it worked. Something on the page has to change. Otherwise people press it again, and again.

The mistake everybody makes

Last session's page had a link saying OPEN and another saying SHUT. Fine. But what does the page show when the gate is already open? If the OPEN button is still there, looking exactly the same, the visitor has no idea whether anything happened.

The fix is the state variable you wrote in session 11. The page knows. It should show it.

Do it

1. Restyle your links as blocks — padding, a background colour, rounded corners.
2. Make them big. A finger is about 10 mm across and is not accurate.
3. Show the current state at the top of the page, in words, larger than the buttons.
4. Grey out or hide the button that does not apply right now.
5. Hand your phone to somebody who has not seen it and say nothing. Watch.

Write down

• What the stranger did first.
• Anything they hesitated over.
• Anything they pressed twice — that is always missing feedback.
• The one change you made as a result.

What you learned

• A control must look pressable, say what it does, and confirm it happened.
• The state your device holds should be visible on the page.
• Watching one person use it teaches you more than an hour of your own opinion.