How do I let users know the field can be edited without putting it in text?

Question

I am designing something like a wallet where users can withdraw from it. I'd like to give users the option to withdraw any amount, however, I do not know how to let my users know in a really obvious way that the amount can be edited. Currently, I'm deciding to put a text saying 'click here for desired amount' and connecting it via an arrow to the bottom $300.70 for users to know.

Please share with me your thoughts and opinions. Greatly appreciated! If you do not understand where I am coming from, do leave a comment as well! Thank you :)

Update: Thank you everyone for giving me so many constructive feedback! I really appreciate you guys taking your time out! And after posting, I came up with a high fidelity mockup! But after reading everyone's comments, I'm going to think about it again!

Answer 1

Your stating that the majority or your users will redeem the whole balance. Therefore you have the whole amount as preset in the input field.

But you could go another way:

Show the balance and give the users a primary action 'redeem balance' an a secondary action 'redeem other amount'. Only if this secondary action is clicked show the input field for the aoumnt.

This only would work if most of the users redeem the balance.

Answer 2

Without using any text the most obvious is the blinking EditText cursor at the number's end:

Answer 3

While others jump into solution too quickly, I'm going to bother you with some other questions and suggestions.

• Are you on a responsive situation? (mobile, tablet, desktop, at least)
• What are the previous steps? (I don't know why you already have an amount in your field)

My thoughts:

Mobile devices

Having a editable field with a cursor into that field (like autofocus or other technique) will activate the keyboard for obvious indicator that the field is editable. If this behaviour seems good for you, I'm sure that the user will find it visible enough.

That's only for the case where the completion of the field is mandatory, or at least you can be sure that's is supposed to be the next step when you land on this page/view.

If the content of the field if pre-filled but the user can edit it, I would personally go for a "field appearance" (depending on your existing UI for this component) and a little "Pen" icon next to it to indicate it's editable.

If you have a bit of room for it, I would add the text below the field saying that's an editable field, but it depends of the type of users you are focusing on. Being explicit can be good for inclusivity when things around are not explicit enough.

Desktop devices

As the autofocus on a field doesn't make your keyboard pop (that would be fun to imagine though :D), you need some indicators mentioned above on the mobile section. The best way I found on a web page that requested a One Time Code (those code you need to use for double authentication), is to have a slow focus effect on the field, for instance: a border or bow-shadow that grows from 1px to 3px with a color change, in 700ms. This is not an obvious way to show something is editable, but it shows that the cursor just land into this editable field.

Don't hesitate to multiply indicators, finding a balance between overwhelming and explicitation :D

Good luck 😊

PS. that's my thoughts with no knowledge of your target.

Answer 4

In order to figure out the best UI solution, I would like a little more information on what the user is trying to do. To help clarify what the user is doing, putting it into an agile user story helps; As a user, I want to be able to view my balance so that I can transfer funds at any time. In your description of the problem, you say "withdrawal" but then in the wireframe comp you have it as "redeem". How does a user withdraw funds from an app? I take it that they are transferring funds? If that is the case, I think a better high-level dashboard to start with will help us get to the right interface for this user problem.

• A dashboard that displays the balance with subtasks you can take on the balance; (not sure if these are options in your application but this helps bring context to the solution)

• Balance

  • Make a payment
  • Transfer Money
  • Make a request
  • Add money

• Below those UI elements, display a list of "previous transactions". This would provide the user with the ability to see a brief list of their previous money transactions on the balance.

In this case, the user would be "transferring" money no? From one account to another. Or from one vendor/shop to another user correct? So to avoid having to simply put in a blinking cursor or the right UI element for the screen you provided, I would have the user click on a "transfer" button. From there have the transfer screen contain the following;

The Transfer money screen UI elements;

• The account from which they are transferring money from displayed prominently at the top of the screen along with the current balance.
• Display a "Recent Payees" UI for the user to have a quick-select of options to whom they would like to transfer money over.
• A basic form to enter in new information for transferring money. The form would contain the following;
• Amount; An amount form field from which the user can select a currency type and the proper number for the currency. Here, on a mobile device, a number keyboard would display.
• Name; A normal text field
• Account number; A card or routing number to which you can transfer the funds over
• Finally, a "press and hold to transfer funds" button at the bottom.

Answer 5

Just make it obvious they can edit, especially if your default is not zero.

Maybe i'm misunderstanding the use case, but it seems like people need to know they can edit, and you don't have an autofocus field because it's a mobile use case. The UI needs a signifier as to inform users what can be done. Since you don't default to a zero balance, you need a prompt.

What's important enough to be visible? Seems like the Edit function is most important. A largely recognizable technique is an edit pencil. Another possibility is spelling out 'Edit' in a small link style button: it's replacing the symbol (pencil) for actual text.

Don't make the Balance look like the withdrawal field

I realize you have a pen sketch, but visually the 2 fields look alike. When you hone in on the finished UI, try removing the bounding box around the balance, so it doesn't look like an input. This may also reinforce the edibility of the withdrawal amounts.