The Locked Icon is not properly explained (when the face is not recognized)

[abodea]

Preconditions

Have Face ID to unlock up setup.

Steps to reproduce

1. Launch Focus and don't look at the Phone.
2. The Face ID window is displayed.
3. Tap on the Face ID window or just don't look at the phone until the Face not recognized prompt is displayed.
4. Tap on cancel.
5. Observe the icon displayed with no text or any explanation on how to unlock Focus.

Expected behavior

The icon should be changed to a locked lock with a text explaining to the user that tapping anywhere will unlock the app and the Face ID will try to recognize again the face.

Actual behavior

Device & build information

• Device: iPhone 13 Pro Max (15.1.1).
• Build version: 9000 (11745).

Notes

I added a video with the example from another browser.

Attachments:

https://user-images.githubusercontent.com/42831109/159281984-8845c216-f3ea-4413-9cc4-885851de5afa.mov

https://user-images.githubusercontent.com/42831109/159282029-f5a007be-ec0a-4a3c-bf3b-897f153bc277.mov

[razvanlitianu]

We didn't have a design for the screen and we went with the minimal implementation, displaying the appropriate icon for each biometric type. @jeffreygee Can you help us with a suggestion? If the icon is enough or we need additional explanation.

[razvanlitianu]

cc: @jevans-mozilla

[jeffreygee]

@razvanlitianu will they ever have the option to use passcode instead of faceID in this scenario?

[rtestard]

We discussed with Jeff that the path forward could be similar to how this was handled on Android where we displayu a call to action. @jeffreygee can you please look into a UX proposal when you get a chance?

[rtestard]

@jeffreygee re-ping

[jeffreygee]

Mocks for this here: https://www.figma.com/file/dPV9Rn2rzrRsvwQ6SI8EzO/Fingerprint-Auth-Flow?node-id=314%3A2950&t=xaBgHbpy9o2Uff8m-1

Let me know if any questions, thanks!

[abodea]

Verified as fixed on v9000 (166161) iPhone 13 Pro (15.7.1).