[4][ahdigital][7]Market Picker

[wmbutler]

@ahdigital we have an opportunity to create a market picker that's more direct than the existing method. I find that the most intuitive place for me to go is to the upper left corner on the exchange.

Seems to me it would make sense for this to allow for a menu for users to search for an alternate asset without leaving the exchange. Ideally I'd like to see the search broken down by:

• gateway (issuer)
• asset
• If the user knows the name of the asset, say OPEN.STEEM, they should also be able to key it in literally rather than going though the assets and exchanges. I do not think the direct typing area needs to be a typeahead, but is should be able to provide feedback of whether that asset exists or not.

In this way, the user could search for the asset by the symbol name and then be given options for the different issuers, or they could search by issuer and be shown the various assets available from that issuer.

Once selected, the menu would go away and the relevant market would be loaded in the exchange.

This is not a great UX for the element, but I think it illustrates the point I'm trying to make:

[startailcoon]

Love this proposal, will make it much easier to switch markets.

[grctest]

How would this work for smartcoins? They have a static issuer and there generally aren't duplicate smartcoins (unlike UIA), however perhaps in the future we may see bitCNY and a competitor CNY smartcoin without fees perhaps?

[wmbutler]

The issuer is still the issuer. I don't see anything that would prevent this working with all coins.

[ahdigital]

Happy to be added to this.

[ahdigital]

Proposal

I'd propose making the text 'Trading pair' a link that on click opens a modal where the user can replace either asset using the new market picker. E.g.

The market picker would firstly allow the user to select which asset from the pair they want to replace. Then, using the find by asset, or find by issuer select menus the user will filter a set of assets that they can then choose to 'Use' one of.

Find by asset

This would allow the user to see which issuers support an asset. For example, selecting 'BTC' would return results like open.BTC and bridge.BTC.

Find by issuer

This would allow the user to browse an issuer for all available assets. For example, selecting 'BIT' would return results like bitUSD and bitEUR.

Search all assets

Within the results section I included a typeahead for users who know the asset name they want. It would search all assets/issuers and as the user typed update the results in the results box.

What does it look like?

I made a functional (mostly) prototype to explore the flows and see how the logic sits.

And here is a mock up of the modal over the exchange styled per ANT guidelines:

Further thoughts

With all of this in mind, what about the existing 'Find markets' section on the right hand side of the exchange:

1. Should it be removed?
2. Could it be re-purposed?
3. Other suggestions on a postcard

[startailcoon]

I like this for finding markets out of starred items. I'm willing to work on it as well.

My suggestion to the right table would be to make it use the new starred markets list, like what we have on the first entry page. Just an example. It should be possible to quickly change market with just one click.

[abitmore]

This issue is about removing or to replace the market list on the right? If yes, go ahead. If not, why do we need duplicate features?

IMHO it's too complicated. To go to another market, need to click, select, click, input, click, click, all these steps are done in a modal, are you kidding? The UX is even worse than click on the list on the right.

[abitmore]

@wmbutler is this new feature a priority? We already have lots of issues with a 'UX' label but not done and devs are waiting.

[wmbutler]

Thanks for the start @ahdigital

1. Rather than a modal, I was hoping the picker would be a menu-like extension of the existing display. Understand if this is not technically feasible. One benefit of this is that you can use the existing asset identifiers (in their current positions) rather than repeating them in the modal.
2. Since searching by the issuer and asset is more of a beginners mode, why don't we give users a choice here. Some users will want to type open.btc while other user may want to pick btc and then pick from the various issuers. Whichever mode the user picks should be remembered for future use. I think this would address advanced users concerns for wanting to quickly jump to a new market pair. This could be a tabs or a radio button, or whatever control you feel is appropriate.
3. Both assets and issuer need to use the typeahead.

This could be a tab or a radio button. Basic | Advanced

@abitmore this has nothing to do with replacing the market view on the right. This is all about being able to quickly and intuitively search for new markets. It would be my hope that once this is operating according to most users' preferences, we could remove the search tab from the right view since it would be easy to find and star a market this way.

'devs are waiting' Who is waiting? I am unaware of this.

[ahdigital]

Thanks for everyone's valuable feedback. I think I've found a way to satisfy the points raised.

The biggest changes in this revision are the conversion of the modal into a menu, and the introduction of 'search' and 'filter' modes which the user can toggle between.

I'd suggest 'search' and 'filter' terminology instead of 'basic/beginner' and 'advanced' since it's more of a preference than a matter of how experienced-a-trader you are.

@wmbutler

One benefit of this is that you can use the existing asset identifiers (in their current positions)

I understand where you're coming from however the current asset identifiers are already links to their respective market pages. And so to make that action different just for when the menu is open seems counterintuitive. You'll see in the following mock ups that I've compromised by removing the toggle field I originally proposed, and weaved the replace asset functionality into the results panel.

Filter mode

When the user clicks 'Trading pair' the market picker menu will open, showing the last used mode which in this example is filter.

Using the find by asset, or find by issuer select menus the user will filter a set of assets that they can then choose to 'Use' within the asset pair. Both of the select menus in this mode include typeahead functionality.

