Ethereum UX Tools: The Ultimate Guide

[ZionRTZ]

Let’s get started:

There’s a huge learning curve for any experienced developer looking to break into the world of decentralized applications (dapps) for the first time.

Building with blockchains is hard — from deciding which platform to build on top of to learning the intricacies of each smart contracting protocol… There is a lot of ground to cover for new developers.

And even after learning the ins and outs of core Ethereum tools — solidity, truffle, infura — you still have to solve for usability hurdles.

Luckily, there are a number of tools that have been shipped over the last couple of months to take on some of these challenges for you. We’ve compiled this list to help you understand which projects are solving different web 3 UX challenges.

Hopefully this will give you a better picture of usability in the Ethereum ecosystem, and enable you to create a dapp that is easy for the average web consumer to use!


Let’s dive in:

1. Wallets:

While we are all familiar with wallets like MetaMask, EQL, Balance, and Coinbase Wallet, there are a lot of new innovations happening around wallets to improve user onboarding.


Portis - https://www.portis.io

Portis has a javascript SDK that enables dapps to provide users a local walletless experience. Portis handles setting up a wallet, signing transactions, and gas fees. Portis makes engaging with your dapp feel like a web 2.0 experience. And users still control their keys — Portis just stores them securely.


Fortmatic - https://fortmatic.com

Fortmatic is a Web 3-compatible JavaScript SDK that enables end-users to interact with any dapp with just their phone numbers on any modern desktop or mobile browser.


Burner Wallets - https://github.com/austintgriffith/burner-wallet

Burner wallets enable new users to quickly transact right from their browser. Austin Griffith has been leading the community in developing this approach — which worked flawlessly at ETH Denver.


2. Out of the Box Tools:

Embark by Status - https://embark.status.im

Embark is a developer environment that’s designed to help you get a dapp up and running as quickly as possible. It comes packed with some pretty powerful features right out of the box:

- Automatic smart contract deployment — Embark takes care of deploying your smart contracts as well as re-deploying them as you make changes to your code.

- Client development — Build your application with the framework of your choice within Embark.

- Testing — Test your applications and smart contracts through Web 3 in JavaScript.

- Decentralized app distribution — Embark integrates with decentralized storages like IPFS and helps you distribute your app in the network.

- Peer-to-peer messaging — Send and receive messages via communication protocols like Whisper.


Blocknative Assist - https://blocknative.com

disclosure: I’m working with Blocknative and am a huge fan of the tool.

Assist.js helps dapp #DevelopmentTeam s onboard new users easily — enabling them to transact with more clarity and confidence.

How? By programmatically identifying and outlining clear steps for end-users to follow. This helps users overcome common obstacles, and prevents common pitfalls.


Assist is broken into four parts:

1. Readiness Assessment — programmatically detects each user’s technical readiness to engage with your dapp.
   
2. Onboarding Assistance — an out-of-box, componentized UI that guides users through the actions they need to take to be ready to use your dapp.
   
3. Transaction Awareness — gives onboarded users real-time feedback on their in-flight transactions, including how to handle common pitfalls and errors.
   
4. Performance Analytics — gives developers baseline visibility into both the ‘transaction readiness’ and the ‘transaction experience’ of your dapp so you can understand where users are struggling.


Dapparat.us - https://github.com/austintgriffith/dapparatus

Austin Griffith created a set of reusable react components for dapps. Some of the components included are: contract loader, metamask, gas, transaction ui, event parers, etc. It’s a great starting place for those looking to own their full code base.


3. Design Systems:

Design systems are a series of components that can be reused in different combinations. They’re meant to enable designers and developers to scale best practices and consistent design across large projects. Think of bootstrap as one of the OG design systems.

For Web 3 design systems, check out:

- Rimble (ConsenSys Design) — https://rimble.consensys.design/
- Lorikeet (Aragon) — https://lorikeet.design/

disclosure: I used to work at ConsenSys.


4. Open Source UI:

A few projects have made parts of their design open for the community to build on:

- Decentraland UI — https://github.com/decentraland/ui
- Bounties UI — https://components.bounties.network/
- Aragon UI — https://ui.aragon.org/
- Meta UI — https://github.com/universelabs/meta
- Metamask UI — https://github.com/MetaMask/metamask-extension/tree/develop/ui/app/components


5. Popular Frontend Ethereum APIs:

These are a collection collection of libraries which allow devs who are already familiar with JS or react to build dapps and/or integrate ethereum smart contracts.

- Web 3 JS — https://github.com/ethereum/web3.js/
- Web 3 React — https://github.com/NoahZinsmeister/web3-react
- Vortex (react) — https://github.com/Horyus/vortex
- Tasit (react native) — https://github.com/tasitlabs/tasitsdk
- Drizzle (react) — https://github.com/truffle-box/drizzle-box
- Ether JS — https://github.com/ethers-io/ethers.js/


Build something that users want…

My good friend Ryan recently gave a talk titled “Dapps are cool… dapp users are cooler.” His point was that decentralized applications can’t change the world if we don’t get people to start using them, and we won’t get people to start using them if we don’t improve the UX.



SOURCE: https://hackernoon.com/ethereum-ux-tools-the-ultimate-guide-aad1cd2c128