-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
065a055
commit 3ce73c4
Showing
1 changed file
with
55 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,55 @@ | ||
| --- | ||
| title: Design and UX in web3 | ||
| description: Introduction to UX design and research in web3 space and Ethereum | ||
| lang: en | ||
| --- | ||
|
|
||
| Are you new to designing with Ethereum? This is the right place for you. The Ethereum community has written resources to introduce you to web3 design and research basics. You'll learn about core concepts that may differ from other app designs you're familiar with. | ||
|
|
||
| Need a more basic understanding of web3 first? Check out [**Learn hub**](/learn/). | ||
|
|
||
| ## Start with user research {#start-with-user-research} | ||
|
|
||
| Effective design goes beyond creating visually appealing user interfaces. It involves gaining a deep understanding of the user's needs, objectives, and driving factors. Therefore, we highly recommend that all designers adopt a design process, such as the [**double diamond process**](<https://en.wikipedia.org/wiki/Double_Diamond_(design_process_model)>), to ensure that their work is deliberate and intentional. | ||
|
|
||
| - [Web3 needs more UX Researchers and Designers](https://blog.akasha.org/akasha-conversations-9-web3-needs-more-ux-researchers-and-designers) - An overview of current design maturity | ||
| - [A simple guide to UX Research in web3](https://uxplanet.org/a-complete-guide-to-ux-research-for-web-3-0-products-d6bead20ebb1) - Simple guide how to do research | ||
| - [How to Approach UX Decisions in Web3](https://archive.devcon.org/archive/watch/6/data-empathy-how-to-approach-ux-decisions-in-web3/) - A brief overview of quantitative and qualitative research and the differences between the two (video, 6 min) | ||
| - [Being a ux researcher in web3](https://medium.com/@georgia.rakusen/what-its-like-being-a-user-researcher-in-web3-6a4bcc096849) - A personal view on what it is like being a UX researcher in web3 | ||
|
|
||
| ## Research studies in web3 {#research-in-web3} | ||
|
|
||
| This is a curated list of user research done in web3 that may help with design and product decisions or work as an inspiration to conduct own study. | ||
|
|
||
| | Area of focus | Name | | ||
| | :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [The WalletConnect Pulse 2024: Crypto Consumer Sentiment & Usage](https://walletconnect.com/pulse-2024-crypto-consumer-report) | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing) | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing) | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md) | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [ConSensys: The State of Web3 perception around the world 2023](https://consensys.io/insight-report/web3-and-crypto-global-survey-2023) | | ||
| | <Badge colorScheme="green">Crypto onboarding</Badge> | [NEAR: Accelerating the journey towards adoption](https://drive.google.com/file/d/1VuaQP4QSaQxR5ddQKTMGI0b0rWdP7uGn/view) | | ||
| | <Badge colorScheme="purple">Staking</Badge> | [OpenUX: Rocket Pool Node Operator UX](https://storage.googleapis.com/rocketpool/RocketPool-NodeOperator-UX-Report-Jan-2024.pdf) | | ||
| | <Badge colorScheme="purple">Staking</Badge> | [Staking: Key trends, takeaways, and predictions - Eth Staker](https://lookerstudio.google.com/u/0/reporting/cafcee00-e1af-4148-bae8-442a88ac75fa/page/p_ja2srdhh2c?s=hmbTWDh9hJo) | | ||
| | <Badge colorScheme="purple">Staking</Badge> | [Multi App Staking](<https://github.com/threshold-network/UX-User-Research/blob/main/Multi-App%20Staking%20(MAS)/iterative-user-study/MAS%20Iterative%20User%20Study.pdf>) | | ||
| | <Badge colorScheme="red">DAO</Badge> | [2022 DAO Research Update: What do DAO Builders Need?](https://blog.aragon.org/2022-dao-research-update/) | | ||
| | <Badge colorScheme="pink">DeFi</Badge> | [The state of Defi 2024](https://stateofdefi.org/) (ongoing survey) | | ||
| | <Badge colorScheme="pink">DeFi</Badge> | [Coverage pools](https://github.com/threshold-network/UX-User-Research/tree/main/Keep%20Coverage%20Pool) | | ||
| | <Badge colorScheme="pink">DeFi</Badge> | [ConSensys: DeFi User Research Report 2022](https://cdn2.hubspot.net/hubfs/4795067/ConsenSys%20Codefi-Defi%20User%20ResearchReport.pdf) | | ||
| | <Badge colorScheme="gray">Metaverse</Badge> | [Metaverse: User Research Report](https://www.politico.com/f/?id=00000187-7685-d820-a7e7-7e85d1420000) | | ||
| | <Badge colorScheme="gray">Metaverse</Badge> | [Going on Safari: Researching Users in the Metaverse](https://archive.devcon.org/archive/watch/6/going-on-safari-researching-users-in-the-metaverse/?tab=YouTube) (video, 27 min) | | ||
| | <Badge colorScheme="blue">Ethereum.org UX stats</Badge> | [Usability and user satisfaction survey dashboard - Ethereum.org](https://lookerstudio.google.com/reporting/0a189a7c-a890-40db-a5c6-009db52c81c9) | | ||
|
|
||
| ## Design for web3 {#design-for-web3} | ||
|
|
||
| - [Web3 UX Design Handbook](https://web3ux.design/) - Practical guide to designing Web3 apps | ||
| - [Web3 Design Principles](https://medium.com/@lyricalpolymath/web3-design-principles-f21db2f240c1) - A framework of UX rules for blockchain based dapps | ||
| - [Blockchain Design Principles](https://medium.com/design-ibm/blockchain-design-principles-599c5c067b6e) - Lessons learned by the blockchain design team at IBM | ||
| - [Web3 Design Patterns](https://www.web3designpatterns.io/)- A curated library of design patterns from real Web3 products | ||
| - [W3design.io](https://w3design.io/) - A curated library of UI flows of different projects in the ecosystem | ||
| - [Neueux.com](https://neueux.com/apps) - UI library of user flows with diverse filtering options | ||
| - [Web3's Usability Crisis: What You NEED to Know!](https://www.youtube.com/watch?v=oBSXT_6YDzg) - A panel discussion on pitfalls of developer focused project building (video, 34 min) | ||
|
|
||
| ## Getting Started {#getting-started} | ||
|
|
||
| - [Heuristics for Web3](/developers/docs/design-and-ux/heuristics-for-web3/) - 7 heuristics for Web3 interface design | ||
| - [DEX Design Best Practices](/developers/docs/design-and-ux/dex-design-best-practice/) - A guide to designing Decentralized Exchanges | ||
|
|
||
| ## Web3 Design Case Studies {#design-case-studies} | ||
|
|
||
| - [Deep Work Studio](https://deepwork.studio/case-studies/) | ||
| - [Crypto UX Handbook](https://www.cryptouxhandbook.com/) | ||
| - [Selling an NFT on OpenSea](https://builtformars.com/case-studies/opensea) | ||
| - [Wallet UX teardown how wallets need to change](https://www.youtube.com/watch?v=oTpuxYj8JWI&ab_channel=ETHDenver) (video, 20 min) | ||
|
|
||
| ## Design Bounties {#bounties} | ||
|
|
||
| - [Dework](https://app.dework.xyz/bounties) | ||
| - [Buildbox hackathons](https://app.buidlbox.io/) | ||
| - [ETHGlobal hackathons](https://ethglobal.com/) | ||
|
|
||
| ## Design DAOs and communities {#design-daos-and-communities} | ||
|
|
||
| Get involved in professional community-driven organizations or join design groups to discuss design and research related topics and trends with other members. | ||
|
|
||
| - [Vectordao.com](https://vectordao.com/) | ||
| - [Deepwork.studio](https://www.deepwork.studio/) | ||
| - [Designer-dao.xyz](https://www.designer-dao.xyz/) | ||
| - [We3.co](https://we3.co/) | ||
| - [Openux.xyz](https://openux.xyz/) | ||
| - [Open Source Web3Design](https://www.web3designers.org/) | ||
|
|
||
| ## Design Systems {#design-systems} | ||
|
|
||
| - [Optimism Design](https://www.figma.com/@optimism) (Figma) | ||
| - [Ethereum.org Design system](https://www.figma.com/@ethdotorg) (Figma) | ||
| - [Finity, a design system by Polygon](https://www.figma.com/community/file/1073921725197233598/finity-design-system) (Figma) | ||
| - [Kleros Design System](https://www.figma.com/community/file/999852250110186964/kleros-design-system) (Figma) | ||
| - [Safe Design System](https://www.figma.com/community/file/1337417127407098506/safe-design-system) (Figma) | ||
| - [ENS Design system](https://thorin.ens.domains/) | ||
| - [Mirror Design System](https://degen-xyz.vercel.app/) | ||
|
|
||
| **Articles and projects listed on this page are not official endorsements**, and are provided for informational purposes only. | ||
| We add links to this page based on criteria in our [listing policy](/contributing/design/adding-design-resources). If you'd like us to add a project/article, edit this page on [GitHub](https://github.com/ethereum/ethereum-org-website/blob/dev/public/content/developers/docs/design-and-ux/index.md). | ||
| # Enhancing Decentralized Applications by Integrating UX Design with Smart Contract Logic | ||
|
|
||
| In the development of smart contracts, an optimal user experience (UX) can enhance the efficacy, security, and usability of decentralized applications (dApps). Smart contracts are immutable upon implementation; consequently, the implementation of UX principles reduces errors and improves user experience. | ||
|
|
||
| The article provides practical strategies for putting user experience (UX) into the logic of smart contracts. | ||
|
|
||
| ## Key Factors for Smart Contract UX | ||
|
|
||
| ### Transaction Clarity | ||
| Users need to understand exactly what a transaction performs. Clear UI explanations and transparent confirmations are critical to maintaining user trust. | ||
| *Tip: Use UI features that simplify transaction procedures for users. Show details like as fund transfers, protocol interactions, and contract state changes prior to confirmation.* | ||
|
|
||
| ### Security and Feedback | ||
| Contracts involving assets must prioritize security and provide user feedback. Avoid ambiguous errors such as "transaction reverted." Instead, use relevant error messages. | ||
| *Display error details such as "insufficient funds" or "gas estimation failed" to improve the user experience.* | ||
|
|
||
| ### Gas Usage Optimization | ||
| Users can be frustrated by gas prices, especially amid network congestion. Gas fees can be reduced by optimizing contractual logic. | ||
| *Tip: Reduce superfluous computations in smart contract functions and provide users with gas estimates before transactions.* | ||
|
|
||
| ### Streamlining User Actions | ||
| Complex interactions, such as approving tokens or dealing with several contracts, might overwhelm consumers. These flows can be simplified with intuitive UI features. | ||
| *Tip: Create guided processes to reduce errors and confusion.* | ||
|
|
||
| ## UX Design for Smart Contract Development | ||
|
|
||
| 1. **Ideation and Collaboration** | ||
|
|
||
| Engage designers from the beginning to better understand user demands and create intuitive contract logic. | ||
|
|
||
| 2. **Prototypes** | ||
|
|
||
| Use wireframes and prototypes to visualise interactions. Early prototype testing is essential for gathering input. | ||
|
|
||
| 3. **Testing** | ||
|
|
||
| Deploy contracts on testnets and run stress tests to simulate real-world use cases. This aids in detecting flaws in user flows and contract logic. | ||
|
|
||
| ## Real-world Examples | ||
|
|
||
| 1. **UniSwap V3** | ||
|
|
||
| Uniswap V3 added complex liquidity tools, however the UX team kept the interface simple for liquidity providers. | ||
| *Use intuitive user interface components to simplify complex functionality.* | ||
|
|
||
| 2. **Aave** | ||
|
|
||
| Aave emphasizes clarity, providing customers with straightforward information regarding interest rates and hazards. | ||
| *Use real-time feedback to avoid costly blunders.* | ||
|
|
||
| ## Supplementary Materials: | ||
|
|
||
| - [Principles of Web3 Design](https://ethereum.org/en/contributing/design-principles/) | ||
| - [Guidelines for Developing Smart Contracts](https://docs.openzeppelin.com/learn/developing-smart-contracts) | ||
| - [Techniques for Optimizing Gas Usage](https://www.cyfrin.io/blog/solidity-gas-optimization-tips) |