Design

Research and rationale

The design of the in-page navigation component is based on the Digital Transformation Agency's component.

This component is widely used and features in the Department of Agriculture design system, NSW design system and on prominent Australian government website like mygov.

Ease of navigation

The in-page navigation component is designed to help users scan the contents of a page and navigate to different sections of the page easily. This is in line with the usability heuristic of "User control and freedom" by Jakob Nielsen, which emphasizes that users should be able to navigate freely and easily around the website (Nielson, 2020).

Visual hierarchy

The use of a heading ("On this page") provides a clear label for the in-page navigation, establishing a visual hierarchy that helps users understand the structure of the content. This is consistent with the UX principle of creating a clear visual hierarchy to guide users through the interface (Gordon, 2020).

Consistency

The design of the in-page navigation component is based on the DTA's in-page navigation, which ensures consistency across different parts of the website.

Styling

The thick border on the left and the vertical listing of links provide a clear and distinct visual cue for users, helping them identify the navigation component easily. The in-page navigation is designed to be used in the body text of a page. The thick lefthand border visually separates the component from the content on a page while not drawing too much attention.