UX Audit Feedback

[manuelwedler]

I'm dropping here the feedback that I got during the UX audit of our dapp at devcon. @olympe-silve please have a look at it and think about on what you agree and disagree. We can have a meeting to discuss it when I'm back from vacation.

Sorry for the long list. If I have time tomorrow I will try to group everything better.

General

• UX mostly good, mostly UI criticisms
• Do more user testing (guerilla testing). Designer should go to conferences and let people test it.
• Add a tagline below the logo.

Transfer walkthrough:

Most important point: 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.

Transfer tab

• Logo in the middle: not clickable and not indicating the direction of the transfer. Could be removed or made smaller and clickable.
• "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.
• The text of the selection inputs is right aligned. It should be left aligned like the text of the text fields.
• Placeholder text in empty activity tab ("Nothing here yet."): Would be better if it is something like "Your activity will show up here."
• 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.
• More padding above and below the Terms & Conditions aggreement text.
• 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.
• Max button not visible. It was not clear that there is a max button at all.
• Contrast: The placeholder text of the inputs is badly readable on the teal-colored background.
• Contrast: The red color on the teal background is bad.
• 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.
• Inside the Selector view: the back button should be on the top.
• More padding above and below the fee section.
• The total fee should be highlighted more. It's weird that the description text ("Total") and the fee itself is in a different color.
• The checkmark for a valid address should be inside the input field.
• Too many different green colors.
• Add a toast / pop up notification when a transfer was successful. The notification could include the button for a new transfer.
• It was not clear that the disabled transfer button was actually disabled. Use better coloring etc.
• Move the token selection into the same field as the amount input. So just one "visual" input field for both.
• 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.

Activity tab

• Text of the transfer summary should be left aligned, because it is easier readable.
• 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.
• 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.

[GabrielBuragev]

After thoroughly discussing the feedback provided by the auditor, we came up with solutions and disagreements which are written down in #1198. @manuelwedler can we close this in favor of #1198 ?

[manuelwedler]

Yes, don't need this anymore