Buttons
Buttons
Overview
Buttons can be used for in-page navigation and calls to action (CTA).
Buttons can be added to a page using the Content Blocks content type '08. Button'.
Your link text should be a short and descriptive. We recommend two to four words. The text should be sentence case.
Individual buttons float to the left. If two buttons are added next to each other in T4 they will appear on the same line. On mobile the buttons will stack in the order you have added them.
Blue link buttons are used for in page navigation. They help you create a path for users to follow a set of pages or tabs, process or a journey. They should point to main sections within your site, ideally leading users to a page with a clear CTA red button.
Red Call to action buttons are used more for transactions, to provide a next step. They should prompt your users to complete a task, eg buy/order/book/enquire/contact.
Take a look at our examples of pages and the different CTA's that should be used. You can also read our good practice tips for buttons.
Identifying Calls to Action
Different pages need different types of CTA. Use this page of examples to help decide what kind of CTA is appropriate for you.
You can decide the text your button/hyperlink/grid needs to display. These examples show the types of CTA that are suitable for specific pages. If you need help deciding contact us for help. Also look at our top tips.
|
Examples of CTA - Red Button Leading to application/booking/paying etc |
Examples of CTA - Navigational These could be Hyperlinks/grids/blue button |
|---|---|
| Undergraduate/Postgraduate prospectus course page (How to apply button) | Home page (Grid layout for top level navigational sections) |
| Contact/Find Us (button for Google Directions and/or online contact forms) | Masthead pages for top level navigational sections (Links to lower level pages in section) |
| Bookable events/seminars (Booking button) | Grid pages for top level navigational sections (Links to lower level pages in section) |
| Accommodation venues (Apply button) | School/Research Centre/Institute Undergraduate or Postgraduate pages (Links to relevant central prospectus pages) |
| Funding pages (Apply for funding button) | Research themes/groups/projects (Links to research.ncl.ac.uk sites) |
| Visit Us/Open Day (Booking button) | Staff lists and Staff Profiles (Links) |
| Publications (Search publications button) | News (Links) |
| Conferences and Catering venue pages (Enquire for availability button) | Student Profiles (Links) |
| Payment pages for rent/course fees etc (Pay online button) | Facilities (Links) |
| Working with business (Contact us button) | International page (Links to relevant central International websites) |
| Global Impact Fund/Research Impact (Donating for research button) | History of School/Service page (Links to central Who We Are website) |
| Direct Debit/bank transfer instructions/accommodation rent payments (button) | Non-bookable events/seminars (Links) |
| Alumni enquiries and donations (Enquiry or donation button) | Any page or tab that leads to another page with a transactional, Red button |
| Volunteer sign-ups/getting involved with research/experiments/treatment (button) | |
| Continuing Professional Development (CPD) course pages (Book online, expression of interest, payment button) |
Good Practice Tips
Follow our tips on how to use our call to action (CTA) buttons.
You can build your pages using different content types. Here are our tips about how to use CTA buttons with them.
Images and videos
If you are using a red button, you'll be trying to get users to complete a transaction or a task. Only use one image or video. More images distract the user and lessen the visibility/impact of your button.
Grid layout pages
Avoid red CTA buttons on grid pages. Grids contain many images which will also distract and lessen the impact of your button.
Hyperlinks
Try to limit the number of in-page links on a page that has a button. Leading the user off to another page leads them away from your goal.
Placement on a page
Your button should be the climax to a short story for your user:
- Introduction - brief context of what the page is about
- Rising action - instructive content for your users about how to join/get involved/book/buy/sign up etc
- Climax - your call to action
Try to keep your button towards the top of the page, making it easy to spot on all mobile devices.
Don't put your button on a separate page, away from your content. Often you will have text explaining to the user what to do, how to make a booking/when the visit day takes place - keep the button with this explanation to make sure they engage.
Use one button per page - too many will confuse the user over which one to use.
Expandable Content
If you have lots of detail to explain that relates to your CTA, use expandable content. This helps you to add the context you need to the page, and keep the button visible to the user. Don't 'hide' volumes of content in expandable boxes - they break.
PDFs
Avoid using PDFs on a page with a button. Like hyperlinks, they take your user away from your goal.
Tabbed pages
If separate tabs on a page complete a whole user journey, the CTA button should be placed on the final tab. For example a UG course page with tabs for overview/entry requirements/careers/funding/apply - CTA is on the final tab.
If each tab features a different CTA, then each tab should have a button.