With no filtering applied the results panels lists all assets. It should be a scrollable container to prevent overflow.

Search mode

When the user clicks 'Trading pair' the market picker menu will open, showing the last used mode which in this example is search.

In this mode there is a single typeahead for users who know the asset name they want. It would search all assets/issuers and as the user typed update the results in the results box. The user can choose to 'Use' their searched asset within the asset pair.

With no filtering applied the results panels lists all assets. It should be a scrollable container to prevent overflow.

Search mode (Example)

Consider this scenario:

1. User opens market picker and see's search mode as that's what he/she used last
2. User types 'open.BTC' which returns 2 results
3. User clicks 'Use' to replace BTC within the asset pair

[wmbutler]

Love this. One other thought...

• What if clicking on one of the actual asset pairs triggers this menu instead of linking to the asset explorer as it does now? Seems that you could simplify the selection menu if the user could designate which symbol they were swapping out.

[ahdigital]

What if clicking on one of the actual asset pairs triggers this menu instead of linking to the asset explorer as it does now?

You could indeed simplify the selection but where do we relocate the links to the asset explorer for the active pair?

[wmbutler]

What we added a control to the menu that lets a user navigate to the asset explorer? So clicking on the asset would bring up the menu but a second click would be required to take the user to the asset detail.

[ahdigital]

Not sure about that approach. You need to be able to toggle between them as well remember.

I'll have a think and post back.

[ahdigital]

In this next revision the user would be able to click on either asset in the pair to open the market switcher menu. I added a line of copy below the 'Market picker' heading which reinforces what the user must do, shows the active asset and has a link to it's explorer page.

In the mockup below the steps are:

1. User clicked 'OCT' to open the market picker menu
2. User clicked 'BTS' to switch the asset they're replacing
3. User clicked search mode icon and searched for open.BTC

In the results panel, the user can click 'Use' to replace the asset which is active in the pair and close the menu.

[wmbutler]

I like this. I think it's useful, flexible for many circumstances, and intuitive. Maybe we need a circle i that would take the user to the asset explorer.

[ahdigital]

Nice idea, updated visual:

[wmbutler]

Easy. This is groomed and ready for development. @startailcoon are you planning to take this?

[startailcoon]

@wmbutler I can take this if we feel happy about it.

[wmbutler]

It's yours.

[startailcoon]

@wmbutler @ahdigital I have a few questions regarding the design

Question

In "filter" mode, you can use "find by issuer", and above you describe this with

Find by issuer
This would allow the user to browse an issuer for all available assets. For example, selecting 'BIT' would return results like bitUSD and bitEUR.

My question is, what do we regard as an issuer?

The following are assets in my understanding

• bitXXX
• open.xxx
• rudex.xxx

The following are issuers in my understanding

• committee-account
• openledger-wallet
• rudex-steem

If we expect a user to select an asset group, like bitXXX or OPEN.xxx, I would rather have this changed a little so the input is changed to a drop down populated with "Asset Groupings" containing a list of the following:

• Bitshares Smart Assets (bitXXX)
• Gateway Providers, ex Open Ledger, RuDEX etc

This gives me another question:

1. Would the selection "Find by asset group" be before "Find by asset" as it would narrow the possible assets to find?

[abitmore]

@startailcoon : in regards to implementation,

• for better performance and UX, please consider caching popular assets (e.g. bitXXX, OPEN.XXX) in local storage to avoid always fetching from remote API server;
• bitXXX assets actually have no "bit" in the backend, so it's a bit tricky for you to implement the search feature;
• the back end is good at finding assets by name with same prefix, I'm not sure if there is a good API to search by issuer (in case when you need it), I will check.

Update: searching asset by issuer can be done with get_full_accounts API although with quite some overheads.

[wmbutler]

@startailcoon Yes, when I refer to the issuer of an asset, I'm referring to the literal issuer as it exists on the blockchain. We could map the issuers to a more common name to make it more understandable for people:

• committee-account: Bitshares Asset
• openledger-wallet: Openledger
• rudex-steem: Rudex

If we expect a user to select an asset group, like bitXXX or OPEN.xxx, I would rather have this changed a little so the input is changed to a drop down populated with "Asset Groupings" containing a list of the following:

I tend to agree with your statement

Would the selection "Find by asset group" be before "Find by asset" as it would narrow the possible assets to find?

Torn on this. In general, I think people want to search for a particular coin first. "I'm looking for the BTC asset". Then I think they might get to choose from multiple gateways / exchanges. Hard to say for sure which should be first.

[startailcoon]

Torn on this. In general, I think people want to search for a particular coin first. "I'm looking for the BTC asset". Then I think they might get to choose from multiple gateways / exchanges. Hard to say for sure which should be first.

Your statement makes sense, so I'll let it be for now. If the user search for BTC, and they really need to filter by issuer they can choose from those that exists.

Another Question

I'm not really sure what the difference of "filter" and "search" is for. As "find by asset" on the filter tab will search for all assets and present those that the user can choose from, including filter by issuer. While on the search tab the user just search for an asset, and it's presented to them. Why are there two?

[grctest]

