5 ms·

When I’m just trying to get past a signup form, please don’t make me re-learn a new way to type. Here, the delete key does something other than delete the last

by tlb 8y ago

When I’m just trying to get past a signup form, please don’t make me re-learn a new way to type. Here, the delete key does something other than delete the last keypress. For example, typing 20199<delete>11 gets me 2019/01/1 because it helpfully autoinserted the 0 before the 9 and didn’t undo it. Filling in a form is never delightful. It’s a tedious interruption in my flow. Just let me get past it with minimum cognitive load.

iamgopal 8y ago
A much simpler approach is to show in realtime what computer will interpret of current input without changing the input, instant feedback is a much more better approach to improve quality of input.
- hartator 8y ago
  Do you have an example of good integration of this? Interesting.
  - julienreszka 8y ago
    https://www.lukew.com/resources/web_form_design.asp https://www.lukew.com/resources/web_form_design.asp
- allover 8y ago
  This sounds like a cool idea, like sibling I'd also love to see a good example of this :)
g105b 8y ago
I found this library many moons ago when looking for a credit card formatting solution. It had so many bugs when I tried it, and it has at least as many now. For example: in the first demo, type the card number 1234567812345678. Works nice, eh? Now try again with 1233567... oh wait, let me go back and change that second "3" to a "4". And it's broken.
tomp 8y ago
Exactly. Most of the "shortcuts" are anything but. If the input/form is messing with user input (as opposed to the formatting of user input), it's doing it wrong.
RHSeeger 8y ago
I agree with you in the general sense. However, the credit card entry is nice. It doesn't change what you'r typing, it just adds extra information (spacing, which card type). Trying to type in credit card info w/o the spacing is really annoying.
- wst_ 8y ago
  I beg to disagree. It's just a number, like any other number. And not even that long, really. Instead of adding something automatically, it would be much better to allow users to put space if they wish so and remove it when processing. Everyone is happy and when users see space there actually is space there.
- Ayesh 8y ago
  Credit card forms are probably the most over-engineered inputs, majority of which lead to break my browser autocompletion.
  - elizabeth_olu 8y ago
    www.elizabethblog.com.ng
the_pwner224 8y ago
On Firefox mobile, the backspace key can't delete the automatically inserted slashes. Type in 2019 09 > need to change month from 09 to 02 -> backspace key just doesn't work -> need to click on the textbox between the 9 and / to position cursor and then press backspace. Would a normal person try to do that or would they just reload the page and start the whole form over again? Or would they just leave the website and never come back?
- folkhack 8y ago
  Usability errors/barriers like this on high-profile sites have caused millions in lost-revenue. Many people just abandon their intended action when simple usability things are not right because your sales experience is sorta a "first impressions" thing (bit of a generalization but yea).
- crtasm 8y ago
  In Orfox after a few tries I managed to hit backspace twice quickly enough to remove a slash. Not a fun game, please don't use things like this if you're considering it!
leeoniya 8y ago
the problem is mobile keyboards. pulling up a numeric keyboard to enter a cc number is helpful, but also lacks a space key, making it hard to viaually verify a 4-4-4-4 pattern. yes, there's luhn, but that doesnt work until you're finished (same problem with formatting post-entry, eg onblur/onchange) for entering a date, most numeric keypads lack /. thankfully, phone entry is mostly covered with type=tel. which is numeric + symbols, so i end up using it as a hack for some other numeric types, as suggested on SO. i would rather just type big numbers instead of fumble with symbols or tiny keys on a full keyboard for numeric inputs.
- TeMPOraL 8y ago
  > the problem is mobile keyboards. So much work is put into making various pointless design gimmicks recognize whether they're displayed on mobile vs. desktop. Why not recognize whether the user is on mobile (and thus likely has crappy keyboard), and conditionally enable those convenience factors? Also, I feel this problem was solved 20+ years ago with CD-key entry boxes. You'd have a row of text boxes, 2-4 characters long each, but they behaved as if they were one large text field - the focus correctly jumped between the boxes as you wrote or erased stuff.
  - franga2000 8y ago
    > CD-key entry boxes Unless you missed one character and then everything was misaligned and it wouldn't let you just insert one in the middle so you had to delete everything after that point and start over. Meanwhile, your pirate friends were already at level 10.
    - TeMPOraL 8y ago
      Nah, the ones I'm thinking of were made of native Windows text field controls, so arrow keys & all worked within them (and AFAIR transparently moved between them), and Tab/Shift+Tab behaved correctly too.
