No More Hidden Fees

A toolkit for taking the “gaswork” out of blockchain transactions

By 2018 Summer CoLab Fellows Debrena McEwen, Claire Shu, and Claudia Sosa

The Fuel UI website

Imagine going to the post office to send a letter. Now, instead of choosing a different flat rate to ship next-day or standard speed, let’s say you get to decide just two things: how much you want to pay for shipping, and how fast you want your package delivered. Generally speaking, paying more will correlate to a faster delivery, but the actual delivery time and cost will end up being dependent on traffic congestion while your package is in transit. If you choose to pay too little, your letter might never be delivered and you’ll lose the money you’ve paid towards shipping; on the other hand, if you guess too high, you risk leaving money on the table.

How would you make your decision? It would be great if you could look up historical and current traffic reports, but you would have to look at multiple sources to gather this information, and even then it’s only a prediction and doesn’t take into account the fact that the Warriors just won the NBA finals and the streets are going to be totally packed this week. You’re reduced to guessing what you should pay for shipping and, chances are, you’re probably going to be wrong. Sounds frustrating, right?

If this dystopian Post Office scenario has your head spinning, welcome to the Ethereum network. Similar uncertainties arise when users transacting on the Ethereum blockchain have to pay a fee for each transaction, which helps meter network usage to ensure security and prevent spam. That shipping fee is called “gas.”

Frowny face, indeed

Setting gas prices can lead to multiple moments of frustration. For first timers, it’s an additional hurdle to an already complicated technology that makes using these apps feel inaccessible. Seasoned users, on the other hand, often have to refer to multiple sites to try to gauge network conditions to determine if their transaction will be fast enough to beat other competing bids for scarce digital goods. It’s inefficient all around. Tara Tan, CoLab Venture Studio Lead, even recently wrote about how the lack of fee transparency is one of the major issues that blockchain designers will need to solve to allow the technology to gain mass adoption.

As part of the 2018 CoLab summer fellowship, our team embarked on a four-day design sprint to develop a UI toolkit that helps Ethereum developers simplify gas fees for users. We held multiple interviews with Ethereum users across the blockchain-fluency spectrum, and ultimately developed a set of three design principles for demystifying gas fees:

1. Put fees in context to increase understanding

A lot of existing user interface in the blockchain space is entirely barebones, prompting users to enter a gas price and gas limit without providing any other information. Users not familiar with this concept are left on their own to figure out what these prompts mean and why they matter.

An artist’s rendering of a typical interface for sending Ethereum

Instead, be conscious of conveying meaning and supporting information in your displays—whether through metaphors, icons, or concise, clarifying text. For example, if it’s likely that a transaction at a certain gas price may never go through, the user will want to know that before pressing “Confirm.” How might we make users aware in the moment of the consequences of their actions?

One central element in achieving this requires being unit-aware; gas limit and gas prices are denominated in gas units and Gwei, respectively. Gwei is a denomination of ether (ETH) where 1 ETH = 1,000,000,000 Gwei. This is enough to make anyone’s head hurt. Through displays, how might we provide information about fees in units that convey meaning to a broad scope of users?

Ask yourself:

1. Can a first time user see the total he/she will pay in 3 seconds or less?
2. Is it easy for users to understand how much more they have to pay in order to increase transaction speed by X minutes?
3. Am I providing information on the expected time a transaction might take?
4. When applicable, can users access historical gas price data?
5. When applicable, am I giving users insight into the relative busyness of the network at a given time?
6. Are units consistent across displays in one particular user flow or task?

Some ideas of what a more helpful interface could look like, putting transaction fees in context

2. Use defaults to make caring about gas optional

Our user interviews made one thing abundantly clear: that speed matters more when users are bidding for finite digital goods (think ICOs, bidding on CryptoKitties), but there are other occasions where users simply want assurance that a transaction will succeed without fussing with the details (examples include voting, or transferring funds). Whenever possible, provide simplifying suggestions for those who don’t want to invest the time to learn deeply about gas, while always giving seasoned users the ability to control all gas parameters.

Ask yourself:

1. Can users manually enter specific gas limit and gas price preferences?
2. Am I providing default settings, as well as clarifying information that helps users set expectations?
3. Am I providing suggestions based on the type of transaction and priority expressed by users?
4. Am I providing warnings when their current settings will probably result in failure?
5. Are the default settings I provide updating in real time to reflect market conditions at a given time?

Provide users with clear options, and provide recommendations based on the transaction’s purpose

3. Use transaction downtime to promote learning

The average time a transaction takes on the blockchain can depend heavily on the network congestion at that time—this means users are often waiting a short while to confirm that their transactions have gone through. Take advantage of these moments of waiting to spark learning for beginners and to give seasoned users additional visibility into what is happening as transactions are processed. A more knowledgeable user is a more empowered user, allowing them to make the crypto transaction decisions that are right for them — both within your app and others.

Ask yourself:

1. Am I giving users insight into their transaction status?
2. What are the moments when users are waiting, and how can I leverage these to increase blockchain literacy?

An example of how a transaction waiting screen can be an opportunity for user learning

From principles to a best practices toolkit

For more inspiration, check out the rest of our prototype toolkit on our website here, where you’ll find more examples of how to design better experiences for users transacting Ethereum—including buttons, charts, sliders, and more. We hope you find value in this early toolkit. Here’s to building a dapp-based future that’s a little more human-centered! 😀

Examples from the Fuel UI Toolkit

Do you have experience designing for clarity in transaction fees? Would you add any principles you would add to this list? Let us know what you think on Twitter. We’re in the process of iterating on these principles and flows and would love to hear more ideas.