19 Ways to Cheat at dApp Design
TL;DR: Nobody is a genius, but there are tactics and methodologies that anyone can follow to design an Ethereum decentralized application (dApp) that allows users without a deep understanding of blockchain to easily understand, navigate, and use its user interface. We hope to be helpful to the Ethereum community by laying out the tactics we’ve used in Betoken.
Inevitably, anyone working on a blockchain project runs into situations where they need to make visual design decisions, whether they like it or not.
Maybe the team you work for doesn’t have a full-time designer and you need to build the UI on your own. Or you’re playing with a side-project and you want it to look better than your usual bootstrapped project.
It’s easy to give up and say “Nevermind, I’m not an artist, i’m not an expert in usability or accessibility, I’ll never be able to make this app have a good user experience! Let’s just bootstrap this project”. Nevertheless, it turns out there are tons of tricks and great advice out there that you can use to level up your work. And the good news is that it doesn’t require a background in product design.
Here are 19 simple ideas we try to implement at Betoken that you can use today to improve the UI and UX design of your dApp. Each idea is grouped into different categories that reflect a typical user flow for a new user engaging with your dApp.
Slow down, what is Betoken?
Betoken makes the best investments accessible to everyone in the form of a decentralized crypto hedge fund. Our open meritocratic system guarantees that your money is handled by the best people, and anyone can join us to get paid for their investment insights. Learn more at Betoken.fund & Medium. Follow Betoken on Twitter, Reddit, and Facebook, and join the official Betoken chat group on Telegram.
Offer the right information and tools
1. Not everyone in the world is a crypto veteran like yourself. More likely than not, your user would be confused by common crypto lingo like “gas” “Coinbase” and “wallet”. Explaining and offering useful resources regarding Ethereum and blockchain could be a great way to onboard newbies to this awesome universe.
2. Bringing information about why ETH and others tokens are mandatory to use your dApp is also a great way to boost confidence of your potential users. So, don’t be shy on this subject. At Betoken, we display those as a FAQ section contextualized for each step of the user-flow.
3. Another unfamiliar aspect for new users could be where to find the required tools to interact with the Ethereum network. The UI can display if the user already has the appropriate tools. If not, a tooltip can detail and point to the appropriate tools for using dApps, such as Metamask and Parity.
Don’t tell, show
During our user tests, we witnessed a batch of questions regarding how to deal with external tools necessary for interacting successfully with our dApp. We focused our effort into onboarding users via Metamask, a Chrome and Firefox extension able to interact with the Ethereum blockchain.
4. To build user’s self-confidence, we’ve chosen to display the current state of the required tool (eg. Metamask locked). It tells clearly what to do and how to do it via a tooltip accessible from the info icon.
5. In the near future, we hope to call out the appropriate UI of Metamask when we need it. E.g., calling out the Metamask unlock screen when a user clicks Continue with Metamask in our dApp. This feature is not currently available in Metamask, but will (from what we heard) be in the near future.
6. After connecting successfully, we display the Ethereum network’s name the user is interacting with and his actual balance of ETH and relevant ERC20 tokens required to use your dApp.
7. If the user doesn’t have the needed tokens (DAI in our case), we offer an easy way to buy them. Our decentralized hedge fund is powered by Kyber Network that allow us to support more than 40 ERC20 tokens. Kyber offers an inclusive way to allow our users to invest in the Betoken fund without leaving our UI.
Interacting
8. At Betoken, we’re no fan of guided tour to explain how to interact with your dApp, since we strive to make our UI to be as natural and self-explanatory as possible. Nevertheless, we’re dealing with large sums of money (like most dApps), so one can’t be too careful when it comes to ensuring the user doesn’t do anything dangerous. After some UX research, we decided to implement a tutorial in our first release. We’ll A/B test it to see which approach performs better.
9. Explain the why and the consequences of each action before the user sends out any Ethereum transactions. Highlight and double-check anything that has the potential to lose their money (e.g., when a user is sending their funds to another account, make sure they check that it’s the right account.)
10. Explain clearly what gas limit and gas price are, or hide them away in “Advanced”. The best way to handle gas is to set it automatically, which Metamask already does.
11. Display clear semantics for button design and keep in mind the commonly forgotten UI dimension: hierarchy. Primary, secondary, tertiary actions must have their individual UIs.
12. Same for destructive primary and destructive secondary actions. Each of them has a specific UI.
13. And of course, we try to reduce at its minimum the cost of running the dApp for the end user. It’s for this reason we implemented Kyber in our ecosystem. We display cost for every interaction with the Ethereum blockchain before submitting it to the network.
Alerting and emphasizing
14. For alert box UI, we try to embrace a light approach to highlight specific pieces of information. We don’t fill our alert boxes with colored background. We prefer to use accent border to emphasize them. By doing that, we don’t spoil the surrounding UI sections.
Waiting (yes, it’s sucks)
The development of the next phase of Ethereum Network promise us great improvement regarding speed and user-friendliness. Nevertheless, we’ve to deal with the actual state of this blockchain. And speed is not yet his best selling point.
15. Depending of your user-flow, try to offer a non-obtrusive UI. In other words, when possible, put in background the waiting phase regarding transaction confirmation and let users continue their journey into your dApp. But don’t forget to notify them when the transaction is successfully recorded into the blockchain.
16. If the obtrusive UI is required, explain why the dApp needs confirmations before letting the user continue their journey into the dApp.
17. Offer relevant information regarding the actual transaction: identifier, gas limit & price, and if possible how much time left before confirmation. Display a link pointing to Etherscan to check the transaction state.
Confirming
18. When the transaction’s been confirmed, display the relevant information regarding the confirmed transaction: identifier and a link to check the transaction on Etherscan. Also mention what the transaction accomplished, like transferring funds to someone else.
19. Don’t lead users into a dead-end. Display relevant new actions to perform after their previous one has been confirmed on the blockchain, such as Tweeting about their investment after they deposit into the Betoken fund.
If you enjoyed this post, be sure to check what we’re building at Betoken. Clap and share this post to help us spread the word regarding best practices for blockchain design.
Here are some useful links to get you started with Betoken:
- Website: https://betoken.fund/
- How Betoken works: http://bit.ly/2MmEEKB
- MVP on the Ethereum Rinkeby Testnet: https://betoken.fund/betoken-ui/
- New UI for our MVP: https://invis.io/SYGNGL6V973#/288063883_0-First-Cycle-Deposit-Fund
- Whitepaper: https://github.com/Betoken/Whitepaper
- Formal analysis: http://bit.ly/2MoS4Wl
- Token sale website: coming soon
- Telegram: https://t.me/betokenfund
- Medium: https://medium.com/betoken
- Twitter: https://twitter.com/betokenfund
- Github: https://github.com/Betoken
- Reddit: https://www.reddit.com/r/betoken/
- Facebook: https://www.facebook.com/betokenfund/
We look forward to answering your questions about Betoken and engaging in lively discussion!
