Designing a simple banking info UI for balance inquiry display, what should I watch out for

I am working on a small project where I am trying to design a basic UI that shows bank account information like balance, recent transactions, and status messages. The idea is similar to how apps from banks like First Abu Dhabi Bank present balance inquiry and account details.

One issue I keep running into is how to handle balance updates in a way that feels reliable to the user. For example, if transactions are still being processed or there is a delay in syncing, the UI can end up showing a number that does not match what the user expects. I want to avoid that confusion but I am not sure what the best practice is from a UI perspective.

Right now I am just updating the balance whenever new data comes in, but that can make the value jump around or look inconsistent with the transaction list. It feels like something small but it really affects trust in the interface.

For those who have worked on similar UI systems in Unreal or elsewhere, how do you design this in a way that keeps things clear and avoids user confusion around the actual available balance

Hi, I think this question is very broad and maybe can be narrowed down.

At first glance this is more likely a UX problem then a technical problem however I will try bring some suggestions as common practice.

Use Case : As a player, while I was looking to my gold and silver counts on my stash they suddenly changed.

This issue is around signs and feedbacks.

Solution :

  1. OnUI, when a value is updated first catch the value update put a + - Delta Difference . Wait and add to to actual balance. Show player that something happened.
  2. If you are directly pushing the UI numbers, that architecture wise is not the best. Try an observer / MVVM that binds to specific data and shows it. When a change occurs UI acts on it, not the system tells UI to act (Decoupling UI).
  3. Another UX is to show incoming outgoing transfers as a notification on the side. Something happened, “your scheduled transaction for the horseshoe maker is successfully completed.”
  4. Also as jargon maybe having a distincion between Active Balance and Available Balance. Available balance = ActiveBalance (current stash ) -( incoming + outgoing)

For a banking style UI the main thing to focus on is clarity and user trust. If the balance changes suddenly while transactions are still processing, users can get confused. A good approach is to separate values like current balance and available balance, clearly label pending transactions, and show small update indicators when the balance changes. Adding a “last updated” time can also help users understand when the data was synced.

Many real banking apps follow these patterns to avoid confusion. For example, apps from First Abu Dhabi Bank display balance information in a way that distinguishes processed and pending transactions so the numbers make sense to the user.

When I was researching how FAB presents account details and inquiry flows, I also found a helpful guide explaining how users can do a simple balance check and understand the different balance states. Looking at real banking examples like that can actually help when designing a UI that feels reliable and clear.

1 Like