UX Audit - Implementation

[GabrielBuragev]

This issue is the outcome of the internal review, by the team, of the UX Audit Feedback in a form of an epic.

To provide more clarification on the linked issues that appear in this Epic, i edited the UX Audit Feedback list by marking approved & rejected suggestions by the team.

Overview of accepted/rejected suggestions

All the suggestions are written down as a bulleted list. Accepted suggestions are left untouched (and linked to an issue) while rejected suggestions are crossed-out and accompanied by a decision explainer.

Transfer walkthrough

Show the steps that a user has to do after clicking transfer in an overlay on top of the transfer tab. There actually only two steps (our step component has 4 but the user only interacts in two of these). Use actual numbers for the steps (1. - 2.). Use a verb that explains what the user has to do. Instead of "Waiting for transaction confirmation", use "Sign allowance transaction" or something similar.

Adding an overlay (with the steps) on top of the transfer tab is not an option for us. We don't want to stop the user from submitting multiple transactions at any moment, which explains the reasoning behind the current flow.

• Remove only third step "Waiting for transaction receipt". It is rare that this step will fail and provides little to no information to anyone. Also it is considered a passive step as there is no required action by the user. We will still use the step 4 "Request is being fulfilled" as there is a slight chance that this step can fail and also require a user action based on the result (withdrawing funds for example).
• Introduce a new transfer status message "Waiting for user input" (or something similar) which signals that the user needs to confirm an action inside his wallet provider. This will make the differentiation between the passive/active steps clearer.
• Adjust step messages to use verbs.
• Hide the transfer summary (detail box containing the exact amount sent & transaction hash) until the request has been finalized (for both completed & failed).

To be tackled by https://github.com/beamer-bridge/beamer/issues/1205

Transfer tab

• Logo in the middle: not clickable and not indicating the direction of the transfer. Could be removed or made smaller and clickable. https://github.com/beamer-bridge/beamer/issues/1126
• "To" box: amount and token should not be an input field. User still might think that it is possible to interact with it even if it is disabled. Rather use plain text for the both and put target rollup and target address above it. Decision: By our Designer's request, both boxes will be kept as they are for the time being.
• The text of the selection inputs is right aligned. It should be left aligned like the text of the text fields Decision: By our Designer's, text alignment will be kept as is for the time being.
• Placeholder text in empty activity tab ("Nothing here yet."): Would be better if it is something like "Your activity will show up here.". https://github.com/beamer-bridge/beamer/issues/1214
• Connection status should be in the upper right corner of the screen like other dapps do it. This should include the connect button, wallet address and disconnect functionality. The connect button can additionally still be below the main container when the user is disconnected. https://github.com/beamer-bridge/beamer/issues/1194
• More padding above and below the Terms & Conditions aggreement text. https://github.com/beamer-bridge/beamer/issues/1213
• Some text like the "Add to wallet" button and connection status is too small. No text should be below 14px font size. Only long contigous text like the Terms & Conditions page could have 12px. https://github.com/beamer-bridge/beamer/issues/1195
• Max button not visible. It was not clear that there is a max button at all. Decision: Max button visibility was already improved by changing the color & design to follow the design of the other buttons. Can be improved in future when we plan a redesign of the form layout & size. Currently no other solution seems viable without rethinking the design of the whole form.
• Contrast: The placeholder text of the inputs is badly readable on the teal-colored background. https://github.com/beamer-bridge/beamer/issues/1207
• Contrast: The red color on the teal background is bad. https://github.com/beamer-bridge/beamer/issues/1207
• The two non-rounded edges of the two main boxes (To - From) were making the auditor confused. -> Follow a more utilitarian approach for the design. Decision: There was no constructive reason provided for this change, we assume it is more of a personal preference of the auditor, therefore we wont change it.
• Inside the Selector view: the back button should be on the top. Decision: This was already discussed with our designer. There is a good reason why the button is positioned where it is currently. Check out https://github.com/beamer-bridge/beamer/pull/979#issuecomment-1235719978
• More padding above and below the fee section. https://github.com/beamer-bridge/beamer/issues/1208
• The total fee should be highlighted more. It's weird that the description text ("Total") and the fee itself is in a different color. https://github.com/beamer-bridge/beamer/issues/1208
• The checkmark for a valid address should be inside the input field. https://github.com/beamer-bridge/beamer/issues/1212
• Too many different green colors. https://github.com/beamer-bridge/beamer/issues/1207
• Add a toast / pop up notification when a transfer was successful. The notification could include the button for a new transfer. https://github.com/beamer-bridge/beamer/issues/1209
• It was not clear that the disabled transfer button was actually disabled. Use better coloring etc. https://github.com/beamer-bridge/beamer/issues/1207
• Move the token selection into the same field as the amount input. So just one "visual" input field for both. Decision: Again, not a constructive suggestion, we like to keep the 2 inputs separated so we can attach different actions around them.
• Above the fees the transfer amount should be shown again to have a better summary of the transfer (additionally to the amount field). -> One box with amount, fee, and total. Decision: I personally like the idea of having all of this information in one box instead of separated as it is currently. The designer's opinion is that we should not change anything here. Open to hear more opinions before making a final decision.
• Rephrase "Use max button" text & related tooltip text. https://github.com/beamer-bridge/beamer/issues/1206

Activity tab

• Text of the transfer summary should be left aligned, because it is easier readable. Decision: Since there are many different paddings inside the transfer card, simply aligning the text to the left will look really ugly. Another thing to consider is the length of the text. Short sentences positioned to the left inside the transfer cards look really weird and also is not aligning with the rest of the text positions (label, steps etc.)
• Introduce hierarchy in the text of the transfer summary. For example, the date is less important and could be smaller and moved to the end. Decision: @DBecane your input is welcome here.
• Only one transfer should be open at a time.

Provide feedback form:

• No one will use it.
• If we really want feedback, we should ask directly after the transfer was done inside the main box. Maybe not use Typeform for this.
• Rather do user testing.

Decision: It was used by plenty of the users

[GabrielBuragev]

@olympe-silve @manuelwedler Please let me know if i missed something.