search

nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
https://design-system.nhsapp.service.nhs.uk/
MIT License
6 stars 0 forks source link

List #189

Open Tosin-Balogun opened 2 days ago

Tosin-Balogun commented 2 days ago

What

We need a way to display app menu items that conform to app patterns.

Why

Unlike websites where you have anchor links or unordered lists, apps primary classify things as buttons.

Links do exist on apps (i.e a url web resource), but they are used differently often taking the user out of the app and to a web resource on a browser.

On apps, list are the primary way to display menu items. While the appearance of the list can look like a card or card link or a card panel link, they are essentially list items which can hold images, titles and a navigation destination.

User behaviour insights

The app user research teams did an accessibility test in RNIB London (June 2024). One of the findings was that users may expect 'panels' to be announced as buttons rather than links

Screenshot

Details

iOS describes list as

A table or list can represent data that’s organised in groups or hierarchies, and it can support user interactions like selecting, adding, deleting, and reordering. Apps and games in all platforms can use tables to present content and options; many apps use lists to express an overall information hierarchy and help people navigate it. For example, iOS Settings uses a hierarchy of lists to help people choose options, and several apps — such as Mail in iPadOS and macOS — use a table within a split view

Screenshot

Android describes list as

Lists are continuous, vertical indexes of text and images. Many apps need to display collections of items. This document explains how you can efficiently do this in Jetpack Compose.

Screenshot

Reference https://m3.material.io/components/lists/overview https://developer.android.com/develop/ui/compose/lists https://developer.apple.com/design/human-interface-guidelines/lists-and-tables https://developer.apple.com/documentation/swiftui/list

Related

Card links (Panel link) #10

davidhunter08 commented 20 hours ago

Also related to https://github.com/nhsuk/nhsapp-frontend/issues/135