This document provides guidance on UX best practices for designing dApps. It summarizes 10 usability heuristics from Jakob Nielsen, applying each one to considerations for dApps. For example, it notes that dApps should always show transaction status to users and integrate block explorers. It also emphasizes preventing errors given the irreversible nature of transactions, and helping users through tutorials since crypto is confusing. Overall, the document stresses simplifying dApp UX/UI to reduce complexity and holding users' hands as they get started.

1. UX/UI
FOR
WEB3

2. Self-Sovereign
Identity Practical,
Usable, and
Universal.
Do we want to
solve Etherum’s
identity problems
@JonnyAustinTX

3. THE BEST
TECHNOLOGY
DOESN’T WIN

4. THE BEST
EXPERIENCE DOES

5. The 10 Usability
Heuristics
Jakob Nielsen
nngroup.com/articles/ten-usability-heuristics

6. Visibility of
System status
UsabilityHeuristic.01

7. The system should always keep users informed
about what is going on, through appropriate
feedback within reasonable time.
Visibility of
System status

8. Visibility of
System status

9. Blockchain transaction latency is an
unfamiliar experience for most new users.
Always provide a pending state for
transactions with the ability to view the
transaction on a block explorer like
EtherScan.
For dApps
Visibility of
System status

10. Match between system
and the real world
UsabilityHeuristic.02

11. The system should speak the users' language,
with words, phrases and concepts familiar to the
user, rather than system-oriented terms. Follow
real-world conventions, making information
appear in a natural and logical order.
Match between system
and the real world

12. Match between system
and the real world

13. For dApps
The Metamask pop up during a
signature request will likely grab
the attention of the user.
Make sure you use PersonalSign or
EIP712 signing methods that allow
you to include a human readable
message which you can use to
guide the user.
Match between system
and the real world

14. Match Between System and the Real World
Rimble Bonus Tip
Add some personality: say Hi or reference your dapp's name so they know it's
coming from you
Explain what this action will do: connect you securely
Explain what this action is for: prove you own the account
This might be because the user has recently accepted the connection
request or because your dapp hasn't implemented EIP1102 – which we
suggest you do
Include the nonce (e.g. d458fa15-dcab-4d85-a477–004d6febca12) as a
security procedure but add some context as to why they're seeing it! Also
make sure they're aware they don't need to remember this or write it down
Explain that it won't cost Ether

15. User control
and freedom
UsabilityHeuristic.03

16. Users often choose system functions by
mistake and will need a clearly marked
"emergency exit" to leave the unwanted state
without having to go through an extended
dialogue. Support undo and redo.
User control
and freedom

17. User control
and freedom

18. User control
and freedom
Though security is incredibly
important in the crypto space,
allow users to decentralize at
their own pace.
Do not require users to write
down their seed phrase during
on boarding. Instead, allow them
to layer on security best practice
as their wallet balance
increases.
For dApps

19. User control and freedom
Rimble Bonus Tip
Let the user explore before connecting
Only ask them to connect when they need to
Educate them passively – don't force them
to learn if they don't need to know right now

20. UsabilityHeuristic.04
Consistency
and Standards

21. Consistency
and Standards
Users should not have to wonder whether
different words, situations, or actions mean
the same thing. Follow platform conventions.

22. Consistency
and Standards

23. Consistency
and Standards
Standards are currently
emerging in this space which
can make things difficult.
For language around Gas/
Transaction/Miner/Network
fee’s, continue to experiment as
no one has figured out what
resonates best, yet.
For dApps

24. UsabilityHeuristic.05
Error
Prevention

25. Error
Prevention
Even better than good error messages is a
careful design which prevents a problem from
occurring in the first place. Either eliminate
error-prone conditions or check for them and
present users with a confirmation option
before they commit to the action.

26. Error
Prevention

27. Mistakes in crypto are typically
higher cost than in traditional
applications where transactions
can be reversed.
For this reason, err on the side of
too many warnings and consider
creating white and black lists of
known contract addresses and
also alerting users when they
are interacting with an address
for their first time.
For dApps
Error
Prevention

