Web 3.0 is redefining how people on the internet communicate and share information. However while blockchain developers are busy building the infrastructure of Web 3.0, the user experience of most apps still looks underdeveloped and as if it was created during the early days of the web.
Most people do not even know about apps on Web 3.0 and are unaware of the blockchain technology that powers them. The few that do, find them difficult and complex to use. Understanding the language, dynamics and visual design of Web 3.0 and communicating a difference from Web 2.0 presents a unique challenge for both developers and designers.
Creating good user experience design has become a core part of successful companies for a reason and the role of designers in creating immersive experiences that keep an audience hooked to your products needs to be a part of the strategy for any organisation.
One thing to note is that Web 3 design is different from blockchain as well as the metaverse. While Blockchain allowed us to create open, permission-less, decentralized solutions, Web 3 is the next phase in the evolution of the web that combinations of multiple technologies including blockchain to create a web that is open, trustless, and safe.
Why should designers care?
Web 3.0 application will have a massive impact on the internet. But to bring the vision of Web 3.0 to mass adoption, solutions will need to be user friendly. And this is where designers can make a difference. They will need to work alongside developers and engineering teams to ensure that these structures are accessible and user friendly.
UX Fundamental Principles for Web 3.0
1. Design for trust by emphasising transparency
Blockchain is still a fairly new technology that has not reached adoption by everyone. Some people still see blockchain as a passing trend that will fade away, and many still don’t quite understand the decentralised power of blockchain. Therefore designers will need to build trust in the following ways:
- Clarify contact address(es)
- Clarify the blockchain in use (data source), plug-in external blockchain explorers.
- Clarify irreversible actions.
- Clarify actions that involve money or value.
- Clarify actions that could potentially expose user identity.
- Show transaction data in a human-readable format in line with smart contract requirements.
- Clarify gas fee price range and how to adjust spillage.
- Manage transaction wait time, provide waiting duration.
- Clarify blockchain network in use and how to change it.
- Clarify transaction details; gas fee, time stamps, address, blockchain, etc.
- Clarify which data is from oracles and which is not.
- Provide transaction history with an address. Allow users to search, delete, export or share.
- Clarify irreversible actions, add friction to slow users down.
- Clarify when actions cost money or value
2. Time/Wait Management
Because of the decentralised nature of blockchain, using consensus mechanism makes them slower than centralised systems. Sometimes during network congestion, transactions can take longer to process. It’s important to clarify these data points and manage users’ wait time. To manage time:
- Clarify the relationship between gas fees and waiting time.
- Show progress or waiting icon until the transaction is approved or denied.
- Provide feedback on potential causes and/or solutions when a transaction takes more running time to process.
3. Consistency is Key!
Creating trust is at the heart of Web 3.0. Consistency in the user experience reinforces trust and differentiates your platform or product from others. To create consistency, there will need to be consistent visual design language throughout the product, leverage design and UI elements purposefully to clarify concepts and use less technical jargon. The informations needs to be presented in a way that aligns with the users natural patterns. Lastly keep your tone conversational so that the users feel like you are speaking directly to them.
4. Constant Feedback
Users need constant feedback at every juncture so that they know what is happening every time an action is taken. The feedback needs to be short, simple and meaningful.
Provide users with the following:
- Provide context-based feedback: The user should always know what is happening, what just happened, and what will happen next.
- Clarify steps left in the process
- Use motion and animation sparingly
- Use interactive onboarding to show users possible actions
- Use tooltips when necessary to provide more detail on a particular action.
- Use wavelike load bar during wait time to induce perceptive speed.
Future of the Web
Like Sundar Pichai said: “The next big step will be for the very concept of the “device” to fade away. Over time, the computer itself — whatever its form factor — will be an intelligent assistant helping you through your day. We will move from mobile first to an AI first world.”
Many things happening in the world of software and the internet that are happening today, including Web 3.0 technologies and the blockchain technology, will all connect to create a decentralized internet that is open, trust-less, permission-less. Decentralization facilitates the composability of code and ideas, this will allow innovations to happen faster. With open-source code, developers can focus on new problems.
Thus designers need to keep track of UX principles to be able to create a smooth and seamless user experience in Web 3.0.