Get attention! Popups aren’t the answer. Red, and relevance are.

When I was working at British Airways, every so often someone from the operation would get in touch, and ask that we put a popup in the selling flow to inform customers of what to do with pushchairs at the airport, or some other issue that people needed to know about. I always said no. It wouldn’t be effective.

Popups are actually not a good way of getting people’s attention. When users are on a site, unless they are bored and just clicking around, they have a goal. A popup is automatically assumed to be a distraction to that, especially in an environment where a popup is most likely to be an ad, or an invitation to a survey. I’ve seen this repeatedly in research.

One time, we had designed a flow where people could change their flights. We tried a popup as part of the flow to warn customers that if they had also booked a hotel, they would need to change that booking separately. I clearly recall one respondent who was working through the process. He saw the popup, clicked to close it, and carried on.

The researcher asked ‘What was that about’?

Respondent ‘What was what about’?

Researcher ‘The popup, what did it say’?

The respondent had a brief frowning moment of thought and his eyes flickered (interesting body language which you don’t get from phone interviews). Then he said ‘I don’t know, I didn’t read it’.

The style of popup doesn’t matter. Whether it’s old-style floating window, or a modal, it’s all the same.

I think that Daniel Kahneman’s ‘Thinking, Fast and Slow’¬†whilst a bit of a slog as a read, should nevertheless be essential reading for any UX designer. Our system 1 brains are lazy, and don’t do much thinking. They go click, click, click. System 2, that does the thinking, doesn’t want to get involved, and will only do so if system 1 calls for help. In the case of this popup, there was nothing that snagged system 1 to pause, so it went click in pursuit of an easy goal.

If you book a flight today on, you’ll see a form like this.

BA flight booking details

Then, once you’ve chosen a flight, you’ll probably be asked if you want a hotel too. If you follow the link, there’s another form.

BA hotel details

Leaving aside the fact that there’s too much whitespace, at first glance, this could look like something you’d already done. An earlier version of this process presented this form in a popup, and the heading was ‘Please specify your trip details’. Most people skipped past it. We eventually changed the heading to ‘You and your room’ which is now ‘How many rooms do you need?’ in the form above. This heading snags the system 1 brain, and forces to system 2 to come in and think about it. I think in the latest form the heading still needs to be more prominent, as otherwise some people will still miss the relevance.

There’s that word ‘relevance’. In order to snag system 1, and get people to pay attention, they have to see something that, consciously or unconsciously, is relevant to them. If you’re on a site looking for ‘books’, you can scan a page, and snag the word. It’s a bit like the cocktail effect, where you hear your name mentioned in another conversation, even though you weren’t paying attention. That’s why you shouldn’t have bland placeholder headings. Headings should contain sufficient semantic information to allow the user to determine whether the content below is relevant to them.

And then there’s red. The colour red has physiological arousal effects on us. It gets attention. It’s the colour of blood. That’s why error messages are so often presented in red. I’ve seen sites with icons (which do help), boxes, borders, great swathes of block colour asking to be looked at, and I’ve missed all of them. Red catches your attention. If there’s something you really need people to see, use red. I’ve used this method over and over, and it works. Sometimes I have trouble persuading people that their icon and block design won’t be as effective as it needs to be, and they should use red, and we have to resort to a test just to find out that I was right (I’m not always, you may be surprised to hear).

It doesn’t have to be a lot of red. Of course, there’s a problem if your entire site is based on red – or even orange or green, for colour blind users. I’m red/green blind, as about 10% of males are. Yet whilst I can’t distinguish shades, I still see red, and it snags me. And, again of course, the design needs to work in context, but I’m talking about principles here.

On a final, and quite important note, the use of red does not apply to text. I often find red text hard to read, especially when it’s on a coloured background. The red is just there to get attention. Then you apply design skills to the communication itself.

Hopefully, you get the logic of this, and won’t see red.