28. UsabilityHeuristic.06
Recognition Rather
Than Recall

29. Recognition Rather
Than Recall
Minimize the user's memory load by making
objects, actions, and options visible. The user
should not have to remember information
from one part of the dialogue to another.
Instructions for use of the system should be
visible or easily retrievable whenever
appropriate.

30. Recognition Rather
Than Recall

31. Recognition Rather
Than Recall
Moving into web3 will typically
require users to keep track of an
increasing number assets which
will quickly surpass a user’s
ability to recall them.
When dealing with transactions,
make sure that the user can
view and select from a list of all
their assets. Also, consider
integrating a DEX to allow users
to transact in any asset they
would like.
For dApps

32. UsabilityHeuristic.07
Flexibility and
efficiency of use

33. Flexibility and
efficiency of use
Accelerators — unseen by the novice user —
may often speed up the interaction for the
expert user such that the system can cater to
both inexperienced and experienced users.
Allow users to tailor frequent actions.

34. Flexibility and
efficiency of use

35. Flexibility and
efficiency of use
Think about decisions a user
may need to make repeatedly
over the course of their lifetime
with your app. dApps return
more control to users meaning
that less of their actions can be
automated away to third parties.
Allow users to set a default of
slow/medium/fast gas
estimation in their settings to
speed up their workflow.
For dApps

36. UsabilityHeuristic.08
Aesthetic and
Minimalist Design

37. Aesthetic and
Minimalist Design
Dialogues should not contain information
which is irrelevant or rarely needed. Every extra
unit of information in a dialogue competes
with the relevant units of information and
diminishes their relative visibility.

38. Aesthetic and
Minimalist Design

39. Aesthetic and
Minimalist Design
Crypto is complicated. Go the
extra mile to simplify the UX
and UI of your app to combat
that perception.
Try to avoid displaying full wallet
addresses or smart contact
addresses in the main UI.
For dApps

40. UsabilityHeuristic.09
Help users recognize, diagnose,
and recover from errors

41. Error messages should be expressed in plain language
(no codes), precisely indicate the problem, and
constructively suggest a solution.
Help users recognize, diagnose,
and recover from errors

42. Help users recognize, diagnose,
and recover from errors

43. Help users recognize, diagnose,
and recover from errors
Again, crypto is unique in that errors can
result in loss of funds that cannot be
reversed, increasing the pressure on users.
When dealing in transactions, allow a user
to resubmit a pending transaction with a
higher gas price and the same nonce to
push the transaction through.
For dApps

44. UsabilityHeuristic.10
Help and
Documentation

45. Help and
Documentation
Even though it is better if the system can be
used without documentation, it may be
necessary to provide help and documentation.
Any such information should be easy to search,
focused on the user's task, list concrete steps
to be carried out, and not be too large.

46. Help and
Documentation

47. Help and
Documentation
Because crypto is so confusing and the stakes are so
high when dealing with irreversible transactions, it is
important to hold a new user’s hand and build their
confidence.
Consider supplying a new user with some starter assets
and walking them through a tutorial that actually allows
them to perform the action they might be anxious about.
For dApps

48. EXTRA STUFF

49. Fiat On-Ramps
Rimble Bonus Tip
Set an expectation of how much ETH a user
will need to get started.
Check to see if a user has enough ETH to
cover it and if they don’t use a an integrated
exchange like Wyre to help onboard them.

50. Distinguish between
On-chain and
Off-chain data

51. Progressive Decentralization
Build your dApp experience in a way that
allows for a user to decentralize over time
and at their own pace.
This means things like giving new users the
option to have you custodian their keys, then
use their own keys with you as a recovery
option, to full ownership of their keys.
Check out Austin Griffith’s
Burner Wallet
Check out Austin Griffith’s
Burner Wallet

52. THANK YOU
Check out RIMBLE
https://rimble.consensys.design/
Check out UPORT
https://www.uport.me/