Design

Research and rationale

The development of this component was prompted by the need for a navigation component with more visual impact than a standard link list, yet not as large as a card group, specifically for landing pages. This component provides a balance between the two, with a design that offers more visual weight while still being compact and efficient. The aim was to create a navigation component that is both visually appealing and practical, helping users easily find and access relevant pages without being overwhelming.

The design of our component was inspired by the NSW link list item and by the designs for the Australian Government MyGOV mega menu which used both link lists with background hover states broken up with divider lines supported by a trailing arrow icon.

By combining these 2 designs we were able to create a component that was versatile enough to be used within the content of landing pages as well as for our mega menu navigation items. The use of an arrow icon to indicate navigation links was also consistent with the existing Design System for call-to-action (CTA) links and was something we wanted to repeat to maintain as a consistent visual cue for navigation throughout our designs.

The pattern was also consistent with how other Design Systems such as material design approached list items. Material design also suggested that dividers could be used to separate larger list items and that they should contain primary and supplemental actions represented by icons and text (Google, n.d.).

Based on Nielson and Norman’s article 'Guidelines for Visualizing Links' which recommended that we could safely eliminate underlines as they were unnecessary for navigation menus and other lists of links, our link column component only has underline on hover. This is consistent with all other navigation menus in our Design System (Nielson, 2004).