New Gas Controls

[cjeria]

It's currently difficult to make an informed decision on what gas to set your transactions to. So we've designed better gas controls that can be used in two areas of the app.

1 - Speeding up a "slow" transaction
2 - Sending ETH

Speed up a slow transaction

Send ETH

Related design issue:
MetaMask/Design#25

[brunobar79]

@cjeria I just wanted to say that I love this.

[bdresser]

I second @brunobar79 😸

• might make sense to split this in two - first, the new "basic" controls, then add "advanced" afterwards? @MetaMask/kyokan what do y'all think?
• moving to "transaction fee" from "gas fee" is bold but I think makes a lot of sense
• in the "Send ETH" flow, do you think we need ETH values for gas as well as fiat? right now in prod we have both & ETH is primary
• how do the advanced controls look in the extension view?

@cjeria

[snreynolds]

love this + some thoughts:
• the transaction fee descriptions range from cheap >> average >> fast but describing a transaction as cheap vs. fast may not be super intuitive to new users. For example, it might be good to have descriptions based on either the speed of the transaction or the cost but not a mix of both... so you could label it cheap >> normal >> expensive or slow >> average >> fast or more logically combine both so new users know that a cheap transaction equates to slower confirmation time.

[cjeria]

Reworked the speed up components a bit here and made two options. Left option is Time focused and right is Price focused. Updated the labeling per options as well. @bdresser @snreynolds Thoughts?

[bdresser]

I actually like the initial version with Cheap / Average / Fast. Including the price makes it obvious that speed costs more, and there's something good about any choice.

I do like this visual treatment, sneakily adding in the new typeface 😉

On the extension-sized Confirm screen, I'm assuming the "Advanced options" opens right to the graph? Could you mock what this would look like? We may have to make some adjustments for size.

[bdresser]

If I click "edit" from the Confirm screen, what edit view do I see?

[kingjacob]

Since it's ETH being sent/spent and the USD is just an estimated description, the primary really needs to be Eth (or the token being sent/spent)with any meta descriptions placed below at a smaller size. As is, it looks like you're spending USD to speed up transactions, and the eth amount is just an fyi.

[bdresser]

@kingjacob check out #4510 and #4804

[cjeria]

Based on our twitter poll, option A is the preferred design with some minor tweaks to be made:

• Change the >>> icons to text labels such as "Slowest, Fast, Fastest".
• Increase price font size
• Put ETH above fiat value

Link to poll:

https://twitter.com/cjeria/status/1027710558785613824

Poll results:

Notable feedback from the community:

"1) explain why: state that the network is slow which is why you’re asking
2) speed is the primary concern so lead with that over price
3) consider first time users - is gas well understood?
4) avoid explaining the UI - for example you don’t need to talk about options in copy"

"I’m a big fan of option A, mostly because the emphasis is put on time rather than price. I also feel that as a new user it may not be apparent that low means a slow transaction and high means a fast transaction."

"A. but reversed ordering or the “optimal” choice selected. Let the user know what metamask would do cause they trust you."

I'd say A, but two thoughts: 1) the current time format is a bit ambiguous, e.g. unclear if it's 8 hr 25 min or 8 min 25 sec, and 2) the font size of the price seems a little small"

"Like option A, but an “Advanced” option with a slider would be nice :)"

[cjeria]

Here's an updated design

Bonus option to make it a bit more obvious that the fastest option costs more.

[bdresser]

Good feedback from the crowd, liking the input.

The word "slowest" feels like the odd man out. If we're just talking about the "speed up" component, I would think they should all be some form of fast -- like, "fast / faster / fastest" (which I think you were going for with the arrows.)

Also @alextsg or @danjm how are we going to estimate these? Will we suggest proportionally higher gas, or aim for a set of estimated times?

[danjm]

@bdresser Our intention was to follow the recommendation scheme of ethgasstation: https://ethgasstation.info/gasrecs.php

Unless @danfinlay has other thoughts on what sort of gas estimates will allow for the best UX (I know this is something Dan has spoken to during number of design syncs... although I don't know if any of us have come to any final conclusions)

[bdresser]

@danjm what if Safe low is less than or equal to what the user paid in the first place? Since this is specifically the "Speed up" component, we should adjust to make sure our lowest suggestion is still an improvement above the user's original gas, and adjust the faster options accordingly.

Will we use the same API for the user's original gas options? (aka MetaMask/Design#37)

[cjeria]

Posting updates to the advanced custom gas component here for feedback.

[danjm]

@cjeria These look great.

One comment: when opening the modal from the confirm screen, we need to give the user access to both the basic tab and the advanced tab. So, we need to give the user a way to switch between tabs.

[cjeria]

@danfinlay @danjm Posting for feedback on the tabbed gas dialog

[danfinlay]

Cool, and maybe add style for the line when a cursor is hovering over the graph?

[bdresser]

@alextsg @danjm you guys have everything you need? @cjeria any final thoughts?

otherwise will mark as done on the Design board if we think nothing else is going to change~

[bdresser]

@cjeria did you guys chat about a place for an error message if the user doesn't have enough ETH to speed up their tx? Found this separate issue #4810 but let's keep the convo here.

[cjeria]

Yep! There's an error notification component that's in the confirm screen that we could reuse for this screen

[danjm]

@bdresser We have everything we need. Thanks!

[danjm]

And great work @cjeria!