8

Say I wanted to allow users to search on account numbers with the following format. 0000-00-0000

Is is better to have a single field for entry [___________________]

or is it better to create 3 text boxes and have the user enter only the numbers? where the dashes are presented on the page

[___] - [__] - [__]

I already have my own opinion. Which approach is more user friendly?

Also, i want to enhance this with begins with and partial matches in the future.

0

6 Answers 6

11

Personal opinion: I would say no, you shouldn't seperate it.

Having worked in a job that involved entering account numbers all day long, I can tell you that having to manually press tab between the different bits pissed me off to no end. Having it as a single field would also let people copy/paste it easily.

However, be sure that when you're parsing the input you can understand the dashes (though I'd suggst you not require them).

1
  • 3
    +1 for the copy paste. It would also help of instead of dashes users could type spaces to separate the numbers. The spacebar is more easily reached than a dash... (especially on laptops) May 14, 2011 at 9:39
10

I like the 3-box approach if and only if you have some javascript jump you to the next textbox when the one you're currently typing in is full.

Caveat: Please, PLEASE, make sure the user can go back and edit an older textbox if they make a mistake in the last number. It's awful when the script "helpfully" jumps you to the next textbox (which it thinks is appropriate, since the one you're editing is already full).

7
  • 5
    The automatic jumping between textboxes is only nice if you don't make a typo.
    – Anna Lear
    May 13, 2011 at 15:30
  • 3
    The automatic jumping between textboxes is maddening unless you're a genius who never makes a mistake.
    – S.Lott
    May 13, 2011 at 16:32
  • Have you all used the site I'm referring to? LOL!
    – Doug Chamberlain
    May 13, 2011 at 16:40
  • 4
    A lot of places do that. It's awful. You make a quick typo, and now you have to fight with the user interface to convince it to let you fix your mistake. And I don't mean one of those "golly gosh this is frustrating" fights. I mean, collateral damage, battle to the death, winner takes all bloodbath.
    – Sean Edwards
    May 13, 2011 at 16:44
  • This can be very difficult to implement correctly (with the jumping from one box to the next). One of the rare times I've seen it done correctly is with some game registration screens (I forget which one now), where from the input point of view, all boxes act as one: that is, I can even use the arrow keys to navigate between characters in different boxes as if it were just one long string.
    – FrustratedWithFormsDesigner
    May 13, 2011 at 17:35
4

I think 3-box looks better, but single box behaviour is better. So, as long as the three box will allow single-box style editing, then that would be my choice. Otherwise, single box.

2

I will suggest one single box, and have some Javascript add the dashes when they move the cursor out of the box.

2

Agree with most people here.

It should be one field, and, ideally, parsed server side to accommodate various formats.

There nothing more annoying than having a form throw a user error because I typed dashes in the phone number field when they are not allowed. Why bother me with that? JUST REMOVE THE DASHES ON THE SERVER $#$*

If you want it to look all nice and pretty, then maybe consider field masking:

http://www.conetrees.com/2009/03/blog/jquery-masked-input-plugin-increase-usability-for-masked-format-input-fields/

1

How about implementing a single custom text control accepting that specific format. Once you know that the user type n number of letters you can put "-".

HTH

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.