Make sell/buy BTC screen more self-explanatory #1203

ripcurlx · 2018-01-16T14:17:28Z

Add information inline for price distance and volume range and add hint line before the create offer call-to-action button. Here's a rough sketch how it could look like:

tr37ion · 2018-01-18T12:52:31Z

Please don't forget to dot-align the figures #1028

ripcurlx · 2018-01-19T10:26:03Z

Good point! I'll have a look how to do this in a consistent way. Sometimes it is a little bit tricky when we also have to display ranges.

tr37ion · 2018-01-19T15:48:35Z

For now you could just switch to Fira Mono font, which looks like a sans-serif font and then just fill up the values with zeros to the right, so that values align nicely to the right. It is important to have a mono-space font, because then values are vertically comparable.

Sure a dot-aligned solution would be the best solution in the end.

ripcurlx · 2018-01-22T08:59:27Z

@fira mono: I'll have a look how it looks like mixing these two fonts within the app and the size of the font, as we have to bundle it within the app.

tr37ion · 2018-01-22T12:59:14Z

Fira Mono is one of the few fonts which scales very well. It is perfectly readable even with very small sizes.

ripcurlx · 2018-02-06T11:19:55Z

An updated version of the buy/sell screen up for discussion. @ManfredKarrer & @tr37ion let the discussion begin 😉

ripcurlx · 2018-02-06T12:31:47Z

Or the same with the call-to-action button below.

tr37ion · 2018-02-06T12:50:04Z

I got this layout. Positioning the filters and the Create button is not easy.

ripcurlx · 2018-02-12T12:13:27Z

If we would align it like this, I would start from the left, as this is the order how to approach this screen. Adapt the filter if necessary -> Take offer or move down to Create new offer. If we add the missing decimal places I think it would be maybe better to add them with a different color, not to overwhelm the user with zeros that don't add additional value. Regarding the flags I'm not such a great fan, as I think that users recognize/know the country codes more than the actual flags.

tr37ion · 2018-02-12T22:34:04Z

Looks fine. The different colour for the zeros is a good idea. Maybe move the percentages to a new column.

What about making the button like in my mockup and moving the NO. of offers .. to the status bar?

ripcurlx · 2018-02-13T09:57:04Z

Moving the percentage into a new column might solve the need of an additional + for the positive price distance, so prices are still aligned properly. To be able to squeeze it into the view I also had to rename the price column and added an additional question icon for explaining Distance. I've also added the idea of the issue #1214 showing which distance is good or bad for the user. Having the No. of offers in the footer, is too far off and will be overlooked for sure. What do you think about following mockup?

ripcurlx · 2018-02-13T09:58:19Z

I've also renamed the column title Buyer to Trader to reduce the usage of Buy within the Sell bitcoin screen.

ripcurlx · 2018-02-13T10:09:33Z

Or we make it super verbose and explain everything 😉

ripcurlx · 2018-02-13T12:28:35Z

@ManfredKarrer What do you think about going in this direction within the Sell/Buy bitcoin screen?

tr37ion · 2018-02-13T12:57:44Z

Some ideas:

Add filter for only showing offers one can take (registered accounts)
Move current vie to Expert view and show only Price, Distance, Payment Method and Trader
Add filter for showing only offers the user can take (> min limits)

ripcurlx · 2018-02-13T13:12:58Z

I think the amount of BTC to sell should also be visible for each offer, even in the non-expert view, as it is also important for your decision to sell (or buy).

ripcurlx · 2018-02-13T14:04:43Z

Maybe we can have a condensed view for new users and within filters the option to have an enhanced table where all values get their own column.

ripcurlx · 2018-02-13T14:11:05Z

That way, we can still implement sorting that takes the min & max values into account (as it is now) and reduce the number of columns a user has to overview from the beginning. For power users we have the filter and an option to split up the BTC and EUR range into a separate column.

ripcurlx · 2018-02-13T14:17:32Z

Or we name it instead of "show filters" --> "advanced settings"

ManfredKarrer · 2018-02-13T14:17:45Z

Problem with "Add filter for only showing offers one can take (registered accounts)" is that new users would not see anything before they have registered an account.

ManfredKarrer · 2018-02-13T14:18:39Z

Re "Move current vie to Expert view and show only Price, Distance, Payment Method and Trader" - that is more or less the view at the market overview screen.

tr37ion · 2018-02-13T14:21:01Z

Or list the max|min available values for buy|sell orders. So that with buy orders only the max available value is shown. If you don't have the min asked amount, the offer will not be listed eg.

ManfredKarrer · 2018-02-13T14:22:29Z

The idea with the bar in the background of the price distance is nice but has the problem that negative (green) are an exception. So all will be red (rosa) which gives negative feeling.
The info icons at the tables are too much for me. Then nearly every item gets an info. Instead we could maybe use tooltips as kind of lightweight info? Or maybe have an introduction / guided tour mode where all items are explained. But better to get to wording which does not require explanations (hard :-)).

sqrrm · 2018-02-13T15:02:10Z

The background color bar could use the average distance as the base for colorization, such that 1% is still green if that's better than the average distance in the market.

tr37ion · 2018-02-13T19:09:19Z

@ManfredKarrer Well, isn't it the purpose of those colours to guide the user a bit? I think we should not think too much of what the user might 'feel' of red/green colouring. If it is mostly red then it be so. It is just a quick way to find the most attractive offer. Plus get a feeling for How much the offer is off the current market price.

@sqrrm has a nice idea, while I'm not sure if all rainbow colours have enough contrast to be shown.

A compromise might me using a grey color.

ripcurlx · 2018-02-14T11:01:57Z

I'll let the idea of indicating the price distance visually rest for a while in the case that we might come up with an even better idea soon. Still I will start implementing following version of the Buy/Sell screen first. I've tried out a new wording for "price distance" as well --> price offset. Do you think this is easier to understand than the term we used before?

ripcurlx · 2018-03-28T13:00:27Z

As I'm about to submit the next pull request I'd love some feedback from a native speaker (@cbeams ?) on the tooltips used. Thanks!
Positive percentage

0 percent

Negative percentage

Fixed price

stale · 2019-01-17T23:54:02Z