Fixing things #2: Just a rounding error
2025/03/24 #uiuxWelcome back to "Fixing Things", my mini-series where I present small UX/UI-hiccups and how to fix them. This third installment is about a literal rounding error. What triggered me to write about this was the Genki Sushi app on iOS. Genki Sushi - for those of you who are not familiar with it - is a chain of conveyor belt sushi restaurants active in Asia and some parts of the US.

In the last few months I've eaten at Genki so often it seemed reasonable to download their membership app. By spending a certain amount you unlock some minor benefits like discounts and stuff. It ended up taking me a while but when I ate there last time a prominent orange badge in the app told me that I had finally accumulated enough spending to gain the Silver Pass. How exciting! Or so I thought...

After clicking on the badge telling me that I had to spend "$0" to "upgrade to Silver Pass" the next screen showed me that I was actually $0.1 short of reaching that limit. I finally realized that the "$0" in the exciting banner was just a rounding error. How annoying and disappointing!

In an effort to safe space and visual complexity the makers of this app had decided to round down to the next full dollar amount. This way the amount of $0.1 got presented to me as $0, making it look like I had already completed the spending requirement. It's a simple mistake that might seem small (and in this particular instance it actually is nothing more than an annoying hiccup) but actually shows how dangerous it can be sometimes to make what seems like a minor UI mistake. Just imagine making a similar kind of rounding error in a banking application where the stakes might be much higher.

Having your app show wrong or inconsistent amounts on different screens is obviously bad and I can't think of an instance where it can be justified. There are, however, some legitimate reasons for choosing to round a value before presenting it to the user, ranging from eliminating meaningless or misleadingly precise decimal places to simply saving space in the UI.
However, this justification for sacrificing accuracy and inconsistency just to save some space in the banner is not valid in this specific case. After all the UI element seems to work well enough (or even better) with bigger amounts such as 520$ as the next screenshots clearly shows. So the fix is really simple here: Just don't round for amounts under $10 and you should be good to go!

In conclusion, I take a few lessons away from all of this:
- Rounding numbers can be necessary to communicate effectively or to safe space in the UI
- Rounding numbers can be useful in certain cases (for example when eliminating meaningless or misleadingly precise decimal places)
- Rounding can also be dangerous if done the wrong way and should never lead to inconsistent or wrong information
- Be careful how to round numbers so you don't frustrate users by leading them to the wrong conclusions