Morning All,
We’re excited to announce the release of some new components and templates in the Design System.
Input groups
Input groups can be used when only one input is required by the user to trigger an action.
For more information on the component and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/forms-and-transactions/forms#inputgroup
Predictive list
Assist users by providing suggestions as they type.
For more information on the component and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/forms-and-transactions/forms#predictivelist
List item
Display a list of results to users surfacing key information.
For more information on the component and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/page-content/list-item
Results bar
A results bar indicates the number of results in a list and allow a user to sort by their preferred option.
For more information on the component and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/page-content/results-bar
Filters
Filters allow a user to narrow down results using multiple attributes.
For more information on the component and it’s usage, please visit:
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/page-content/filters
Search results and filtering templates
These templates explore example use cases of search and filtering across different content requirements and states.
These are available in the Figma UI Kit or under Example pages on our documentation site:
https://nswdesignsystem.surge.sh/
As always, we appreciate any feedback!
2 Likes
Hi,
We are implementing the list of results with the image to the left on the desktop version and no images on the mobile version. The whole area is clickable (not just the title, as per the other list result versions without images). It would be great to understand the reasoning for having the whole area clickable and also if you have tested this with mobile users?
Thank you and look forward to hearing from you,
Rika
1 Like
Hi @rika.johnander, thanks for your post!
The different options of title clickable verses whole clickable listing have been created to give teams the flexibility to implement the solution that best meets their user needs. Our examples show a range of both, and all layouts can be altered to have either interaction option. Having the whole listing clickable gives users a wider clickable area, and can assist where research or testing shows users are drawn to click on the image rather than the title.
The list items component has been tested on mobile, however keen to hear if you have noticed an issue or have research that can help us improve the component.
Thank you Amy,
In your test, how did the users on mobile interact with the listing where the whole area is clickable? Would love to see your research documentation if possible. I wonder if users accidentally clicked when they scrolled?
Also, if you have research about how users interacted with instant filtering on mobile, it would be amazing if you could share these research findings too.
Best,
Rika
Hi Rika, apologies for the delay in my response. We test the interaction patterns, and where possible we work with a team using the components to take that further, but they’re not tested in-context as that’s product-specific.
All of our components are open to input if anything surfaces as part of your research that could be improved. Also if any of the components aren’t right for your use case (outside of the blue diamond elements) we’re happy for you to make bespoke components (and ideally let us make them available to others too).
Hi Amy,
It sounds great to work together as we have a project where we are using this pattern. I’ll send you a separate message.
Best,
Rika
Thanks Rika that sounds great, looking forward to it!
