Less Trust, More Truth: Web3 Design Best Practices and Patterns

Developers have a dream of a new internet. Web3 is a decentralized model that gives users full ownership of the platforms and content they’re creating online. But trying to revolutionize the internet presents multiple design challenges—chiefly, building user interfaces that resolve the confusion and safety concerns caused by Web3’s distinct features.

Web3 Explained

To understand Web3, it’s helpful to know a brief history of the internet:

• Web 1.0 was decentralized, meaning ownership and control of content and platforms were distributed among many individuals and businesses.
• Web 2.0, the current iteration of the internet, evolved thanks to a small number of software companies with user-friendly platforms, like Apple, Google, Facebook (now Meta), and Twitter. As more people became active creators and consumers online, the web grew more centralized, largely owned and controlled by a few corporations.

With Web3, developers are making the internet decentralized again. Tech monopolies will no longer have possession and command of the content and platforms users create. Web3 also aims to solve the internet’s security and privacy issues.

Web3 is:

• Trustless: Developers, content creators, and other users retain control over the way Web3 platforms and DApps—decentralized applications—are built and maintained, as well as what content can be posted. They have full visibility into the code and the way services are run. This stands in contrast to web 2.0, where corporations and governments have control and users cannot independently verify information about how applications are developed and managed.
• Permissionless: Users can enter any Web3 app without authorization from a company or government agency. They sign in with the digital crypto wallets that hold their private keys, the passwords they use to access digital currencies. Wallets can be hardware similar to USB drives or mobile apps like MetaMask and TrustWallet.
• Distributed: Power and control over internet products and services are not concentrated in the hands of investors or CEOs, but spread equitably among users, who earn ownership stakes based on their contributions to the development and maintenance of Web3 platforms.
• Open: Web3 runs on blockchain, which stores data in individual groups, known as blocks. Once a block is filled with information, it’s linked to the previous one, forming a chain in chronological order. Blockchain is an open ledger most commonly used to record financial transactions.

Many Web3 apps are built by small teams largely comprised of and led by developers. Some teams are independent; others are employed by companies, including NFT (nonfungible token) marketplaces and crypto exchanges. Often, it is developers who hire designers to work on Web3 products. In many cases, designers with prior Web3 experience are preferred because of the steep learning curve in this rapidly changing space.

Web3 Use Cases and Barriers to Expansion

Web3 is dominated by financial applications: cryptocurrency, crypto exchanges for trading (decentralized exchanges, or DEXs), and NFTs, which are used to signify ownership of unique digital or physical items. Additionally, decentralized finance, or DeFi, allows users to bypass banks and access peer-to-peer financial services, such as borrowing, lending, earning interest, and trading assets.

Expanding Web3 to other sectors has proved difficult. For instance, there’s no way to tell a legitimate Web3 site from a fraud—a problem that is magnified because users must enter their crypto wallet credentials to gain access to Web3 platforms. If a Web3 site is a scam, any user who enters could potentially lose all of their money.

Another issue is that blockchain doesn’t allow image or video uploading. Users can store media on crypto networks like Ethereum, but it’s expensive.

In Web3 video games, NFTs can represent players’ avatars and purchased items—but it’s often impossible to transfer these assets to other games or apps, diminishing players’ investments and deterring them from Web3 gaming.

What Designers Must Know

Leveraging the following UI patterns and UX design principles can further the growth of Web3 platforms:

Deliver Clear Prompts and Complete Information

Many Web3 apps mistakenly assume considerable experience on the part of users. Instead, designers should clarify the implications of Web3’s unfamiliar features and actions. For example, before depositing crypto funds into a liquidity pool, new investors need to know that their money might lose value—a warning that could be delivered with a pop-up message on the deposit screen.

The activities on DeFi apps are governed by standards known as protocols. Most DeFi apps perform regular security audits and document key findings, including vulnerabilities and code issues and fixes. Designers can ensure that DeFi apps notify users when new audit reports are available, and they can help make audits easier to understand by summarizing complex sections in clear text.

Likewise, many people read Web3 product documentation to understand the mechanics of protocols and make informed decisions about using an application. Much of this material is composed of technical jargon that’s difficult to understand.

Here again, designers can ensure user-friendly content by providing conversational summaries at the beginning of documentation sections, along with links to more technical content. Pop-up glossaries can be embedded as link icons in the text, enabling users to learn the meanings of terms with a mouse click or finger tap. And copy can be broken up with images that illustrate important Web3 concepts.

Use Familiar Currencies to Communicate Exchange Rates

As cryptocurrencies such as bitcoin become more popular and their prices fluctuate, it can be hard to track how much they are worth. In digital wallets and e-commerce apps where these tokens are bought, sold, and traded for assets such as NFTs, designers should show users the price conversions from crypto to their native currency and avoid using more than a few decimal places.

