1

How to make decentralized apps (dApps) more user-friendly

 1 year ago
source link: https://uxdesign.cc/how-to-make-dapps-more-user-friendly-7261e3f64ea4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

CRYPTO BUILD MARKET ⚒

How to make decentralized apps (dApps) more user-friendly

1*KS3Sr1oMabeMDz5SBx9-6A.png
Image by Leo on Dribble.

I feel for Celsius, Three Arrows, Babel Finance and whoever the next floater happens to be.

Just two months ago, taking a loan out against your crypto was “how the rich people do it.”

Now, with my portfolio down 90%, my loan collateral topped up and no dry power left to slurp the dipperino, there’s literally nothing left to do but wait.

Wait, and build.

I think we can all agree that the current sate of crypto user experience is completely unacceptable:

1*q5v-OKPj-ypVcYqIdS78dw.jpeg
What?
1*ijndv0qXjapHQRkJV97kVw.jpeg
Huh?
1*M3DRdVlhO4rggT4uu3iPJA.jpeg
Plasma exit mechanism?
1*yn_3ioDmZfNHNFkVR5m85A.jpeg
Why are these not the same?

I could go on.

For new entrants there are countless situations where it’s not clear what’s happening. Communication is poor, basic functions are not smooth, expensive mistakes are easily made and trust is easily lost.

We have about a year before the next bitcoin halving/ bull cycle in which to alleviate this pain.

To that end, I’m writing a series on the crypto product areas I think are in most urgent need of attention.

This one will focus on decentralized applications (dApps).

Let’s get into it.

1. Connecting

Usually the most important CTA on any dApp is the Connect Wallet button.

But with the constant stream of news about crypto scams and hacks, people are understandably anxious about losing their assets by accidentally connecting to the wrong dApp.

Currently, no dApp that I’m aware of does anything to help allay that fear and instill trust.

Low hanging fruit 🍊

Let’s improve this situation by communicating some information about the platform that might help people feel safer about connecting.

Such as:

  • A short blurb on what permissions the dApp will be requesting
  • A link to the contract audit
  • Some additional social proof
1*OY078e6lmaw4KYDIYAFCoA.jpeg

There could be other things you might want to flex here but you get the idea.

Other things:

  • Number of people connected right now
  • Total value locked
  • Number of LPs
  • View on Etherscan (nice if you’re verified)
  • We will automatically disconnect you after 24hrs of inactivity (more on disconnecting down below)

Support all the wallets 👛

Another easy one that surprisingly few dApps offer is support for a variety of different wallets.

1*jpZfHXyamKyjyBHs-MGYTQ.jpeg
Pretty Standard.

While Metamask is by far the most popular wallet for ERC20 tokens and all the other tokens that reside on EVM compatible chains, there are others.

And the list seems to keep growing. Even Robinhood is now getting into the non-custodial wallet game.

Rainbow offers a nice configurable plugin for a Connect Wallet button which pops up a modal that has all the wallets.

1*oGr13tp0j1_9ATKGevMAAg.jpeg
And a Figma file. 🙌

Out of the box, this is far better than the standard offering you usually see of Metamask, WalletConnect and maybe one or two others.

But I would recommend customizing it for the needs of your target audience and to match the style of your dApp.

  • Include all wallets that support your dApp
  • Provide some education around wallets
  • Don’t forget the mobile version
1*VxKrw2wCgvpG91H_-c5Dag.gif

2. Confirmation screens

Like other banking and finance apps, dApps that facilitate transactions provide a confirmation screen which summarizes the details of the desired action and asks the user to confirm.

More often than not, these screens completely miss the mark.

Unless you’re a crypto developer, you probably don’t understand jargon like GWEI and Royalties.

These terms are confusing at best. At worst, they make users feel like they’re getting mugged by hidden fees.

Feature tweak 🔧

Include the specific action in the title, put the most important information at the top and include the maximum amount of detail underneath.

  • Use human friendly labels
  • Show the local currency value as well as crypto value
  • Use tool tips to explain key concepts
  • Have an option to subtract the fees from the total (recipient pays fees)
  • Estimate how long it will take based on network congestion
  • Have an option to add an email address to receive a transaction summary

