Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve UX around decryption errors #8272

Closed
wants to merge 23 commits into from

Conversation

duxovni
Copy link
Contributor

@duxovni duxovni commented Apr 9, 2022

  • Get rid of the **ugly text** and red shields on every single message
  • Add a single banner at the top of the room view explaining what's wrong, and offering a clear call to action when possible
  • Send key requests automatically instead of prompting the user to click a link/button
  • Prompt the user to verify their device as a first step if it isn't verified yet

Screenshots

New decryption error UI

Show a loading spinner for the first 5 seconds

20220608_00h34m10s_grim-cropped

If this device isn't verified, and there are other devices or backups that could help it decrypt messages, prompt to verify first

20220608_00h37m11s_grim-cropped

If this device is verified and there are other verified devices, prompt to open one of them

20220608_00h37m55s_grim-cropped

If this is the only verified device, not much the user can do, so just explain the current status

20220608_00h37m25s_grim-cropped

If this device is unverified, and there's nothing for it to verify against, all we can do is reset keys

20220608_00h35m37s_grim-cropped

Dark mode, message bubbles

20220608_00h38m17s_grim-cropped
20220608_00h38m31s_grim-cropped
20220608_00h38m55s_grim-cropped


Here's what your changelog entry will look like:

✨ Features

  • Improve UX around decryption errors (#8272). Contributed by @duxovni.

Preview: https://pr8272--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

- Get rid of the ugly text and red shields on every single message

- Add a single banner at the top of the room view explaining what's
  wrong, and offering a clear call to action when possible

- Send key requests automatically instead of prompting the user to
  click a link/button

- Prompt the user to verify their device as a first step if it isn't
  verified yet
@t3chguy t3chguy requested a review from a team April 11, 2022 09:13
Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clearing review request until after Design review

@duxovni duxovni requested a review from amshakal April 19, 2022 15:21
@codecov
Copy link

codecov bot commented Apr 19, 2022

Codecov Report

Merging #8272 (75e0ce9) into develop (bca9caa) will decrease coverage by 0.01%.
The diff coverage is 28.73%.

❗ Current head 75e0ce9 differs from pull request most recent head 2d4969b. Consider uploading reports for the commit 2d4969b to get more accurate results

@@             Coverage Diff             @@
##           develop    #8272      +/-   ##
===========================================
- Coverage    30.05%   30.03%   -0.02%     
===========================================
  Files          881      883       +2     
  Lines        50240    50301      +61     
  Branches     12799    12802       +3     
===========================================
+ Hits         15099    15108       +9     
- Misses       35141    35193      +52     
Impacted Files Coverage Δ
src/components/structures/RoomView.tsx 29.46% <0.00%> (-0.19%) ⬇️
...omponents/views/messages/DecryptionFailureBody.tsx 0.00% <0.00%> (ø)
src/components/views/rooms/EventTile.tsx 42.91% <0.00%> (-0.41%) ⬇️
src/components/views/settings/DevicesPanel.tsx 0.00% <0.00%> (ø)
...rc/components/views/rooms/DecryptionFailureBar.tsx 1.88% <1.88%> (ø)
src/components/views/messages/MessageEvent.tsx 61.81% <66.66%> (-0.45%) ⬇️
src/DecryptionFailureTracker.ts 71.84% <100.00%> (+5.17%) ⬆️

@amshakal
Copy link

It's looking great, thanks for working on this. I am proposing a few visual changes to make the errors clearer.

  1. Consider putting the banner msessage in a headline body format over two lines so it's easier to read and understand the errors. Here is an example:

Screenshot 2022-05-18 at 2 13 00 pm

Screenshot 2022-05-18 at 2 17 31 pm

Screenshot 2022-05-18 at 2 17 16 pm

  1. Consider changing the hidden message to a text error. This will avoid the used from mistaking this for a spoiler and the treatment will look better when bubbles are activated. Sharing examples below for modern and bubbles layout:

Screenshot 2022-05-18 at 2 14 30 pm

Screenshot 2022-05-18 at 2 14 41 pm

  1. In our previous discussions we had also discussed showing CTAs if necessary eg. 'Start Verifictaion' if the device is not verified and 'Retry' or 'Show verified devices' incase the device was verified. Is the plan to add those CTAs to the banner?

Sharing Figma file with all the proposed changes Link.

Thank you!

@duxovni
Copy link
Contributor Author

duxovni commented May 18, 2022

@amshakal Thanks for the feedback! Did you see the updated screenshots in my comments at the top of this thread? It's already got calls to action and text-based error messages.

I got rid of the asterisks because it seemed stylistically bad, but I can put them back if you think it's an improvement; instead, I added grey key icons to distinguish those messages as errors without overwhelming the user with too much red. For the text of those messages, I went with "unable to decrypt message" rather than "waiting to decrypt message", because it's not necessarily clear what we'd be "waiting" for, and in some cases there might not be anything to wait for at all. Does that sound ok?

The multi-line banner styling is a great idea, I'll get working on that. Thank you!

@amshakal
Copy link

All sounds good to me!

@MadLittleMods MadLittleMods added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jun 1, 2022
@amshakal
Copy link

amshakal commented Jun 8, 2022

It's looking great. Thanks @duxovni 😃

Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking exciting
Have made some comments
But also this could really do with tests being written as it has a lot of edges which will miss being exercised regularly

res/css/views/messages/_DecryptionFailureBody.scss Outdated Show resolved Hide resolved
res/css/views/rooms/_DecryptionFailureBar.scss Outdated Show resolved Hide resolved
src/DecryptionFailureTracker.ts Outdated Show resolved Hide resolved
src/components/views/messages/DecryptionFailureBody.tsx Outdated Show resolved Hide resolved
src/components/views/rooms/EventTile.tsx Outdated Show resolved Hide resolved
duxovni and others added 2 commits June 9, 2022 09:13
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
@duxovni
Copy link
Contributor Author

duxovni commented Nov 4, 2022

Closing in favor of #9544.

@duxovni duxovni closed this Nov 4, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants