2

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 :)

enter image description here

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!

enter image description here

2
  • Ill second the suggestion with the blinking edit-text cursor (also on mobile) You could also have a number keyboard up in order to help guide the user to input amount. – Mikkel Apr 19 at 14:34
  • is this mostly a mobile use case? Also, is there a default amount already in place? seems like you start w/ the full balance by default. – Mike M Apr 19 at 18:12
0

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

enter image description here

2
  • Hi! Thank you for your comment, I forgot to mention, this is on mobile! So sorry! – Cassie Ho Apr 19 at 12:35
  • A blinking text cursor should only show in a field with active focus. – maxathousand Apr 19 at 14:59
0

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.

3
  • Hi Geoffrey, thank you so much for taking your time out to type this! To answer your questions: 1) I'm doing this on mobile! The idea is that this is a page that users are brought to from Facebook messenger. 2) Our users tend to claim all of their cashback amount, hence I thought it'd be easier for them if we fixed it as their total available fund! – Cassie Ho Apr 20 at 4:03
  • I updated my question with a high fidelity mockup I did in the meantime, but I think what you've suggested about the 'field appearance' is great too! Do you think I should have both that and a text or text itself would suffice? – Cassie Ho Apr 20 at 4:07
  • Thank you for your example and advice, Geoffrey :) – Cassie Ho Apr 20 at 4:08
0

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.
2
  • Hi Mriccelli, thank you for taking the time to reply to my question! I'm so sorry I didn't provide a clear understanding of my problem! It should only be 'redeem', I'm designing a cash back system where users can redeem money via this mobile page. I made another mockup and uploaded it on the main question :) Thank you for your detailed suggestion and probing questions on transferring money, I will definitely take this into consideration if I were to design such a page! – Cassie Ho Apr 20 at 4:13
  • Great. Glad I could help. Feel free to ask any further questions. I'd be glad to help. – mriccelli75 Apr 20 at 13:06
0

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.

enter image description here

1
  • Hi Mike, thank you so much for your feedback! I really appreciate it. I came up with a higher fidelity mockup (I placed it at the bottom of the main question)! And I think that what you have suggested is really helpful too, I'll think about it and redesign it :) – Cassie Ho Apr 20 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.