search

nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend
MIT License
4 stars 0 forks source link

Bottom sheets (aka Bottom drawer) #31

Open davidhunter08 opened 7 months ago

davidhunter08 commented 7 months ago

What

A bottom sheet is a user-interface pattern used commonly in mobile apps for providing contextual details or controls in the lower area of the screen.

Other information

Bottom Sheets: Definition and UX Guidelines (Nielsen Norman Group) Material design system - Sheets: bottom component Sheets | Apple Developer Documentation How to Create Awesome Bottom Sheets | by Thomas Cree

davidhunter08 commented 7 months ago

Team Rocket are exploring using bottom sheets for test results.

Screenshot 2023-11-17 at 11 26 43
davidhunter08 commented 7 months ago

Bottom sheets are a mobile-app UI pattern intended to present temporary contextual information while maintaining access to the main content. When used for a few options or some additional information, a bottom sheet can enable quick access to controls; however, they should not be used on top of other bottom sheets or for displaying lengthy content.

michaelgallagher commented 7 months ago

Bottom sheets are a mobile-app UI pattern intended to present temporary contextual information while maintaining access to the main content. When used for a few options or some additional information, a bottom sheet can enable quick access to controls; however, they should not be used on top of other bottom sheets or for displaying lengthy content.

@davidhunter08 fwiw apple's own apps break that last rule all the time

michaelgallagher commented 7 months ago

the team rocket example above is one where i wonder if and how we might implement it as a native sheet. it would be nice to understand how much freedom + control we have to design those (e.g. can you use Frutiger in a sheet? can we use our own entire FE library? etc)

davidhunter08 commented 7 months ago

Thanks @michaelgallagher I'm meeting with team omelette tomorrow to hopefully discuss exactly that!

I've been playing about with a bottom sheet in HTML

michaelgallagher commented 7 months ago

@davidhunter08 nice

davidhunter08 commented 4 months ago
MicrosoftTeams-image (1)

Team Mavericks are looking to use native bottom sheets for users to 'Give feedback'.

davidhunter08 commented 4 months ago
Screenshot 2024-02-20 at 13 54 46

Team Valiant are looking to use native bottom sheets for users to 'Filter results'.

michaelgallagher commented 4 months ago

q: is this the native component version? if so, should we be using the stock component header?

davidhunter08 commented 4 months ago

q: is this the native component version? if so, should we be using the stock component header?

Hey Mike, there are still lots of questions around this component. I think some design / dev collaboration in native code to explore the possible is needed. We spoke to Team Omelette (Beyond the Shell 🐣) in December in regards to prototyping / testing native components but the team were not at that stage yet.

We met with Team Mavericks yesterday, a decision was made to build the web version of the 'Give feedback' across all platforms (which simply goes to a new page when selecting the 'Give feedback' link and doesn't use a bottom sheet / overlay) until we understand more about implementing a native bottom sheet.

Tosin-Balogun commented 1 week ago

Bottom sheets used by secondary care team

The secondary care team currently have the 'filter' and 'sort by' function of their hospital document and questionnaires user flow

Image