We don’t need to eliminate the jargon completely, but use this opportunity to educate people on crypto terms.

1*-VzcX7wKC3Cufpsq74ZxUg.jpeg
Less is not more on confirmation screens.

The example above is specifically for sending crypto and includes details that are specific to that action. But confirmation screens are used for a HUGE variety of tasks, not necessarily even financial.

It may just be a signature required to change a minor thing or to grant additional permissions to the dApp.

The details on the confirmation screen must be tailored to the task.

Do not show “Amount: 0, Gas: 0, Royalty: 0, Total: 0” if the action is to update permissions.

3. Transaction status

Once you confirm the transaction, that’s often where things really go downhill. We expect crypto payments to be nearly instant but depending on the chain, they can be quite slow.

The amount of information conveyed on a transaction status screen varies a lot between different dApps.

Sometimes this is for technical reasons. An increasing number of crypto platforms do not actually custody assets themselves, but instead using custodial services like Fireblocks.

Fireblocks does not currently relay any on-chian transaction data through their API other than transaction status (pending, cancelled or complete). And even that info is not in a format that updates automatically (you need to refresh the page to see if the status changed).

Lame.

However, there are innovative solutions to this problem. For example, BitPay built a monitoring client that senses any blockchain transaction on one of their wallets and relays all the data in a webhook. And it’s open source.

This is not a small piece or work, but even dApps using third party custody services like Fireblocks could implement it in order to show users a detailed transaction status.

So basically, no excuse.

1*eI1jgZ083s-R4yd7j--Psg.gif

Remember how much info was conveyed when you downloaded a file over dial-up internet on Windows95?

TMI? I actually don’t think so.

Urgent requirement❗️

If your transfer status screen is a half-ass effort, you need to fix it immediately.

I have seen the help desk messages that people write when they are feeling that pit deep in their stomach when they think they may have lost their funds. And they are not okay.

dApps do not typically have help desks.

All the more reason to get this right.

There should never, ever be any doubt as to what’s happening with a transaction.

Transaction status may include:

  • Dynamic status (pending/ cancelled/ complete)
  • Loader indicating the transaction is underway
  • Estimated time to completion
  • Number of confirmations
  • Info about how to speed up or cancel the transaction
  • Emergency cancel button (which immediately pays the required amount of gas to stop the transfer)
  • Link to the transaction on a block explorer
1*F2NeN919LEjEXY1LIDWNkw.jpeg

4. Disconnecting

On February 19th, Twitter started blowing up with claims that people were getting their NFTs transferred out of their wallets without permission or sold for very low prices.

The exploit coincided with with an OpenSea contract migration, wherein they sent out an official email with instructions for NFT creators on the platform to manually migrate their collections.

Apparently, the exploiter basically copied OpenSea’s email template and sent it out with a link to a spoofed website with a malicious contract.

At the time though, no one understood what was happening.

Fearing the worst, NFT influencers started circulating threads on how to disconnect your wallet from OpenSea and revoke token approvals, something most people had no clue how to do.

Some were going a step further and saying that any wallet that had ever been connected to OpenSea was at risk and that everyone should create a brand new wallet, pay the gas (which of course was insanely high at that moment), and transfer everything they had.

Luckily, the extent of the damage was pretty quickly identified.

It was bad, but not as bad as people had feared.

I’m not sure how many events like this its going to take for us make the disconnect button a standard feature of all dApps.

Security imperative 🔐

  • Empower users to disconnect and revoke token approvals immediately
  • Provide the option to disconnect / revoke token approvals after a specified period of time
1*d7eVUlFa4uYAPCfBUYD0Lw.jpeg

I said “empower users” above because this not solely about user experience.

There are principles at stake here that will be won or lost in the details.

Easily disconnecting from dApps (AKA easily revoking access to your data) is one of the great promises of Web3 and represents a core ideological tenant of the movement.

As more and more data becomes tied to blockchains, more and more dApps will be built to facilitate access to that data and do interesting things with it.

This in turn will grow the amount of data on chain and power the next wave of the internet.

But only if people can trust the system.

And we have a lot of work to do on that front.

___

Thanks for reading until the end. I work in crypto and think about it non-stop. You can find me on Twitter @danajwright_


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK