0

So we want to increase the number of accepted fields in our app of which people use as identifier to transfer to. We currently have mobile number and email , however we intend to increase to add personal id and buisness id

Note that the user can complete the transaction needing only one of those ids

enter image description here

I realize that tabs isn't ideal here, and I don't think it is ideal to have a drop down where it will add friction to users to select the type

Instead I'm thinking of having a text field where it auto detects the type based on the input of the user

is that a good UX practice? if yes are there any live examples I can look at ?

What are other acceptable alternatives with proper UX

Thanks

Improve this question

3 Answers 3

Reset to default
0

Like you said, tabs aren’t ideal.

But having 1 input that accepts completely different types of information is complex and probably unnecessary.

One downside that comes to mind is that the label to describe the field is going to be unwieldy (and will get worse the more options you have).

To simplify this I would let users choose the transfer method and reveal the specific input.

enter image description here

Improve this answer
3
  • Thanks Adam, Do you think that option of Radio Button listed vertically is the most ideal? given the fact there are other necessary information within the page hence we don't want it to be cluttered.
    – hks_tbc
    May 14 at 10:36
  • No worries. I use this pattern regularly - it works very well. But I don’t have the context of your entire flow or page in question. Feel free to share it.
    – Adam Silver
    May 14 at 13:58
  • Basically we use identifiers for p2p transfers, most popular is mobile number but our scope is expanding for more identifiers. The screen also contains a dropdown to select from which account, amount field and description field so its on the full side
    – hks_tbc
    May 15 at 6:10
0

You could prepend the input field with a dropdown that allows the user to select their preferred identifier. When the user selects an option, the placeholder value string in the input would adjust to show an appropriate example, like this:

Preferred identifier multi-select input mockup

I used a Bootstrap input group in this example.

You mentioned that a dropdown could add friction to the experience, but you could probably avoid that by defaulting the selected option to the most commonly used identifier type, if you have access to that data.

Mobile concept (update)

Here is another concept that might be better suited for mobile:

Preferred Identifier prototype

Click/tap the "Choose a different identifier" link, then select Mobile number instead. You could also unify these two screens so that the user makes their selection, then the relevant input appears below, but on a mobile device it might be better to focus on one interaction at a time.

Improve this answer
3
  • thanks Sean for your suggestion, would your design be fine on a mobile app given that some have small screen sizes?
    – hks_tbc
    May 15 at 6:08
  • Also there is one type of id required to enter 16 digits alphanumeric, plus possibility of long emails .. how to tackle such
    – hks_tbc
    May 15 at 6:38
  • I added a concept mobile prototype in my answer above. That might be more effective on mobile devices and could also be more future-proof as you introduce more identifer options.
    – Sean King
    May 15 at 15:32
0

I would prefer to have only 1 field and let user input either email or phone number / ID in the same field with server side validation.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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