Exchange / DEX

Any platform that offers trading.

Following General best practices to add guidance, there should be some form of instructions present on the DEX.

It is not clear to users how the form should be interacted with, especially for beginners. Anything involving finances should be as perceivable and understandable.

DEX User Experience

A typical DEX interaction pattern is as follows:

1. User first selects the token they would like to trade

2. They then select the token they would like to receive

3. Then they enter an amount for either the receipt quantity or the trade quantity

• Steps 2 and 3 are interchangeable.

• For someone on a screenreader or keyboard, who may be processing this information sequentially, this can be a source of confusion.

• Especially, when the second input field auto-calculates the value without alerting the user properly.

• One proposal, we raise for consideration by the community is to make the second input field readonly, while properly alerting the user that the value was updated. This combination supplemented with proper instructions on the dex can help alleviate confusion for newcomers. Relevant WCAG:

• Success Criterion 3.3.3 Error Suggestion

• Success Criterion 3.3.6 Error Prevention (All)

DEX Calculations

• More straightforward estimation and present values in familiar currencies as a focus, rather than the token amount first.

• Real-time content updates and ARIA live regions should be checked and leveraged for token calculations. It should be made obvious that after selecting two tokens and an amount for one, that the second amount has been calculated.

WAI ARIA Reference:

• https://www.w3.org/WAI/ARIA/apg/patterns/alert/

• Light / Dark Theme toggle with light theme being default as best practice.

  • Many DEXes defaulted to dark mode and some don't even offer light mode

• Login Button instead of Connect wallet. With social sign in becoming the norm, it is more user friendly to have a login modal popup with various options (SSO, connect wallet, email sign in, etc)

  • See Introduction > Foundational Basis > Laws of UX for a full explanation

DEX Form

• Clearly labeled form, with no jargon. If jargon or advanced terms are present, they must be accompanied with enough information on the page for the user to understand the gist of it.

DEX Form

• Form complexity has been noted to lead to accessibility barriers.

• Alongside lessening jargon, some means to reduce abbreviations is preferable.

• Our example below has clear labeling and leaves no ambiguity for input purpose. Some exchanges labeled their inputs with the default token amount values.

  • This lead to great confusion as the user would read "0.00" instead of token to trade or token to receive. This was due to that value somehow being coded as a header and label for the field.

WCAG Reference:

• Success Criterion 3.1.3 Unusual Words

• Success Criterion 3.1.4 Abbreviations

Sample Exchange Form

• Our DEX example includes a focus trap for the token selection and confirmation modals.

  • Many DEXes have the issue where the user is able to tab away from the modal.

  • This is bad practice and make the experience confusing as somehow amidst selecting tokens, the user ended up in the navigation bar with the modal still displaying.

Site Map

• The DEX is the most simplistic UI among the major dapp categories. Due to this they often don't feature site maps since they can effectively be designed as single page applications (SPAs).

• Nevertheless the site map is still an important feature for accessibility as it can house legal information and links to contacting your team.

• At the very least it should include:

  • Privacy Policy

  • Terms of Service

  • Contact Us

Token Lists

• Ticker + Token symbol listed together and can search token lists by either value.

Token Lists

• Lists and ordering are important. Make searches/lists alphabetical, more convenient in general. This was among some common complaints

• This is applicable to any list beyond a token selection screen. This applies to lists of chains (networks), NFT collections, Dapps, etc.

WCAG Reference

• Using standard text formatting conventions for lists

• Success Criterion 1.3.1 Info and Relationships

• Success Criterion 1.3.2 Meaningful Sequence

• Users were confused when lists were inconsistent across platforms. As it is difficult to gauge a user's level of familiarity, it is important to include both the ticker and full token name.

• The screen grab below shows a token list with examples.

Alternative Text for DEX Tokens

• Treat token icons as decorative as they add no informative value for the screen reader user. Alternative Text should be used when it's important to describe the images.

• A separate section of any dapp or a community repository could be formed to describe the image or icon of the tokens themselves.

• For instance "ethereum token logo ethereum (eth)" will be how the screen reader will read the following selection shown in the screen grab shown below this expandable section:

WCAG Reference:

• Success Criterion 1.4.9 Images of Text (No Exception)

DEX Currency Selection Modal