Direct attention away from pending transactions

Because human attention span is shorter than the blockchain’s update time

The user’s attention is a precious resource. Embrace long confirmation times as inevitable.

It’s important to keep the user informed about the system’s status, but that doesn’t mean pending transactions should steal the show. Never block the UI while waiting for the blockchain. Instead, consider these options to allow the user to keep interacting with your dapp.

Status bar

Use a status bar if:

• The dapp is content-focused and highly engaging
• The transaction will just store data
• The transaction will likely succeed
• Transaction completion likely won’t result in different user actions

Peepeth’s purple status bar is pictured below:

As users get used to storing data on blockchains, this status bar will evolve to draw less attention, and eventually become integrated in the browser or web3 provider. It could become as familiar as Chrome’s discreet bottom-left corner:

New element in background

Open a new element in the background if:

• The transaction blocks the user from other tasks until it completes
• The transaction is a transfer of value that will get used in other dapps

This new element can take the form of a browser tab on desktop or a badge icon on mobile. When the user navigates to it, you should display an up-to-date representation of the transaction status. Here’s an example of a new browser tab opened by ShapeShift.

Most users won’t care about or follow links to block explorers. Your application should communicate the status of the blockchain in the context of the application, in a way that makes sense for the user.

Notifications

Just like the previous pattern, consider requesting notification permissions if:

• The transaction blocks the user from other tasks until it completes
• The transaction is a transfer of value that will get used in other dapps

Be sure to explain that you’ll only use notifications to alert of transaction completion, saving the user time. Use the “new element in background” pattern as a fallback if the user denies the permissions.