The main purpose of a call to action link/button is to help a visitor do something.
Primary calls to action are bright red; secondary calls to action are grey. They used to have icons but have been redesigned without. You can find all the call to actions in the CTAs folder which is located in the editor-templates folder. Just drag and drop them into place, remembering to select the icon rather than the text. They adjust to fit either the two column layout or the one third area of a two-thirds one/third layout.
Ideally no more than two CTA bars should ever be stacked directly on top of one another, certainly no more than one primary CTA.
Writing a CTA
CTAs should always be phrased using an active verb, e.g. Contact us, Book a place, Sign up, Find out more, Do this. Phrasing such as Maps and directions or Falmer surgery details should not be used – they should be rephrased or a simple text link used instead.
When writing the copy in your button, bear in mind that the button will change shape when the web page is viewed on a small device like a tablet or smart phone, and the additional sentence may not appear.
CTAs should be unique, so if you have lots of CTAs on a page, for example on an events page, use some description of the event in the CTA, or if the events are the same but on different days then use dates to keep the CTAs unique.
The text will APPEAR TO BE ALL CAPS on the live website but should be entered in sentence case – the uppercase styling added by the page style sheet. Some screen readers read capitalised text letter-by-letter so entering words in all caps should be avoided.
Primary
A primary CTA (the red bar) is the primary action you want people to take on any single page. The one thing you want them to do. A primary CTA should always take you to the place where you can actually perform that action, e.g. a Contact us CTA should take you to a page with a form or contact details on it. An exception to this can be made when creating a ‘Come to an open day’ CTA (or similar), as booking can only be performed once the choice of event has been selected.
Secondary
CTAs for Read more, Find out more etc. should always be secondary CTAs (the grey bars).
When not to use a CTA
Never use a CTA saying Find a course or Search our courses – use a course search box instead so users can search straight away.
A CTA should not be used for an email address link. If the desired outcome of a page/set of pages is to garner contact from a user this should be done via a form instead.
A form will allow us to track the user’s journey, providing useful information and insight. A link to an email address will not. User testing has shown that people using certain email providers will not be able to access their emails directly by clicking on an email address on a webpage – most noticeably Gmail as there is no client for it. As about a third of our users cite a Gmail address they will all reach a virtual dead end. This is obviously to be avoided.
The form can be included on the page itself; or if a series of pages contain the same intent, a separate page for the form should be created and linked to from multiple pages using a CTA.
Adding the link to a CTA
The link on a CTA should be applied to the text. Just the text. The CMS will apply the link to the whole bar when it appears on the website.