Azzcat Blast

Design stories & tips, peppered with life's little tidbits

Input type=“better” Experience

January 27th, 2016

It’s the little things that make me happy. And you know what one little thing I’d like to see every time I wait for the bus in Portland? That one less touch/click be required to get arrival time by Stop ID.

trimet stop ID arrival screen

Number required to get stop ID, but I’ve got an alpha keypad.

Need to switch to numeric.The fix is very simple. All that has to change is the input type. On phones, when input type=“text”, the alpha keypad magically slides up for input. If the input type=“number”, what keypad do you think appears? Yep, the numeric pad. Really, baked in HTML5 magic, that is!

type=text

Change type=”text” to…

type=number

type=”number” and magic happens below!

trimet stop ID arrival screen with numeric input

That’s the keypad I’m looking for!

Coding form fields may not be the most exciting part of web/app development, but a little attention to the details there goes a long way towards improving the user’s experience throughout the site/application.

Comments are closed.