Improve usability of the "Open another device" banner

[pmaier1]

The crypto-related "Open another device" banner is currently hard to understand for regular users and does not disappear in cases where we have unresolvable UTDs which is confusing and not helpful. Actually users should not even see the banner if everything goes well. For the time being, until we have better reliability, we should improve the banner to not annoy users.

Challenge

On the one hand there are cases where the banner appears for good reasons (e.g., to ask the user to open a signed-in mobile app for key gossiping) but there are cases where UTDs stay unresolvable (e.g., a single-device user who has temporarily signed-out their device). For the latter, the banner will just stay, hitting the buttons will not have any effect and users get confused because they don't understand the current wording.

Potential reasons for the banner to show up / not disappear

• Key backup not yet pulled/processed (will resolve automatically)
• Issues with key backup (will only resolve when the user has a second device for gossiping)
• Single logged-out device trying to decrypt messages after logging in again (dehydrated devices case; will never resolve)
• Mobile app needs to be opened to enable key gossiping (will resolve on user action)
• (Other unknown UTD cases)

Solution proposals

• Improve wording / add a "Learn more"
• Don't show the banner in cases with permanent UTDs or automatic resolution
  • If they key backup is still being processed, stay with the "Decrypting..." banner
  • If they user only has a single device, don't show the banner
• If "Resend key request" has not worked, time out the banner and don't show it again
• Improve responsiveness for smaller/scaled screens so that the banner doesn't cover huge parts of the timeline

[florianduros]

• If they key backup is still being processed, stay with the "Decrypting..." banner didn't investigate it. If this state is known in the js-sdk, it shouldn't be too hard to implement
• If they user only has a single device, don't show the banner Hide DescriptionFailureBar when there is no available devices matrix-org/matrix-react-sdk#10797
  The banner is hided but every time we scroll back to the UTDs, we try to decrypt the message (current behavior) and the banner is shown during the decryption step.
• If "Resend key request" has not worked, time out the banner and don't show it again Same issue than the previous point. If I hide it if the "resend key request" fails, it will come back every time we scrollback to it. We need to kind of marked the event behind this UTD to not process it again. But, maybe the "resend key request" fails because our other device wasn't online and when it'll be back online, we want to do again the "resend key request" operation.
• Improve responsiveness for smaller/scaled screens Imo the banner is responsive but the issue is that the current design doesn't fit into smaller screens. We can try to reduce the font, the margins/padding when a screensize is reached but maybe we need a proper mobile/smaller screens design for this banner

Screen.Recording.2023-05-05.at.10.07.09.mov

[pmaier1]

Let's discuss the options. We should at least

• decrease the size of the banner (and other similar banners)
• improve the wording to be more comprehensive @americanrefugee

Additional icing on the cake would be

• only show the banner when there is actually more than one device
• only show the banner after the key backup has been fully processed (show "decrypting" banner before)

[pmaier1]

In today's sprint planning we've decided to do the following:

• Remove the "Open another device" banner as it's only informative and the "resend key requests" button is actually a dev tool and not required for users
• Change the "Decrypting messages" banner and add a note to open Element on another device
  • ENG: "Please wait while your messages are decrypted. This may take a few moments. Opening Element on another device can speed this up."
  • GER: "Bitte warte während deine Nachrichten entschlüsselt werden. Dies kann einen Moment dauern. Öffne Element auf einem anderen Gerät, um dies zu beschleunigen.
• If possible: Decrease the size of the "Decrypting messages" banner

[richvdh]

For context: this banner was introduced in matrix-org/matrix-react-sdk#9544.

[pmaier1]

After further discussion, we agreed to also remove the "Decrypting messages" banner as it does not really provide any more benefit to users.

[richvdh]

... and the "verify this device" banner, and the "resend key requests" button, right?

[pmaier1]

... and the "verify this device" banner, and the "resend key requests" button, right?

Yes, thanks!