A Site Where Three Boxes Cover the Phone Screen

The site

An independent toy and game shop on the main street of a Fraser Valley town, with an online store of about six hundred products, from board games to wooden train sets.

Open any page on a phone and three boxes arrive within a few seconds of each other.

A cookie notice rises from the bottom. A newsletter box offering a discount on a first order drops over the middle. A chat window opens itself in the corner and says hello.

What remains visible is the header and a strip of product photograph about the height of a thumb.

The inference a visitor makes

Most phone visitors arrive from a search for something specific: a particular game, a present for a six-year-old, whether the shop has it in stock today.

They came to look. Before they can, the shop has asked three things of them: accept our cookies, give us your email address, chat with us.

The conclusion is not about any one box: this shop wants things from me before showing me anything, and if looking is this much work, buying will be worse.

A strip of page also looks like a page that has not loaded properly. Some visitors press back and tap the next result, often a national chain with the price in plain view.

What fills the screen

• The fixed header, with the logo, a search icon and the menu button.
• The newsletter box, offering a discount in exchange for an email address.
• The cookie notice, eleven lines of text above a single Accept button.
• The chat window, opened by itself and asking how it can help.
• The product, in whatever space the other four have left.

The last is the one that matters. It is the reason the visitor came, and it has been given the least room on the screen.

A notice sized for a laptop

The cookie notice went in the week before GDPR applied, as notices did on a great many sites, using a plugin's default paragraph about cookies, consent, partners and preferences.

On a laptop that paragraph fills three lines along the bottom of the screen. A phone fits far fewer words on a line, so the same paragraph becomes eleven lines and a third of the screen.

The plugin also skipped a question: whether this shop needs a banner at all, which depends on whether it sells to Europe and what its cookies do. That belongs in a privacy review.

The newsletter box asks first

The newsletter box, the largest of the three, appears on every page as soon as it loads.

The visitor arrived with one task, finding a game. The box arrives with another, collecting an address. On arrival the two compete, and the visitor settles it by closing the box or the tab.

Its close button is a small grey cross just below the header's menu button. A thumb aimed at one often lands on the other, and the menu slides open over everything.

A shop that wants sign-ups does better asking once the visitor has seen what the emails would be about.

The chat window opens itself

Live chat is useful in a toy shop, where parents ask whether a game suits a particular age.

The trouble is the setting that opens the window after five seconds. A bubble in the corner offers help; an open window takes a third of the screen to ask whether help is wanted.

Here the open window also covers the cookie notice's Accept button. Tapping Accept to clear the screen opens the chat instead, which brings up the keyboard and pushes the page further out of view.

Each box comes from a different supplier with its own settings, and each is positioned against an edge of the screen, not against the others. None knows the others exist.

A worked example

The owner saw it over a customer's shoulder: a parent at the counter, phone held up to ask about a game, closing boxes before the price came into view.

Each box had been tested by whoever installed it, alone, on a laptop. Nobody had looked at all three together on a phone.

The fixes started with the smallest change that freed the most screen. The chat now stays a bubble until tapped, moved so it sits on no button.

The newsletter offer moved into the pages: a sign-up block under each product description, and an unticked box at checkout, since a box ticked in advance is not consent under CASL.

The cookie notice became one sentence linking to the privacy page, after a check of what the site's cookies do. On a phone it takes two lines.

Then the whole thing was tested on two phones, arriving from a search result, with everything switched on, and one person now approves anything that wants to appear over the page.

What Google makes of it

Since January last year, a page whose main content is hidden behind a box when someone lands on it from a mobile search may rank lower in Google.

The clearest case in Google's own guidance is a pop-up that covers the page the moment a visitor lands, which is exactly what the newsletter box does.

Notices a business is legally obliged to show, cookie notices among them, are not affected if used responsibly, Google said, and neither are small banners that close with one tap.

So the cookie notice is not the main search problem here; the newsletter box is, and it is a ranking risk taken for a box most visitors close unread.

The counter-case within the site

None of the three boxes is wrong on its own.

A cookie notice may be needed if the shop sells to Europe or uses cookies that require consent. The email list matters to a small retailer, and inviting people to join it is reasonable.

Live chat earns its place in a shop where staff can answer during opening hours.

On a laptop, where each box takes a corner, the three sit together more comfortably.

On a phone, though: one box at a time, nothing over the page on arrival unless the law requires it, and the product first.

What to change

1. Search for your shop on a phone and tap through.
2. Stop the chat window opening by itself.
3. Move the chat bubble off every button.
4. Take the newsletter offer out of the pop-up.
5. Add sign-up blocks under product descriptions.
6. Cut the cookie notice to one sentence.
7. Name one person who approves anything over the page.

Step two is the quickest and frees the most. A chat window that opens itself takes a third of the screen and the cookie notice's button, and one setting gives both back.

The same problem with the header alone is covered in fixed headers that cover half the phone screen.

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.