Page anatomy

Page layout

The tutorial page uses the two column - information page layout.

1

Heading (page title)

2

Header description

3

Left hand navigation

4

H2 Sub-headings

5

Image or video

6

Call out

7

Download call out

8

Call to action

9

Read next

A direct, short title that tells the user what the page is about.

  • The page title can use one of two formats:
    • An action e.g. “Develop a business plan”
    • [Number] steps to [topic]. e.g. “10 steps to selling your product”
  • Maximum character limit of 50.

A short paragraph that expands on what the main action on the page is and why it is important.

  • The supporting text should explain who the page is for, what the user will learn and the benefit of the page.
  • Maximum character limit of 350.

The in-page navigation that allows users to skip to a sub-section via an anchor link.

  • Built off sub-headings used for each sub-section on the page.

Short titles used to break up the content into sub-topics.

  • Maximum length of one line.
  • Don’t hyperlink the headings.
  • Avoid replicating the page title.

Optional supporting media to enhance the text content.

  • Use only one per page.
  • Use an image OR a video, but not both.

Used to highlight a supporting example, important information or a formula.

  • Only use one per sub-section.
  • Maximum word count of 200.

Used to highlight important related resources that are available to download.

  • Maximum of four per call out.
  • Each one is for a single resource.
  • The links in each one are used for different document formats of the same resource or two closely related resources. (e.g. Business plan template & guide)

Optional. Used to highlight an important internal or external site section or tool.

  • Only use one per page.
  • Maximum of three words in the text on the button.
  • Maximum of 50 characters in heading text.
  • Maximum of 100 characters in body text.

Used to direct the user to what they might find most helpful next.

  • Always use “Read next” for the heading.
  • All links should be internal links.
  • Maximum of three links.

Guidelines for use

Purpose

A tutorial page is a page with steps and actionable guidance that help a user complete a more complicated task or understand a more complicated topic.

It should always include:

  • An explanation of what it is, who it is for and what the outcome at the end will be for the user.
  • A clear explanation of the steps involved.
  • Co-ordinated sub-headings that follow a similar style to create an overview of what’s on the page.
  • Something for the user to do (example link, read, task).

It must NOT include:

  • Content with no outcomes or processes for the user.
  • Low-quality content on the topic that is out-of-date, lacks the depth needed to be helpful or contains conflicting information.
  • More than three pieces of content the user is directed to at the bottom of the page.

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.