The step-by-step feature helps users scan and understand complex processes. It can be used instead of standard web page content, where relevant.
How it works
Step-by-step feature is a clear, simple way to display easy-to-follow steps. It uses visual design cues to:
- break up content
- call attention to key information
- help the user understand where they are in the process.
Each step is presented collapsed by default. In this view, it shows a title or title and summary text to signpost the detailed content. This ensures the page is visually simple and easy for the user to see an overview of the process at a glance.
Explore our step-by-step guide to understand the feature and how it is used.
Need to know
This ‘Need to know’ section gives a high-level overview of the key facts the user should know before they start. We use icons with the key facts to provide visual cues.
Items in this region could include:
- Indicative timeframes
- Key eligibility criteria
- A rough indication of costs
Web publishers: This content is presented in a general callout box style (class="box-4").
1
See if the step-by-step feature is right for your content.
When to use this feature
To be suitable for this feature, your content must:
- be a task or set of actions with a specific start and end point
- need to be completed in a specific order
- be useful for steps to be collapsed into an accordion.
Only use the step-by-step component to represent a defined journey with a beginning and an end.
What is included on the page
The step-by-step component can consist of:
- an overview information section, including a ‘Need to know’ callout box
- content section presented in steps
- a footer for contact details.
The overview is simple and introductory. Use it to help the reader understand if this is the right page for them. Don’t start explaining the task – leave that for the step-by-step section.
The step-by-step content section is the majority of the page. This is where you break down your process into steps, which are structured in an expand/collapse accordion.
The footer is a simple callout box at the end of the page. This is used only for support tasks such as general contact information.
Decide if this is right for your content
The step-by-step feature can be a great tool to help users through a defined process.
If this doesn’t sound right for your content, consider a standard web page. See how to write and style content.
You can also ask the Web User Experience team for advice. Contact web.ux@aff.gov.au
2
What to keep in mind when planning and writing your step-by-step content.
Plan your content
Plan your content so each step in your process is clearly defined and parallel with each other. This is what is visible when accordions are collapsed, so they need to form a clear summary of the whole process.
Each accordion/step can include one or more sub-steps within. Use this to chunk the task down into a series of clear actions.
You can also use callout box styles to highlight important information within a step.
Keep in mind that you will need to ensure your content meets web usability requirements.
This is explained in Step 3.
Callout boxes and icons
Callout boxes and icons are used as visual cues to highlight important information, and for breakout or 'pause' moments in process flow.
They can also convey to the user that the ability to continue through the process is conditional on the outcome of an action or decision.
Callout boxes can contain a combination of:
- an icon
- an instruction or outcome on the first line (H4 styled as a bold paragraph)
- further information on new line (normal paragraph)
- links.
Colours
Callout boxes can use 1 of 4 colours. Each colour corresponds to the type of information being communicated.
The callout box and icon colour should match.
Examples
This is an information callout box.
Blue is the colour used for all information callout boxes.
This is a successful or continue callout box.
Green is the colour used for all success callout boxes.
This is a warning callout box.
Yellow is the colour used for all warning callout boxes.
This is a do not proceed callout box.
Red is the colour used for all do not proceed callout boxes.
Internal accordion
You can use a second accordion style nested within a step (accordion).
This is unique to the step-by-step component. It should only be used in specific circumstances.
Use the internal accordion for reference material. For example, a list of documents to provide or a country list.
Don’t use it to make a step shorter, or for key information that describes the process or actions involved in a step.
- Cras imperdiet ex nec tristique congue.
- In a magna ut libero aliquam consequat.
- Suspendisse iaculis mi in tellus viverra condimentum.
- Praesent eget elit dignissim nibh convallis aliquet.
- Ut tincidunt sem a aliquam aliquam.
- Donec dictum est vel nisi semper luctus.
- In in sapien a felis porta eleifend sit amet vitae turpis.
- Duis semper ipsum ut augue accumsan, vitae dictum dui facilisis.
- Aliquam vel sapien vel felis commodo hendrerit eget nec nunc.
- Nulla ac odio placerat, hendrerit neque a, tincidunt purus.
Web publishers
Use the same markup as standard accordions. It will inherit a different style automatically.
Footer content
You can use the grey callout box in the footer section for support information, such as contact details. Don’t include key task information here.
Web publishers
The footer section can contain HTML. Use the Content footer section in the content editor to create the footer. It will inherit the general callout box style.
3
The Web UX team reviews all step-by-step content to ensure it’s fit for purpose.
You can ask for help at any stage.
The Web UX team designed the step-by-step feature. If you engage with us early, we can help you plan your content to make best use of the styles available. We can also review and edit content once it is drafted.
In either case, we will help ensure your content will be easy for users, appropriately uses the visual design elements and meets our departmental website standards. This includes:
- use of simple, active language
- descriptive hyperlinks
- clear, parallel headings
- use of styles to group content and make it easier to scan
- grade 5-9 readability.
Contact web.ux@aff.gov.au for help.
Web publishers
For a step like this with no sub steps, just add content to the sub step text field (do not add a title).