5

I am not sure with input fields for IBAN numbers. Often the IBAN is separated into different fields.

XX00 0000 0000 0000 0000 00

Sometimes the customers have their IBAN in one line

XX00000000000000000000

If they have the IBAN in one line, they can be tangled by read AND write.

What shall I do?

  • Separate the fields and run the risk of confuse the customers who have the IBAN in one line on their card?
  • Make one input field that allows to make spaces?
  • Additional make an example of a valid IBAN?

EDIT: We have customers who enter from a IBAN: XX00 0000 0000 0000 0000 00 only the first XX00 and getting angry.

Improve this question
4
  • 1
    My normal way of entering an IBAN is to type the two letters normally, then keep my hand over the numeric pad and look at the piece of paper I'm copying from. I will then type one digit after the other, without spaces, and without looking at the screen.
    – Simon Richter
    Jun 16, 2014 at 14:19
  • 2
    Something you could offer is a small green checkmark/red X for the checksum included in the IBAN.
    – Simon Richter
    Jun 16, 2014 at 14:21
  • @SimonRichter Nice suggestion, perhaps it should be an answer? :)
    – Franchesca
    Jun 16, 2014 at 15:32
  • I don't remember when I last typed IBAN by hand. I always C&P it.
    – el.pescado - нет войне
    Jun 16, 2014 at 19:54

5 Answers 5

Reset to default
4

Permit users to enter IBAN in a variety of formats and syntaxes, and make the application interpret it intelligently. Users probably won’t (and shouldn’t have to) know what format your system is expecting.

http://quince.infragistics.com/Patterns/Forgiving%20Format.aspx

Improve this answer
6
  • I dont care about the format, i care about tangle the users.
    – Grim
    Jun 16, 2014 at 12:28
  • 2
    I meant that they can enter the IBAN either in one line either separated, as they are familiar with or as it is written in their cards. The user just wants to get something done, not to think about "correct" formats. System can figure out how to handle the input.
    – Stevy
    Jun 16, 2014 at 12:34
  • 3
    Just let them enter that in a text field and remove all the spaces. Then you can transform it into any format that you want.
    – Martin Ueding
    Jun 16, 2014 at 14:58
  • 2
    And hyphens, full stops etc. Why can't credit cards fields do this regularly?
    – Chris H
    Jun 16, 2014 at 15:15
  • 1
    @ChrisH I'm sure some misguided dev, PM, or boss decided a long time ago that would constitute some "security risk" and others have blindly followed.
    – Matt Ball
    Jun 17, 2014 at 0:45
4

Do not separate the fields, it is perfectly understandable that separating these fields would infuriate someone.

I think an input mask is your solution for the front-end of things:

http://digitalbush.com/projects/masked-input-plugin/

http://jsfiddle.net/49HVc/1/

And make sure you have rigorous back-end validation if you are saving/sending this data somewhere.

Improve this answer
5
  • Ideally the mask should indicate the intended format before the user starts typing.
    – edeverett
    Jun 17, 2014 at 9:59
  • @edeverett can you explain why your suggestion is the job of the input mask?
    – MonkeyZeus
    Jun 17, 2014 at 12:32
  • Indicating the format before the user starts typing allows the user to visualise this before rather than start typing and get frustrated.
    – edeverett
    Jun 18, 2014 at 18:32
  • @edeverett I don't think that should be the job of the input mask because it can easily bring up usability issues especially when you cannot use the placeholder attribute with HTML4. Indicating the format is important but I would relinquish that duty to additional text which does not disappear such as the .help-block from BootStrap.
    – MonkeyZeus
    Jun 18, 2014 at 18:44
  • I'm definately not saying the mask should disappear - it should get overridden as you type. Usability issues should be easily testable - I'm basing this advice on having watched users try entering a phone number in international format.
    – edeverett
    Jun 19, 2014 at 9:47
1

When a user types in an account or credit card number they will usually (since money is involved) look at it before submitting the form to verify that they typed the correct letters / numbers. Even if the user has their IBAN written down in a single long line on their card, they will verify it against what is on the screen in small chunks. Very few people can either hold the entire IBAN in working memory, or know the IBAN by heart to verify it all at once.

