Web3 Design Principles

What is Web3

Everyone seems to be talking about Web3, how it will transform the current apps we use, manage our data, and handle our accounts, how Web3 Design looks and is created and what makes it different from Web2?

To begin with, Web3 is all about the decentralization of the Internet. For easier understanding, the following features would be the best way, to sum up, the new Web3.0 era:

Decentralized websites and apps
Complete transparency
New (and improvised) Security
Driven by Crypto

What does Web3 Design mean?

In terms of the acceptance and use of web3, design is an important element. Since the majority of the users interacting with the terms of Web3 are exposed to DApps. To help them overcome the complexities of new technology, design is used as a primer in between.

Depending on the Web3 applications type, design rules will differ slightly depending on the type of dApp from standard web 2.0 apps to Web3.0 apps and all it contains (Gaming, NFTs and DEXes, etc.). However, there are some general design concepts that a designer should be educated about.

The three main pillars of Web3 UX

Pillar 1: Educating on technology

Help the user understand any step he is going to work on and make it simpler for them to navigate the function by adding minor user interactions, tooltips, straightforward animations, pop-ups, or familiar, clearer terminology.

Web3’s status makes one thing quite clear: individuals won’t typically have the mental models and ways of thinking that it will require (yet).

It is the responsibility of designers to assist users in navigating the blockchain learning curve as they become more aware of the technology and its potential.

There are certain resources that can help anyone learn about the jargon, processes, mindset shift, etc.

The need of defining the terminologies will be not much necessary once when blockchain becomes more common. However, businesses are correctly focusing their efforts in this area for the time being.

Specifically, the designer’s goal of assisting the common person is comprehending blockchain.

Example: Binance Academy has listed all the crypto jargon as a glossary with one-liner definitions.

Pillar 2: Transparency

Users should have access to all relevant transactional information, especially for De-Fi apps that support a large number of transactions. As for design, this comprises:

Displaying the transaction’s breakdown. Allowing consumers to view all charges connected with the transaction. There should be an option to view the additional details if there are any.

To guide users in understanding the transaction by explanation. Keeping the general good design principles aside, it helps users in learning more about the technology, especially when accompanied by explanations.

Displaying confirmed and pending transactions. Initiating transactions using dApps, connecting a wallet, and ensuring that the state of a successfully completed transaction is reflected in the dApp itself. Users should be informed about any transaction delays and their expectations should be constantly managed through feedback.

Displaying the price in FIAT money. Help consumers comprehend the worth of components in the transfer by displaying USD because “regular” money is still thought of in terms of fiat currencies like the US dollar (or whatever currency).

Pillar 3: Familiarity

As Jacob’s law of UX design states,

“The majority of user time is spent on other websites. This indicates that visitors desire your website to operate similarly to every other website they are already familiar with.”

Specifically, a Web3 application should be similar to a Web2 one in terms of user experience. Following this, you make it easier for people who are still learning about topics like cryptocurrency wallets, blockchain technology, etc. to utilize them.

Example:

The user should not find the connection of the crypto wallet procedure any different than using his/her conventional online banking procedures. Whatever they are transacting should be as easy and as similar to their daily banking experiences.

Secondly, minting their audio NFTs should be as smooth and familiar as their normal Spotify uploads, or YouTube video uploading process so that they do not find it an additional complexity as cost of ownership.

Web3 UX principles

When creating web3 user experiences and interfaces, designers should consider the best practices in the Web3 Design Principles collection.

Active Guidance

Definition:

Users must have easy access to steady navigation that makes it clear how to return to a previous state and what to do next.

Principles:

Consider user needs

Consider where your personas are most likely to turn for assistance while anticipating the need for additional assistance and working to reduce it.

Possession of visibility

One must take into account various perspectives of an interface because visibility management is crucial for business.

Streamlined User Interface

Avoid adding components that will clutter an interface or mislead users. Every component has a function.

Patterns of Existing Designs

Utilize standard design patterns to minimize user learning requirements.

Examples:

Dodo is a decentralized exchange. On the exchange right now, there are 8 coins and 14 trading pairs.
When the users visit the website. Dodo provides a visible and simple use case for anyone willing to liquidate.

It reflects the text in real-time currency exchange value right opposite to it. The play cards can be navigated back and forth to find all the currency values in real time that the platform supports.

Moving along the sentences highlights the words and explains to the user about the platform’s service definition of it.

B. DTube is a decentralized (Web3-based) video streaming platform. At first glance, a user will find it similar to any other web2 video streaming service. Like YouTube, Vimeo, Dailymotion, etc.

The approach behind DTube is the design consistency of what the viewers’ UX is trusted to till now.

Consistency

Definition:

