Cookie banner wording: say what each choice does

Your banner was built on a laptop, where the page is wide and the buttons sit where you expect them. A phone visitor meets it in a narrow column, with the browser's address bar moving, and the banner often sits over the bottom of the screen. Before they can use the site, they have to choose. If only a bright Accept button is visible, they press it to make the banner go away, and they have agreed to tracking they did not read. If the way to refuse is a small grey link under three screens, they leave instead. Either way, the site loses that visitor.

• Accept and reject sit side by side, with the same size, weight and style.
• The banner names the cookie groups it sets, such as analytics, advertising and preferences.
• On a phone, the banner does not cover the first button or the first line of the page.
• After a choice the banner closes, and it stays closed on the next page the visitor opens.
• The link to the full cookie policy opens a readable page, not a broken one.

A banner that says we use cookies to improve your experience gives the visitor nothing they can act on. Name the groups you set. Say that analytics cookies count visits and pages, that advertising cookies follow visitors to show ads on other sites, and that preference cookies remember settings such as language. Then say what the site works without. Compare Cookies help us improve your experience with this: We use analytics cookies to count visits, and advertising cookies to show our ads on other sites. Turn either off below. The site works either way. The second version lets the visitor refuse one thing and keep the other.

The quickest test of a real choice is counting taps. Accept should take one tap from the banner, and Reject should take the same. A banner where Manage preferences leads to three toggles, a save button and a confirmation screen treats refusal as a task, and a hurried visitor takes the shorter path, which is Accept. Put Reject all in the same row as Accept all, at the same size and weight. If you offer detailed choices, put them one tap away as well, and do not hide Reject all inside them. The test records each step a visitor took, so you can see which path they took and where they gave up.

On a phone, a fixed banner at the bottom of the screen can cover the button or the first line you want the visitor to read. The browser's address bar and toolbar change height as the page scrolls, so a banner that clears the button in one position can cover it in another. Look at the first screen on a phone, in both orientations, with the banner open and closed. If the visitor cannot reach the main action until they click something in the banner, the banner is a gate, and better wording will not fix that. Shrink it to a small bar, or move it to the top of the page, and check again.

The banner goes stale when someone adds a tag. A new chat widget, an ad pixel or a heat map script can set cookies your text does not list, so the wording is now wrong. Rerun the same visitors through the banner after each new tag, and ask one of them what it thinks the banner promised. With paid credits, visitors can also get past a login with a test account and check the banner inside the app.