Design Better Input Fields
Andrew Coyle
1.6K31

I agree with most examples here, but splitting a form into a number of sections for a phone or serial number can pose many usability issues. Especially considering the multitude if devices that need to be supported nowadays. Take for example what should happen when a phone area code input is full, should it automatically jump to the next field? What about back space when the field is empty, should it jump to the previous input? What about the use of arrow keys, tabs etc. There is a whole design language around form inputs which user’s mental models are attuned to. By introducing something custom, this can lead to unexpected behaviour. I’m not saying it is impossible to get right, but takes more effort than perhaps it is worth. An alternative would be to simply format the desired text as it is inputted, for example to use parentheses /hyphens etc.

Like what you read? Give fabritw a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.