Shubh Singhi / Design / July 11th, 2014

World Cup Magic Foam and the Importance of Clear Calls to Action

Even if you’re not a soccer fan, you’ve got to admit – it’s been hard to avoid catching at least a touch of World Cup fever. At the very least, it’s offered an excuse to slip out of the office and over to the nearest bar for long lunch break, but it’s also been one of the most watchable sporting events of all time.

As a lifelong soccer fan, I was very happy to see that FIFA officials and broadcasters have really improved the spectator experience. First, they banned the ear-splitting vuvuzelas from every stadium, and referees cleared up a lot of confusion with the magic foam that gets pulled out for every free kick.

vuvuzela

Historically, referees have been ineffective at enforcing the 10-yard rule on free kicks outside the penalty box. After a foul, all defenders must be at least 10 yards away from the ball for an unchallenged kick. This distance has constantly been encroached, as players are known to creep closer to the ball as the referee turns his attention away to other duties.

The result: an unfair free kick where the opponents are essentially a few footsteps away from the ball, not to mention the fact that spectators have no idea where the (very) fluid line of defenders is supposed to be.

This World Cup, however, referees have a magical vanishing white-foam spray that explicitly and visually shows the 10-yard line. The ref sprays the water-based foam around the ball, then walks 10 yards and sprays another line that the defenders can’t cross.

10317544_803663576320223_2631027859612212228_o

The results have been remarkable. We have yet to see any defender encroach the line. Somehow, this visual aid has forced defenders to obey the rules.

In essence, it’s a clear call to action: stay behind the line, no exceptions.

The simple nature of a line of white foam is what has made it so effective, both for keeping players honest and for improving the spectator experience. And like so many things in the physical world, we can apply the best aspects of World Cup Magic Foam directly to improving the calls to action on our websites.

It’s Obvious

Some of the best CTAs seem obvious in hindsight, and this is one of them. As a follower of regular league play, the foam in the World Cup was a pleasant surprise that just seemed like a no-brainer once I saw it. A simple, elegant solution to a common problem.

It’s Straightforward

The referee doesn’t negotiate with the defenders. It’s not a discussion. His call to action is direct, simple, clear and easy to follow. Website calls to actions should be similar. Be succinct and unambiguous.

Payment startup Coin is a prime example of this. The site introduces the product, shows its benefits, gives the user a feeling of exclusivity and has one simple CTA: Pre-Order Now. It’s direct and effectively guides the user to the only appropriate action.

Screen Shot 2014-07-10 at 11.22.26 AM

There’s No Other Option

Users on the field really only have one option: stay behind the line or potentially be carded (and don’t even get me started on the simplistic beauty of yellow and red cards).  It’s effective, and CTAs should be the same. Avoid multiple CTAs when possible, especially on the homepage. Users are more likely to make decisions when you give them no other options. Identify the most important decision for each page, and funnel your users directly to it.

Some CTAs create themselves. (AP Photo/Matt Dunham)
Some CTAs create themselves. (AP Photo/Matt Dunham) 

The Color Signals a Desired Behavior 

The vanishing spray is white. Some may think it’s an obvious choice, but consider that on almost all patches of grass, white is the color of boundary lines. With UX design, we’ll talk about creating red routes that show users a path to a task we want completed, and the importance of color should not be ignored.  Whether you’re using ghost buttons or full colored buttons, be sure the color you choose matches the desired behavior.

In soccer, white is a clear choice for a decisive boundary, but on the web you have the freedom to test which color best supports a CTA.

It Disappears When Not Needed

A call to action is only useful when you actually want someone to perform a desired behavior. The foam was made to last long enough to keep players honest and then disappear during the run of play. Action performed, and then it’s gone. On a website, we might remove the main navigation on a form page to keep users focused on the task at hand and then return it once they’ve completed our goal. The spray lasts just long enough to achieve its task, and then it’s gone until needed again.

Image credit: DonSimon