Originally posted on Medium (January 13th 2022)

tl;dr — A quick prototype looking at how information from Etherscan could be integrated into a website user interface. The idea is to let a user know the status of a web3 transaction along with other relevant information without having to the leave the page they are on.

Prototype link — https://5m5gbm.axshare.com/

The process of conducting a transaction using a web3 service, for example purchasing an NFT or swapping tokens using DeFi, can often be a frustrating or anxious process. Concerns such as being on the right network, having enough to cover the gas fee or sitting tight whilst the transaction writes to the blockchain are all factors that potentially contribute to a negative user experience.

Even advanced users or those familiar with blockchain interactions may often second guess what they are doing, and despite repetitive use still remain uneasy about certain actions, particularly if they are permanent and have an associated cost.

Interactions between the user and the blockchain — such as viewing the status of a transaction or the various actions that can be carried out such as minting, staking or swapping — are hidden away and are not utilised to keep users informed of what is happening. Yes, you can view transaction details through Etherscan, but this is an extra step that not every user will be aware of.

With this mind, how would these issues impact the onboarding and mass adoption of blockchain projects in regards to non-technical users? How could we improve the user experience of current web3 users? Much of what is happening behind the scenes remains invisible to the user, ultimately leaving them in dark to the nuances of web3.

To help simplify these issues, a few user stories have been generated which the prototype is aiming to accommodate. These are:

1. As a user of blockchain services, I would like to see the status of my transaction in-browser, so I can be kept up to date whether or not it has been successful without going to a third party website.

2. As a user of blockchain services, I would like to see the cost of the full transaction in-browser, so that I do not need to open an external wallet to know how much I have spent and how much I have left after my transaction.

3. As a non-technical user, I would like to see where I am sending my transaction to in a human readable form, because I do not understand address contracts or find them useful.

Prototype link — https://5m5gbm.axshare.com/

The goal of this prototype is to explore options of how we can make users aware of what is going on behind the scenes when interacting with a web3 service. More specifically, giving them more information on-screen regarding their transaction on the site where they have carried out the transaction, as opposed to an external resource. For this example, a basic NFT marketplace has been created for demonstration.

Information would be brought from Etherscan and placed on the user interface using a banner situated under the website header. The status of the transaction is the primary purpose of the banner, changing colour to reflect the condition of that particular transaction — from processing to success or failure.

As well as its status, the ‘to’ and ‘from’ addresses allow a user to see where they are sending a transaction. This has been displayed a human readable format with a tooltip that would provide the full address if required.

On both screens, the cost associated with the transaction will be displayed with a split of cost / gas fee occurring when an action is processing, and a total cost showing once the transaction has been completed.

Showing the past and current state of the wallet itself is another idea which can be incorporated into this design, allowing a user to see their new balance after the transaction without having to open an external wallet.

As there are many types of actions that can be undertaken within web3, this prototype includes an ‘action’ section referencing what exactly a user has carried out — in this case the user has minted an NFT.

By clearly defining what action has been taken, we can hopefully increase the knowledge a user has around web3 processes whilst pushing educational aspects of how the blockchain works and its capabilities.

A final component of the successful transaction screen is the block number in which the transaction is a part of, along with the time it took to complete. Like with other services, a link to Etherscan itself should always be present if a user wishes to use it.

This prototype is a quick exploration of how we could improve the user experience for those currently using web3 services and those who use it in the future. As a first iteration, it seeks to find answers to some common problems that crop up in regards to web3 UX, and is by no means exhaustive.

Overall the web3 space has been so focussed on the technology driving it that user-centred design practices have fallen by the wayside, contributing to bad experiences for end users which will result in slowing mass adoption of blockchain products.

Whilst it is the technology which drives web3, it is down to those building the decentralised services of the future to compliment the technology with a robust and considerate practice of making the usage of these services as simple and informative as possible for end users. In the end, everybody wins.

Follow me on Twitter

