A quick lesson on how not to design your calls to action

Note: This post is over 4 years old. It was first published in September 2009

Bryan and Jeffrey Eisenberg pack a lot of theory about the psychology of persuasion into the concept of a “call-to-action”, but at its simplest, a call-to-action is the area on a page that sums up its main purpose or goal – i.e. the bit that the designer wants the user to read and click on. A good call-to-action is one that’s rapidly noticed and easily comprehended. A bad one… Well, just take a look below. It’s rare to find a site that makes the same fundamental mistake over and over again like this.

acro-1

Above is a screengrab from theacropolismuseum.gr, the site for the new Acropolis museum in Athens. It opened this year, and it’s turned out to be a very popular tourist attraction. With that in mind, it makes sense to book your tickets in advance. It’s not too hard to find this page (Hours & Ticketing), but the next step is to enter the ticket booking process. So, how do you do that? It’s almost like they’ve hidden the “Buy Tickets” call-to-action on purpose, as a nondescript link right at the bottom of the page. This is the online equivalent of designing a supermarket with the tills hidden in the stockroom – hardly the definition of good business sense.

acro-2

Having clicked ‘Buy Tickets’, the user ends up here (above), which seems to be the first page of the booking process. The only thing we can see here is a text field. Where’s the rest of the stuff? Where’s the ‘next’ button? Where’s the steps-left indicator? It almost looks broken – as if the page hasn’t loaded properly. In fact, to proceed to the next step the user needs to enter a number into the text field, and then the next chunk of the form will suddenly be revealed. You can almost picture the user muttering to themselves – “Why on earth does this site have to work differently to the rest of the web?”

acro-3
Having entered the number of tickets, this calendar widget appears (above). Today’s date is currently selected. What are you expected to do now? Once again, there is no clear call-to-action. In fact, you have to click any date in the future and it will reveal which times are available.

acro-4
Phew! If the user’s got this far, they are probably getting the hang of this unconventional UI. They need to click on their desired timeslot to proceed, then they need to fill in their address, payment details and finally they reach a confirmation page, shown below.

acro-9

Here’s the confirmation page. The user will expect this to be emailed to them – that’s normal practice, right? Not on this site. If they don’t save or print this page, they are going to have real trouble getting into the museum. This key instruction is written half-way down the page, but once again the designers have made the same mistake of providing a weak, easily missable call-to-action.

To sum up, I’m hoping that this example has given you a reminder about the crucial importance of strong calls-to-action. It’s obvious stuff really, but we all make schoolboy errors from time to time.

7 comments