Is it better to replace a button with error text or show error on click?

Question

Context: mobile banking app

I need to design a state for when the user is no longer able to transfer money because they have payments overdue on their account.

Is it better to:

1. Keep the button "Transfer money" and when the user clicks, display an error message explaining why this action is blocked

OR

2. Remove the "Transfer money" button and put the error message text in it's place.

Answer 1

I'd recommend not changing the button's text.

If a user knows that they normally go to "Accounts" and click the button that says "Transfer Money" and don't see that button, they will likely first continue searching for that button before abandoning their quest and actually reading through the page.

Instead, I'd recommend showing the "Transfer Money" button in a disabled state, with the status message already explaining why it's disabled.

Answer 2

Option 1

Keep the UI coherent regardless of the state.
When (and IF) the users click on the "transfer" button they'll be notified of the issue and why they aren't allowed.

Even better, you could let them know during page-load if they aren't allowed to perform certain operations. This will be a nice-to-have to manage the users expectations.

Answer 3

Option number 2. You have one click / tap fewer... You can design it as a disabled button .. I.e. red border, text within button: "Transfer disabled", and text bellow "Multiple payments overdue, please check Dashboard"