Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×


Prochain SlideShare
ChessFi Litepaper v0
ChessFi Litepaper v0
Chargement dans…3

Consultez-les par la suite

1 sur 52 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à BuildETH (20)


Plus récents (20)


  1. 1. UX/UI FOR WEB3
  2. 2. Self-Sovereign Identity Practical, Usable, and Universal. Do we want to solve Etherum’s identity problems @JonnyAustinTX
  5. 5. The 10 Usability Heuristics Jakob Nielsen nngroup.com/articles/ten-usability-heuristics
  6. 6. Visibility of System status UsabilityHeuristic.01
  7. 7. The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Visibility of System status
  8. 8. Visibility of System status
  9. 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. 10. Match between system and the real world UsabilityHeuristic.02
  11. 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. 12. Match between system and the real world
  13. 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. 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. 15. User control and freedom UsabilityHeuristic.03
  16. 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. 17. User control and freedom
  18. 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. 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. 20. UsabilityHeuristic.04 Consistency and Standards
  21. 21. Consistency and Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
  22. 22. Consistency and Standards
  23. 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. 24. UsabilityHeuristic.05 Error Prevention
  25. 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. 26. Error Prevention
  27. 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. 28. UsabilityHeuristic.06 Recognition Rather Than Recall
  29. 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. 30. Recognition Rather Than Recall
  31. 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. 32. UsabilityHeuristic.07 Flexibility and efficiency of use
  33. 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. 34. Flexibility and efficiency of use
  35. 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. 36. UsabilityHeuristic.08 Aesthetic and Minimalist Design
  37. 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. 38. Aesthetic and Minimalist Design
  39. 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. 40. UsabilityHeuristic.09 Help users recognize, diagnose, and recover from errors
  41. 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. 42. Help users recognize, diagnose, and recover from errors
  43. 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. 44. UsabilityHeuristic.10 Help and Documentation
  45. 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. 46. Help and Documentation
  47. 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. 48. EXTRA STUFF
  49. 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. 50. Distinguish between On-chain and Off-chain data
  51. 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. 52. THANK YOU Check out RIMBLE https://rimble.consensys.design/ Check out UPORT https://www.uport.me/