- johnnycake12 8y ago
  > the problem is mobile keyboards. No, that's just the default iOS keyboard, meaning the problem is Apple. My Pixel's keyboard sensibly has a space button, as do most 3rd party keyboards on iOS.

by tlb 8y ago

iamgopal 8y ago

A much simpler approach is to show in realtime what computer will interpret of current input without changing the input, instant feedback is a much more better approach to improve quality of input.

hartator 8y ago
Do you have an example of good integration of this? Interesting.
- julienreszka 8y ago
  https://www.lukew.com/resources/web_form_design.asp https://www.lukew.com/resources/web_form_design.asp
allover 8y ago
This sounds like a cool idea, like sibling I'd also love to see a good example of this :)

g105b 8y ago

I found this library many moons ago when looking for a credit card formatting solution. It had so many bugs when I tried it, and it has at least as many now. For example: in the first demo, type the card number 1234567812345678. Works nice, eh? Now try again with 1233567... oh wait, let me go back and change that second "3" to a "4". And it's broken.

tomp 8y ago

Exactly. Most of the "shortcuts" are anything but. If the input/form is messing with user input (as opposed to the formatting of user input), it's doing it wrong.

RHSeeger 8y ago

I agree with you in the general sense. However, the credit card entry is nice. It doesn't change what you'r typing, it just adds extra information (spacing, which card type). Trying to type in credit card info w/o the spacing is really annoying.

wst_ 8y ago
I beg to disagree. It's just a number, like any other number. And not even that long, really. Instead of adding something automatically, it would be much better to allow users to put space if they wish so and remove it when processing. Everyone is happy and when users see space there actually is space there.
Ayesh 8y ago
Credit card forms are probably the most over-engineered inputs, majority of which lead to break my browser autocompletion.
- elizabeth_olu 8y ago
  www.elizabethblog.com.ng

the_pwner224 8y ago

On Firefox mobile, the backspace key can't delete the automatically inserted slashes. Type in 2019 09 > need to change month from 09 to 02 -> backspace key just doesn't work -> need to click on the textbox between the 9 and / to position cursor and then press backspace. Would a normal person try to do that or would they just reload the page and start the whole form over again? Or would they just leave the website and never come back?

folkhack 8y ago
Usability errors/barriers like this on high-profile sites have caused millions in lost-revenue. Many people just abandon their intended action when simple usability things are not right because your sales experience is sorta a "first impressions" thing (bit of a generalization but yea).
crtasm 8y ago
In Orfox after a few tries I managed to hit backspace twice quickly enough to remove a slash. Not a fun game, please don't use things like this if you're considering it!

leeoniya 8y ago

the problem is mobile keyboards. pulling up a numeric keyboard to enter a cc number is helpful, but also lacks a space key, making it hard to viaually verify a 4-4-4-4 pattern. yes, there's luhn, but that doesnt work until you're finished (same problem with formatting post-entry, eg onblur/onchange) for entering a date, most numeric keypads lack /. thankfully, phone entry is mostly covered with type=tel. which is numeric + symbols, so i end up using it as a hack for some other numeric types, as suggested on SO. i would rather just type big numbers instead of fumble with symbols or tiny keys on a full keyboard for numeric inputs.

TeMPOraL 8y ago
> the problem is mobile keyboards. So much work is put into making various pointless design gimmicks recognize whether they're displayed on mobile vs. desktop. Why not recognize whether the user is on mobile (and thus likely has crappy keyboard), and conditionally enable those convenience factors? Also, I feel this problem was solved 20+ years ago with CD-key entry boxes. You'd have a row of text boxes, 2-4 characters long each, but they behaved as if they were one large text field - the focus correctly jumped between the boxes as you wrote or erased stuff.
- franga2000 8y ago
  > CD-key entry boxes Unless you missed one character and then everything was misaligned and it wouldn't let you just insert one in the middle so you had to delete everything after that point and start over. Meanwhile, your pirate friends were already at level 10.
  - TeMPOraL 8y ago
    Nah, the ones I'm thinking of were made of native Windows text field controls, so arrow keys & all worked within them (and AFAIR transparently moved between them), and Tab/Shift+Tab behaved correctly too.
johnnycake12 8y ago
> the problem is mobile keyboards. No, that's just the default iOS keyboard, meaning the problem is Apple. My Pixel's keyboard sensibly has a space button, as do most 3rd party keyboards on iOS.