Originally posted on Medium (January 13th 2022)

tl;dr — A quick prototype looking at how information from Etherscan could be integrated into a website user interface. The idea is to let a user know the status of a web3 transaction along with other relevant information without having to the leave the page they are on.

Prototype link — https://5m5gbm.axshare.com/

The process of conducting a transaction using a web3 service, for example purchasing an NFT or swapping tokens using DeFi, can often be a frustrating or anxious process. Concerns such as being on the right network, having enough to cover the gas fee or sitting tight whilst the transaction writes to the blockchain are all factors that potentially contribute to a negative user experience.

Even advanced users or those familiar with blockchain interactions may often second guess what they are doing, and despite repetitive use still remain uneasy about certain actions, particularly if they are permanent and have an associated cost.

Interactions between the user and the blockchain — such as viewing the status of a transaction or the various actions that can be carried out such as minting, staking or swapping — are hidden away and are not utilised to keep users informed of what is happening. Yes, you can view transaction details through Etherscan, but this is an extra step that not every user will be aware of.

With this mind, how would these issues impact the onboarding and mass adoption of blockchain projects in regards to non-technical users? How could we improve the user experience of current web3 users? Much of what is happening behind the scenes remains invisible to the user, ultimately leaving them in dark to the nuances of web3.

To help simplify these issues, a few user stories have been generated which the prototype is aiming to accommodate. These are:

1. As a user of blockchain services, I would like to see the status of my transaction in-browser, so I can be kept up to date whether or not it has been successful without going to a third party website.

2. As a user of blockchain services, I would like to see the cost of the full transaction in-browser, so that I do not need to open an external wallet to know how much I have spent and how much I have left after my transaction.

3. As a non-technical user, I would like to see where I am sending my transaction to in a human readable form, because I do not understand address contracts or find them useful.

Prototype link — https://5m5gbm.axshare.com/

The goal of this prototype is to explore options of how we can make users aware of what is going on behind the scenes when interacting with a web3 service. More specifically, giving them more information on-screen regarding their transaction on the site where they have carried out the transaction, as opposed to an external resource. For this example, a basic NFT marketplace has been created for demonstration.

Information would be brought from Etherscan and placed on the user interface using a banner situated under the website header. The status of the transaction is the primary purpose of the banner, changing colour to reflect the condition of that particular transaction — from processing to success or failure.

As well as its status, the ‘to’ and ‘from’ addresses allow a user to see where they are sending a transaction. This has been displayed a human readable format with a tooltip that would provide the full address if required.

On both screens, the cost associated with the transaction will be displayed with a split of cost / gas fee occurring when an action is processing, and a total cost showing once the transaction has been completed.

Showing the past and current state of the wallet itself is another idea which can be incorporated into this design, allowing a user to see their new balance after the transaction without having to open an external wallet.

As there are many types of actions that can be undertaken within web3, this prototype includes an ‘action’ section referencing what exactly a user has carried out — in this case the user has minted an NFT.

By clearly defining what action has been taken, we can hopefully increase the knowledge a user has around web3 processes whilst pushing educational aspects of how the blockchain works and its capabilities.

A final component of the successful transaction screen is the block number in which the transaction is a part of, along with the time it took to complete. Like with other services, a link to Etherscan itself should always be present if a user wishes to use it.

This prototype is a quick exploration of how we could improve the user experience for those currently using web3 services and those who use it in the future. As a first iteration, it seeks to find answers to some common problems that crop up in regards to web3 UX, and is by no means exhaustive.

Overall the web3 space has been so focussed on the technology driving it that user-centred design practices have fallen by the wayside, contributing to bad experiences for end users which will result in slowing mass adoption of blockchain products.

Whilst it is the technology which drives web3, it is down to those building the decentralised services of the future to compliment the technology with a robust and considerate practice of making the usage of these services as simple and informative as possible for end users. In the end, everybody wins.

Follow me on Twitter