Seperating the IBAN into multiple fields will aid this process of verification.

Don't forget the following issues:

  • Don't force the user to tab or click to continue on to the next field in the set. Most sites I have seen will automatically move the cursor to the next field so you can seamlessly type the whole IBAN across multiple fields.
  • Make sure you still support copy / pasting of the entire IBAN. This is something that is generally done quite badly (i.e. not at all) in my experience.
Improve this answer
8
  • Please don't use separate input fields for the IBAN. I have that in my bank account, and want to Copy&Paste it. I don't want to "look at it" - it's ugly anyway - and I believe Copy&Paste works reliably. I do appreciate, though, if you keep the spaces which are in the copied string.
    – virtualnobi
    Jun 16, 2014 at 14:42
  • @virtualnobi Franchesca already warned about a bad behavior, neither a fact for downvote nor for Please-Dont-Comment.
    – Grim
    Jun 16, 2014 at 14:58
  • @virtualnobi I did say that copy paste should be supported. I also find it really annoying when it isn't. Ideally I would like to always copy paste, but most companies that don't support automatic debiting(meaning I transfer the money directly to them via internet banking) are small companies that still send a paper bill by snail mail. Yep, I have to type.
    – Franchesca
    Jun 16, 2014 at 15:21
  • 1
    When I see multiple tiny textboxes, I still try to Tab to the next one. This then results in me jumping to the third box instead of the second. In other words, it makes UX harder for anyone even remotely "enter-data-into-form"-literate ;)
    – Niet the Dark Absol
    Jun 16, 2014 at 15:21
  • 1
    @virtualnobi Using javascript you have access to the Clipboard. If you not have access to the clipboard you can parse the input-text and seperate all spaces. You also can mark over multiple textboxes and you can select text in text-boxes. You have access to all keys including Ctrl and Alt to know when a user pressing Ctrl+Shift+RightArrow for Word-selection. But this technical things are more interessting for Stackoverflow i think. My comment about downvote was unfortunately pointed to you, sorry this is wrong. It shall be pointed to some who did not read the answer compleatly.
    – Grim
    Jun 20, 2014 at 7:26
1

You "tangle" (do you mean "confuse"?) the users the least if you leave their input as much unchanged as possible. This means the field shows what the user enters, and normalization is done in background (ensure it can never change the IBAN, only the formatting!).

For Copy&Paste to work, use only one field. Make this input field as forgiving as possible, as Stevy already said: Accept spaces, maybe even double ones. Maybe even convert lowercase letters to uppercase ones internally.

You can't create a meaningful example, since there's a checksum in there, I believe. Nobody will be able to reconstruct that algorithm from one (or a few) example(s). An example only helps if your system accepts only one formatting from several ones popularly used. Since you followed the first advice :-), this additional help is not needed. (Also, nobody can reconstruct the checksumming from one example, so it wouldn't really show what is a "valid" IBAN.

Improve this answer
3
  • confused or tangle (not sure), i took tangle because you can be confused and think you entered all datas correctly. If the user click the next-button we know he think he did everything right. But if he is tangled he is not sure about the datas. If someone is confused you may click "next", Therefore we have a error-message. But if you tangle you maybe never click "next".
    – Grim
    Jun 16, 2014 at 14:57
  • +1 forgiving as possible ... Anyway some users may call us to know why there is only one field to enter the IBAN. Maybe a visual combination of seperate and one-line is the correct answer.
    – Grim
    Jun 16, 2014 at 15:03
  • If the one field is clearly long enough to hold all the short fields (i.e. even a little longer), that should reduce the problem.
    – virtualnobi
    Jun 16, 2014 at 15:09
0

Use one input field with input masks* to guide the user to as the correct format. Most input masks scripts also include restricting the input to your selected format.

*My work network blocks all the nice examples so I can't find a link at the momment but googling will get you examples.

Improve this answer
1
  • You use format in singular, all other answers talk in plural, in formats. Have you more arguments than "use google"?
    – Grim
    Feb 10, 2017 at 0:41

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.