A NSW Government website
NSW Government
Design System v3.18.11

List items

Display a list of results to users surfacing key information.

Figma

Usage

When displaying results, consider what information is important to the user and display what they require to make an informed decision. This will depend largely on your product or service and your user needs.

Do:

  • ensure results are tested and return accurate and relevant results
  • truncate descriptions as appropriate, recommend 150 words
  • use results bar above a listing to indicate the number of results in a list and allow a user to sort by their preferred option
  • use pagination when more than 10 results are returned if there are no results, clearly communicate if there are no matching results and provide suggestions or follow up actions

Content in result listings can include:

  • Headline - use to identify the title of page or result
  • Description - use to give the user a snapshot to the content
  • URL - use to indicate when content is located on a different site
  • Label/Category - use to indicate the result topic or identifier when this will give greater context over the result type or content.
  • Date - use when it brings value to the user to know this information and be clear on their relation to the content (for example “Last updated”).
  • Image - use when the image directly represents the listing content and can further support the text. Avoid using for decorative purposes and hide on smaller screens.

No results

If no results are returned, clearly communicate there are no matching results and allow the user to continue their journey by providing tips to improve or widen their results.

Some ways to do this are by:

  • suggest alternative keyword if current keyword is not found or a spelling mistake is detected (if possible)
  • tips to improve or widen the results
  • contact information or other ways to navigate the site

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.