OriginProtocol / origin

Monorepo for our developer tools and decentralized marketplace application
https://www.originprotocol.com/developers
MIT License
652 stars 196 forks source link

Optimistic UI #85

Open wanderingstan opened 6 years ago

wanderingstan commented 6 years ago

Sid from Toshi giave good talk at ETH Denver, and pointed out common UX mistake in Dapps of freezing UI while waiting for blockchain transactions. We're guilty of that.

I propose that, after a transaction is confirmed by the wallet (el.g. metamask), we put a status area at top of page showing progress of transaction. The user would then be free to navigate around the rest of the site.

wanderingstan commented 6 years ago

@micahalcorn - In your designs around Identity, has this issue been addressed already?

Short version: It can take up to a few minutes (in worst case) for transactions to be approved, so we should let people continue using the site while we wait.

E.g. tdameritrade.com has a cool thing where they just add a sticky footer to the page with progress of your trade until it gets made.

micahalcorn commented 6 years ago

I don't believe that this has shown up in the designs yet. If there is going to be a similar delay on the profile publication (not just listing purchases), then Matt and Aure should probably be reminded. I'll keep it in mind.

wanderingstan commented 6 years ago

@matthewliu - Looping you on this.

matthewliu commented 6 years ago

I’m on it.

On Sat, Apr 14, 2018 at 5:46 PM Stan James notifications@github.com wrote:

Assigned #85 https://github.com/OriginProtocol/demo-dapp/issues/85 to @matthewliu https://github.com/matthewliu.

— You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub https://github.com/OriginProtocol/demo-dapp/issues/85#event-1574756333, or mute the thread https://github.com/notifications/unsubscribe-auth/AEuxN565dh4mZbC_ZVBYrJnBkKdd1hfEks5tophRgaJpZM4SJdY8 .

-- Cofounder of Origin http://www.originprotocol.com

Join our Telegram http://t.me/originprotocol.com

micahalcorn commented 6 years ago

After talking with Stan today, I've come to a few conclusions on this. Though we don't want to block the UI for up to several minutes while waiting for some number of blockchain confirmations, we also can't expect the user to do much else while waiting for their transaction to officially be complete or the results to appear in the UI. Upon receiving a transaction receipt, we should immediately free up the UI and, in an ideal world, render the expected results of their transaction - á la latency compensation - but with visually distinct UI, such as less-opaque elements or something. We can also provide a more informative message indicating that "it takes a while" and/or automatically open the transaction confirmations dropdown. As for the degree to which we require understanding of the nature of blockchain, the end user should not have to understand why it takes several minutes, but the DApp developer should be familiar with blockchain confirmations. She can choose to supply a confirmation callback function or use a whenFinished promise that we may [re]provide in the future as a less-informative convenience.