The Frontier of Web3 UI Design: Deciphering the Decimal Points

Constance Tang
3 min readJan 30, 2024

Throughout my web3 journey, I’ve come to realise that one of the biggest challenge is not about mastering new technology or creating stunning interfaces, but understanding and managing the complexity of cryptocurrency values.

Small numbers in Chinese abacus

Welcome to the Decimal Challenge!

In the world of cryptocurrencies, many digital tokens can be divided into smaller units, sometimes down to 8 decimal places or more. For example:

  • Ethereum: with 18 decimals, each coin split into 10⁸ gwei or 10¹⁸ wei.
  • Bitcoin: with 8 decimals, 1 Bitcoin split into 10⁸ Satoshi.

The level of precision in cryptocurrency is quite different from fiat, which typically only have 2 decimal places. The ability to transact in such small amounts is incredibly important for accurately representing token value, especially when dealing with tiny transactions.

Therefore, precision is essential for more than just calculation. It plays a crucial role in enhancing user experience and ensuring clarity. By providing clear guidance, users can easily navigate their digital assets without any confusion or misunderstandings.

Exploring the Golden Ratio: Clarity vs. Precision

The real challenge lies in balancing accuracy with clarity, readability and user-friendliness. It’s important to consider whether users need a rouch estimate or a precise number with multiple decimal points.

Tips for Success:

Contextual Display: Focus on a 2 to 4 significant decimals, depending on the context.

Truncation: Consider rounding or truncating decimals, preferably rounding down for accuracy.

Currency Equivalents: Show fiat equivalents alongside crypto values for context and estimation.

Uniswap — Swapping
Uniswap: numbers are usually rounded on portfolio or dashboard

Formatting: Use commas or unit abbreviations for better readability. For example, 1,234 instead of 1234, similarly, 1M instead of 1,000,000.

MetaMask Portfolio — Abbreviate large amounts for readability

Input Validation: When users input numbers, ensure they fall within the acceptable ranges. Providing clear error messages or help text can guide them if their input is invalid.

Radiant — Depositing all balance will get a warning of not leaving enough for gas fee.

Supporting UI elements: Apart from text or number fields, incorporate steppers, buttons and sliders for intuitive value adjustments with minimal taps. You can even add a touch of gamification to make the experience more engaging.

Binance — Adjust the slider to buy or sell tokens

Embracing the Challenge

Exploring web3 can be an intriguing journey that requires a thoughtful approach to understanding its technology. Whenever I come across unfamiliar features, I experiment with small amounts of money, refer to other sites or seek advice from seasoned crypto investors if needed.

How do you navigate these unique challenges in web3? Let’s connect and explore the endless possibilities in this dynamic and captivating realm!

--

--

Constance Tang

UIUX + Product Design @ Memeland, 9GAG / pharm 設計雜學 IG @ pharm.design