Make Wallet and Transaction Hashes Easily Readable

By default, each address on blockchain is a long string of characters—up to 42—known as an ID or hash. When sending funds, people have to check the entire string. It’s easy to make an error, and the stakes are high: All blockchain transactions are final. If assets are sent to the wrong wallet address, there’s no way to recover them. At an investment company where I worked, we brokered ICO (initial coin offering) deals, sending huge transfers to participating businesses—and we had six people checking the recipient wallet address every time.

The Ethereum Name Service (ENS) enables people to change their hashes into something easier to read and remember, such as their names plus .eth. However, not everyone uses ENS because it’s costly.

Web3 UX designers can make transactions less stressful by showing just the first and last four characters of the hash to let users verify it without checking the whole string. Designers can also build in a requirement for users to double-check hashes before any transaction, and they can include an identifying logo next to each recipient address. These extra layers of verification should be accompanied by a reminder that sending assets to the wrong address will result in a complete loss of funds.

Clarify Transaction Waiting Times

When transferring funds online through a bank, you immediately receive a status update or confirmation that the transaction went through. This is not so with Web3 DEXs. The minimum processing time for blockchain transactions is about three minutes—but I’ve had to wait as long as two hours. I’ve been using the technology for six years, and I still panic when money leaves my wallet and I don’t receive a timely delivery confirmation.

More DEXs should show transaction status via text or animations, either in the status bar or notifications. If it’s not feasible to show updates in the UI, providing a link to the open-source block explorer—such as Etherscan on Ethereum—is a good alternative.

Implement a “Send Max” Button

Bitcoin, ether, and other cryptocurrencies are often expressed in many decimal places, for example 0.0000085191. It’s hard to type the total amount accurately and efficiently when sending money to an individual or business to purchase an asset, such as an NFT, or when depositing funds into a smart contract. I recommend that designers create a “Send Max” button in applications, allowing users to transfer their entire wallet balance to another address with one click.

This is convenient when the balance of a person’s wallet is equal to or slightly higher than the sum they need to transfer; some users have multiple wallets, which increases the likelihood of these occurrences. They can send the full balance, and the function automatically converts it to bitcoin or ether. This feature does not do any accounting when the wallet balance is greater than the total due, so designers should include a confirmation dialog to ensure users aren’t mistakenly sending more than they intend.

Explain How Gas Prices Work

Gas is probably the most annoying and confusing thing in Web3, especially for someone new to crypto. Gas prices are extra charges users pay to cover the cost of the computing power required to process transactions. Users can opt to pay higher fees to speed up transfers.

Designers need to explain what gas is and how it works. If possible, they should show the gas price in the native fiat currency that is most common among users (usually USD). Designers could also suggest a viable combination of gas price and resulting transfer speed; if transactions stall or fail due to low gas payments, designers should allow users to pay higher fees to accelerate transfers.

Make Users’ Transaction Histories Easily Accessible

Virtually all centralized e-commerce websites (web 2.0) permit users to check their comprehensive purchase histories. It’s difficult to access such a record on a decentralized exchange: Wallets provide a transaction history, but only for one account at a time, and it’s hard or impossible to filter by DApps. To get the kind of history available on a centralized platform, Web3 users must go to a block explorer like Etherscan, which is not user-friendly and makes it difficult to find a specific transaction.

Web3 designers should give people a simple way to review the on-chain transactions they make within individual DApps. This should be placed in a location that’s easy to find, like a side panel or menu. Another option would be to create a “chain-view” mode activated by a button: Once clicked, it would place a filter over the entire UI, indicating all of the content within the DApp that is stored on the blockchain—including the transaction history. It would also be helpful to allow users to easily filter and export their transaction records.

Enable Easy, Private Key Management

The private keys that enable users to access their digital wallets aren’t easy to store. People sometimes forget to back them up or don’t know how to do so. These keys cannot be recovered once lost: There is no “reset password” option. Designers can solve this problem by following the example of MetaMask and providing each user with a seed phrase, a series of words that can be used to unlock their wallet.

Designers also need to warn users that their funds will be inaccessible and vulnerable to theft if they lose their private keys or seed phrases. Such a message should pop up in a user’s wallet app, first as a notification when setting up the wallet and then as a recurring reminder on a preset schedule.

Key Takeaways

For Web3 to grow in popularity and expand beyond digital wallets and financial platforms, designers need to make Web3 apps more consistent and intuitive. They also have to provide more straightforward user education to help familiarize newcomers with novel features and interactions found on Web3 platforms.

Making DApps feel secure has to be a high priority too. It’s impossible to control the trustless, permissionless nature of Web3, but designers can predict what may go wrong and help prevent those occurrences. More transparent caveats about risks will go a long way to assuage people’s concerns and convince them to embrace Web3.