Regarding the term 'issuer' within the market picker's "asset owner" dropdown textbox, this could be confusing terminology for market pegged assets as there is no centralized issuer (MPA = decentralized issuance, UIA = centralized issuance). It's one of the major benefits that smartcoins offer.

[startailcoon]

Preview

Supplying a preview of the Market Picker in action.

[startailcoon]

Starred markets

Should the list add a star if a market is started and view it before all others in the results list?

[wmbutler]

Should the list add a star if a market is started and view it before all others in the results list?

@startailcoon, no. Starred markets are accessible already from the Markets area. The purpose of this control is to easily find markets that have not yet been starred. I could forsee integrating favorite markets into this control at a later date, but we have to be careful about how many features we pack into one control.

If I had my way, I'd get rid of the "filtered" search and instead let that toggle to favorite markets. But let's see how this is received first.

I'm not really sure what the difference of "filter" and "search" is for. As "find by asset" on the filter tab will search for all assets and present those that the user can choose from, including filter by issuer. While on the search tab the user just search for an asset, and it's presented to them. Why are there two?

This too is a difficult distinction. One assumes that the user understands the inner workings of Bitshares and can navigate to the asset directly while the other separates the asset into the symbol and the issuer.

[ahdigital]

Nice work so far. Don't forget the links to the asset explorer.

[wmbutler]

• Also, be sure to highlight the chosen asset in blue.

[wmbutler]

@ahdigital this leads to a single criticism about the UX/UI that I'd like to bring up. I always find it problematic when the color of an input field exactly matches the background color. This can create situations where a user may not be able to visually distinguish that a field exists. Can you please update the style guide to address this?

[ahdigital]

Those inputs aren't the new style yet. It's going to be addressed in an overides task to come.

[startailcoon]

@ahdigital it does, just not visually yet 👍

@wmbutler

This too is a difficult distinction. One assumes that the user understands the inner workings of Bitshares and can navigate to the asset directly while the other separates the asset into the symbol and the issuer.

Ah, now I see the difference as one needs the full asset to be typed as you search for and the other one helps you find one you don't know about. Correct?

[wmbutler]

Correct.

[startailcoon]

@ahdigital where can I find resources for the icons you use in the UX?

[startailcoon]

There will be one issue with finding an asset, just like what we have on issue #1320.
As the function getAssetList() is designed to start from a defined asset (like STEEM for example) and run for x number of items to populate the list, it will not be able to find assets like OPEN.STEEM.

Either we have to redesign the getAssetList() function or we have to wait for the Elastic Search feature for this to work properly.

Search for asset will work

This feature will work as it operates like the current code does.

[ahdigital]

where can I find resources for the icons you use in the UX?

Until icons from ANT are integrated you can use these ones: icons.zip

[startailcoon]

Update

I've bypassed the issue with the filter not finding XXX.xxx assets (such as OPEN., RUDEX. etc) by adding a flag to the getAssetList function.

This is a preview of the system at the moment. Only thing left is to make the different tabs of filter and search.

Filter by issuer will be the issuer name, as proposed from the beginning.

[startailcoon]

Final Result

Total hours: 7

[wmbutler]

@startailcoon can you also provide an indicator to help the user know which symbol has been clicked? I think the original UX had the chosen symbol in blue.

[startailcoon]

@wmbutler missed this on the last few changes. It's been updated in the PR

[TechsUsInc]

@wmbutler @ahdigital I have a few questions regarding the design

Question

In "filter" mode, you can use "find by issuer", and above you describe this with

Find by issuer
This would allow the user to browse an issuer for all available assets. For example, selecting 'BIT' would return results like bitUSD and bitEUR.

My question is, what do we regard as an issuer?

The following are assets in my understanding

• bitXXX
• open.xxx
• rudex.xxx

The following are issuers in my understanding

• committee-account
• openledger-wallet
• rudex-steem

If we expect a user to select an asset group, like bitXXX or OPEN.xxx, I would rather have this changed a little so the input is changed to a drop down populated with "Asset Groupings" containing a list of the following:

• Bitshares Smart Assets (bitXXX)
• Gateway Providers, ex Open Ledger, RuDEX etc

This gives me another question:

1. Would the selection "Find by asset group" be before "Find by asset" as it would narrow the possible assets to find?

A while back I proposed an upgrade to the market picker with the ability to search for all MPA, UIA, PMA by issuer ( which I can't find ) and there was some discussion about adding it to the market picker with the ability to search for any and all other assets which may exist on the blockchain by the issuer. For example, not all Openledger assets begin with Open.xxx. If a user were in the Exchange in a pair beginning with any Open.xxx they could click market picker> search by issuer> populate all other assets issued by Openledger at a glance without having to leave the Exchange tab go to Explore and search by issuer. Some novices may not know or understand how to navigate unable to help themselves.

1. To be clear, is it intended that the market picker will point only to another asset or issuer, and they can
   only be 1 of the 3 choices listed above?
2. Will the user be able to use the market picker filter or search feature to populate a list of all assets
   from an issuer? or is the filter and search being disabled?
   In my opinion, the modes should include as is at the Explore:
   Smartcoins
   User Issued Assets
   Prediction Market Assets