element-web icon indicating copy to clipboard operation
element-web copied to clipboard

EW: "Verify this device" modal needs design update

Open richvdh opened this issue 11 months ago • 1 comments

Problem

EW has the "Verify this device" confirmation modal where user can choose which verification method to use or reset your identity if there are no means to verify. This is how it currently looks:

Image

And, if user does not have any methods to verify, then a different modal is shown:

Image

These modals are used when:

  1. When you're logging in and you're prompted to verify the device.
  2. When you're proactively trying to verify your current device from Settings > Sessions.
  3. When you're proactively trying to verify your device to access Settings > Encryption.

As these modals are different from from EX is currently using and there is a separate modal for the case when no methods of verification is available, it will be another source of confusion for the users when we ask them to verify their devices and explain how to do that.

Solution

Therefore we should update the designs to make the behavior/design consistent with EX.

Image Image Image

The flow/conditions in short:

  1. The same modal is used regardless if both, one or none of the verification methods are available. Simply the Use another device and Use recovery key buttons are shown only when the corresponding method is available.
  2. When none of the verification methods are available, and the only option is Can't confirm, the title of the following reset confirmation modal is adjusted accordingly, e.g. 1.1 You need to reset your identity (in case no methods to verify) 1.1. Are you sure you want to reset your identity? (other cases)
  3. If the modal is used during login process, it must have the sign out button. Otherwise, once the verification is made mandatory, the user is stuck with their if they can't verify but also do not want to immediately reset.
  4. If the modal is used once user is already in the app, it should not have the sign out button.

richvdh avatar Feb 13 '25 12:02 richvdh

After reviewing the current state across the apps, I am suggesting to not just do cosmetic/copy updates but apply the eventual designs that are consistent with UX. I noticed yesterday that when user has no verified devices and no recovery set up, then EW is showing a completely different modal:

Image

This isn't illogical as such, but it makes even less comparable to the EX experience or flow in some conditions. And as we're trying to guide/navigate people to verify their devices, we should try to make things as straightforward as possible, because it could be overwhelming already due to having multiple different apps. I will update the ticket description accordingly.

mxandreas avatar Jun 12 '25 12:06 mxandreas

To clarify, if there is no means of verification, do we show the "Confirm your identity" modal with only the "Can't confirm?" button, or do we jump straight to "You need to reset your identity"?

uhoreg avatar Jul 31 '25 22:07 uhoreg

do we show the "Confirm your identity" modal with only the "Can't confirm?" button

Yes, this.

mxandreas avatar Aug 01 '25 07:08 mxandreas

Where should the "Learn more" link go to?

uhoreg avatar Aug 04 '25 19:08 uhoreg

Where should the "Learn more" link go to?

https://element.io/help#encryption-device-verification

mxandreas avatar Aug 04 '25 21:08 mxandreas

In the designs, when resetting identity, it includes the text "Only do this if you believe your account has been compromised". I don't think that's correct, since they need to do that if they don't have any other way of confirming the identity. I assume this is just due to copying/pasting from the wrong variant of the reset identity designs.

uhoreg avatar Aug 12 '25 19:08 uhoreg