Portfolio / User Dashboards

Intro

This dapp category spans a lot of "DeFi" type services. In the future this may be labeled as a bit too broad. The category can then be further split into separate categories. However, at present, it seems to make sense to group these types of applications as many features overlap.

This category can include dapps that offer advanced trading (spot, margin, etc), lending protocols, data dashboards, or user profile balances.

Purpose

• The purpose, features, and functionality should be explicitly clear for the user.

• This is particularly important for dapps with advanced features. Even staking should be considered as advanced as there are many nuances to it. What is APY? How is it calculated?

• We recommend this information be communicated in simple, clear language in an easy to find about page or within an expandable/collapsable banner at the top of each page.

• In the case of a banner, it may be effective to have a preview, with an expandable section as below.

Instruction Banner Preview

Expanded Banner

• Note: Emojis are ok in moderation, but rather annoying for screenreader users if too many are used. The reader will read the name of the emoji regardless of number of repetitions.

  • Example: 👍👍👍👍👍

    • Will be read as "thumbsup thumbsup thumbsup thumbsup thumbsup"

Theming & Color Contrast:

• If a dapp only has 1 color scheme it should be a light mode variation. If a dapp has two color schemes it should offer dark and light mode, with light mode as the default.

• We encourage dapps to use light/dark mode, however the best possible option would be to set aside time to offer different themes. In our staking dapp we've added multiple theme options and variations. These all of course conform to WCAG guidelines for color contrast.

Color Theme Selection Dropdown

• The user may select different themes based on their preference. All Themes conform to proper color contrast, this can be verified with any contrast tool such as wave for instance.

Skip Buttons:

• The user may skip to the main content.

• An enhancement will allow the user to skip between sections on more complicated defi dapps.

• For instance, the ability to skip graphs is an ideal feature. Especially, if the graph is inaccessible. This may be the case for overly complicated graphs as well.

Graphs

• All visual content that is of importance should have some form of written alternative to describe that content. This includes graphs and data.

• For graphs with static data, this is simple to execute.

• Dynamic graphs become complicated quickly. We have a separate dedicated interview on our channel taught by a data visualization expert to guide you on better practices for data visualization. This talk is intended for any technology, it is not specific to web3 only.

  • The current WCAG method is to offer all the data in a populated table for the user to navigate. The table must be accessible. This allows the user to achieve perceiving the content, however understanding it adds cognitive load and friction. It is therefore a minimally sufficient means of removing this barrier.

Focus Traps

• We've mentioned this in the general section, however it was a prominent issue in dapps in this category.

• As the user navigates through defi dapps and opens modals (popups), there should be a focus trap mechanism to ensure they cannot tab outside of it.