Design guidelines

Placement of actions

Align actions to the left margin or as close to supporting content as possible - it will ensure users of screen magnifiers can easily see and use them.

Avoid aligning actions and links to the right margin, as this could impact users of screen magnifiers.

Use the simplest pattern that works

Users understand conventional form inputs and buttons. Don’t reinvent the wheel and design new components when current ones meet the needs of the user.

Progressive disclosure

Progressive disclosure is a design pattern that allows users to access more information or functionality as they need it. It is a way of reducing cognitive load by only showing the user the information they need to see at any given time.

Avoid placing important information inside Progressive Disclosure patterns such as Accordions, Tabs or Details. This information should be visible to the user without having to expand the content.

A Modal is another form of progressive disclosure. They are used in AgDS to confirm actions that are potentially destructive. They are also used in certain cases for displaying a list of fields to enable data filtering, when the amount of space needed isn’t practical to display on the main app page. Modals should be used sparingly and only when other patterns, such as accordions, details or another page, are not suitable. Don’t use a modal to contain a user flow such as a form or content.

Dropdowns and tooltips

Avoid using dropdowns and tooltips as they can be difficult to use on mobile devices and for those with fine motor skill disabilities.

Always explore more simple solutions to fly outs and pop ups and make sure the solution works on desktop and touch devices.

If you need to provide additional information, consider using a Details component instead.

Navigation patterns

When designing navigation components, always consider small devices to make sure the solution is responsive and scalable.

Don’t rely on sideways scroll on nav bars unless you provide sufficient affordance that content is off the page.

Interactive elements

Interactive elements, like links and buttons, should be clearly indicated to users through the use of consistent style treatments. Use the action token (blue) for interactive elements. Don’t use the action colour for non-interactive components as it could confuse users. Also make sure you don’t rely on colour alone to indicate that a component is interactive, use additional visual cues.

When hovering an interactive element, you should communicate the change appropriately. Examples include inverting the underline, adding a shade background, and/or changing the colour of the text to body.

A coloured border below or aside an element (along with appropriate ARIA attributes) can be used to communicate a selected state.

Try to ensure interactive elements are large enough to be easily tappable on mobile devices.