My negative experience with a UI of an Online Banking App (and suggestions to fix it)
I came across a user interface (UI) while trying to transfer money using my online banking app. The objective of the UI, as I understood, was to set the amount and select the currency for the transfer. It sounds simple right? I do not think so.
The UI looked alright until I set the amount I wanted to transfer. After setting the amount, I tried to select the currency for the transfer. It made me realize that this UI has violated two usability heuristics or rules of thumb presented by Usability expert Jakob Nielson:
- Rule #1- Visibility of System Status: This rule implies that a system should always keep users informed on what’s happening in the system through proper and prompt feedback. When I tapped on the “Currency” field, there was no feedback from the system: the text “Currency” changed to a text pointer on tap, displaying a drop-down menu or a micro-interaction. So, the UI failed to provide proper and prompt feedback to its user.
- Rule #5- Prevention of Errors: This rule implies that the system should take measures to prevent the users from committing an error. The above UI had no such measures: No default value for currency or no warnings that the user has not selected a value as the currency. Therefore, the UI violates the heuristic 5 of 10 usability heuristics.
Since finding the way to select a currency took some good minutes of my time, I gave up and tapped on the “Continue” Call-to-action Button. The result was an error message saying I have selected an invalid currency. But did I? What I could only see was the word “Currency”. Not a single currency name appeared on the UI when I tapped on that field. I was confused.
This error message also violates an important usability heuristic: Rule #9- Help users recognize, diagnose, and recover from errors. It does not give the users a direction telling how to change the currency to a valid one. Let’s assume that it describes the problem in simple language, but would that be enough for an ordinary user to recover from it? It’s doubtful because I still could not find a way to change the currency.
So if I was the UX Designer of this online banking app, how I would fix these issues to improve the user experience of this UI and error message? I would base my design decisions on usability heuristics.
My Approach to Fixing the UI:
I would provide the users with a default currency value, which will address and fix the violation of rule #5. Further, I could indicate how to pick their preferred currency using a drop-down list with the possible currency options.
Finally, I will mark both fields as required and keep the “Continue” CTA in the disabled state until users insert/select values into both input fields. It prevents users from proceeding to the next step until they input data into both required fields. These changes will fix the violation of rule #1.
My Approach to Fixing the error message:
Providing the users with a default currency value and marking the fields as required will probably prevent the opportunity to get an error message as “Invalid Currency”. Yet, other scenarios might exist that could prevent users from doing a fund transfer using a foreign currency.
Let’s assume a scenario where a technical issue from the bank’s end caused a problem. The bank could change the copy as below to inform this problem to the users:
The new copy of the error message informs the user what the error is, what caused it, and the possible actions to recover from it. Using a concise error message copy allowed me to fix the violation of rule #9.
This will be the approach I would follow to fix the UI/UX issues I have noticed in this user interface. However, we should always keep in mind that we must verify our design decisions with the actual users. My next step would be presenting the redesigned UIs to a few of the other users of this online banking app to get their feedback. It will help me discover issues in my design and may also reveal more issues associated with the user experience of this application.