The establishment of uniformity across products and the customer’s experience is important for building trust.

Principles:

Typographic Uniformity

Use the same “Blockchain color” consistently throughout your project and be consistent with your font selections.

Use color to convey meaning

Keep your color choices and associations uniform and similar by maintaining consistency.

Grid-Based Design

Grid-based designs with proportional and meaningful negative space should be kept in the design.

Globalization: Design Across All Boundaries

Wherever our users are, we design for them.

Examples:

Rarible, a popular NFT marketplace, states a good expression of consistency in the design such as the ground alignment, typography choices, and spacing. The strong-grid layout throughout the web page is quite impactful.

Community

Definition:

The services of Decentralized Applications may be only used by individuals but the basis of development of any application is planned for and also used frequently by, a sizable group of people worldwide. Community formation of a single type of user is beneficial for making the user experience better with uniform holistic feedback.

Principles:

Community

Indicate the number of community members worldwide independent of any region.

Who are the Community, exactly?

Categorizing the community with the law of proximity.

Subgroups and Responsibilities

Describe the community’s composition in detail (that is sub-groups and their power over the project)

Mission Statement

Describe the project’s larger purpose (if any) and how their participation helps it to be fulfilled.

Examples:

Parsiq Network gives quick access to web3 data, enabling particular features in your applications. The platform has been designed specifically for developers who want to build event-driven apps with a focus on trending reactions to events. It has a supportive community system integrated into the site.

Data Transparency: Provenance

Definition:

A user must be able to determine whether a certain piece of information or piece of data is actually saved in the Blockchain, maybe just by looking at the page.

Principles:

Data Reliability

Make it clear which information originates from the Blockchain and which does not.

Data Address

Make the contract’s address clear (s)

Links to Blockchain

Connect all Blockchain information to unbiased Blockchain explorers.

Oracles

State what data is derived from oracles

Examples:

When Data Provenance option is turned on. It highlights the blockchain data in Green color for better visibility. The value is also made prominent.

Data Transparency: Transactions

Definition:

Allowing users to make assumptions and assume that “all” data visible is saved in the Blockchain is not user-friendly. The design should communicate enough at just a glance.

Principles:

Permanence

Clarify actions that are irreversible.

Value

Clarify actions that involve money or value.

Privacy

Clarify actions that could potentially lead to user identification.

Factory

Clarify actions that generate new contracts in users.

Examples:

In the SuperRare NFT market when placing a bid, this screen is captured. The message informs you of the value and permanency of your activities.

Don’t Forget the Newbies

Definition:

If we want Distributed Applications to be widely used, we must remove the entrance barriers for those who lack technical expertise or familiarity with the Blockchain and its jargon. The user would also benefit from being aware of the key distinctions between Decentralized applications and other applications.

Principles:

Don’t Lose Context

Apps should try to minimize the use of new words and concepts, especially on the pages for the generic public (ie. homepage), and progressively show more learnings on pages for engaged users (ie. User dashboards).

Terminology

Make every effort to use jargon-less, consistent terminology. Language should be concise, clear, and align with our users’ natural communication patterns.

Learning Process

Provide 2 or more levels of educational content: Blockchain Basics and Decentralized Application-specific terminology.

Friction & Confirmation

Try to weave in the snippets within the interface, with temporary pop-ups that can be easily dismissed that then could open more detailed information in another tab.

Examples:

OpenSea has a learning service available for newbies entering the NFT market. Gives a complete service to the user from learning from scratch, building NFTs, selling, and purchasing.

Feedback

Definition:

Through the design of constant feedback, we assist our users in understanding what is happening and lower anxiety.

Principles:

Motion Animation

When used sparingly, motion and animation support the understanding of what ia happening.

What is Going On?

The user should always know what is happening, what just happened, and what will happen next as time is a significant element in Blockchain.

Examples:

Upon connecting the wallet or refreshing funds OpenSea provides prompt feedback to let the user inform about his confirmation of activities.

Trust

Definition:

Maintaining the trust of our users, many of whom work in fields involving highly sensitive data, is essential to the success of our company. The blockchain is “new” to almost everyone, with varying degrees of knowledge and assurance. Users must believe that our goods (and the people who created them) are stable, dependable, and trustworthy.

Principles:

Reliable
Stable
Secure
Transparent

Final word

Dapps are fundamentally distinct from regular web or mobile apps because they are built on the powerful Blockchain-enabled principles of decentralization, transparency, trustlessness, immutability, not hidden etc. and should strongly convey these values.

These Design Principles translate the characteristics of the Blockchain into useful tools by reflecting them in the front-end of Dapps for a promising and smooth User Experience.

Check out The Best Web3 UX Process in the world of Web 3.0.