market
market copied to clipboard
oceanprotocol
Better price loading UX
We have this weird UX where buy button appears disabled, then gets replaced with spinner, then gets back in disabled state, then becomes active. The loading state should be only used for the actual order flow, not for data fetching.
If we fetch the price then logically the price should get a loading state, albeit a spinner is not the best solution here, maybe dimmed price which flickers until final price is retrieved gives better impression for users to what exactly is loading. And during this price loading time, the buy button stays disabled.
Another UX problem is the difference between spot & consume price which becomes obvious to users when browsing between asset teaser and asset details. From user perspective would be better to always show the final consume price, but that's tricky technically. To combat that we should display tooltip and list fees on all prices in asset details view.
Another UX problem is the difference between spot & consume price which becomes obvious to users when browsing between asset teaser and asset details. From user perspective would be better to always show the final consume price, but that's tricky technically. To combat that we should display tooltip and list fees on all prices in asset details view.
We discussed this in the past. It is not really accurate. On the teasers it's ok to show the spot price because that's a more relevant information for both the person that wants to buy the asset and the person that wants to add liquidity or do pool related stuff. The buy price is not just the spot price + fees, it's the price to buy 1 dt (not necessarily equal to spot price) + fees.
There is already a fee related issue https://github.com/oceanprotocol/market/issues/1082 .
Agree we need to rethink the button interactions. Maybe always show the button and under it or somewhere else show what is happening (spinner + message)
This also comes under the topic of better price loading UX... For a brief moment before the prices have loaded the assets show "No price set" and then it's replaced by the actual price. I think a better placeholder would be for it to say "Loading price" or even nothing. There shouldn't be any assets without prices in the V4 market
Same thing also happens on the asset detail page. Showing "No price set" when it's actually just loading
Another improvement would be to have just a single loading icon and message. Here we have two messages saying "Retrieving price" and "Refreshing price":
We discussed this in the past. It is not really accurate.
yup, I know, technically not correct. Arguing here purely from a user perspective where it's confusing throw browsing getting 2 prices presented. I'm tending towards figuring out some price UI in asset details to make those 2 different prices more obvious, defaulting to some sum list like suggested in #1082 but not put it behind the tooltip. Would need to be explored more visually.
Another improvement would be to have just a single loading icon and message.
too much layout jumping, which is why spinner is always an easy, but provides the worst UX to communicate a loading state. Also not always we have to communicate a loading state and can simply update numbers on screen, but because of asset teaser & asset details price mismatch we need to have something for the price. I suggested this in issue description:
a spinner is not the best solution here, maybe dimmed price which flickers until final price is retrieved gives better impression for users to what exactly is loading. And during this price loading time, the buy button stays disabled.
For a brief moment before the prices have loaded the assets show "No price set" and then it's replaced by the actual price.
A simple solution for the distracting "No price set" message that shows up for every asset is just to remove it. I don't really think it's necessary given the new publish flow. If anything, it would make sense to not even show assets on the market that don't have a price. PR for removing the "No price set" message: https://github.com/oceanprotocol/market/pull/1382
agree that showing nothing at all in place of "No price set" is a simple quick fix. Unfortunately, #1386 is trying to do way more so this won't be that simple quick fix.
But as suggested over there in https://github.com/oceanprotocol/market/pull/1386#issuecomment-1128758940, it's worth taking a step back and really come up with a consistent and non-layout-jumping way of loading those prices visually first. So create mockups e.g. in Figma with those states:
- AssetTeaser without price loaded
- AssetDetail without price loaded
- AssetDetail with spot price loaded
- AssetDetail with final consume price loaded
This should then be the basis for refactoring of the relevant components towards how we want them to be used, instead of adding more and more spinners as quick fixes
We need to make sure to handle all failing calls in order to avoid issues like this. For example:
This asset has a NOT working custom provider, this case (like other cases) is not being handled so we end up with the loading spinner.
We opened this to improve the loading experience, especially for the dynamic pricing schema. Now that AMM pools have been removed, we can close it.
