< Go Back

#31 Efficient Data Input

Designers know that input fields look simple but getting the UI details right is not such an easy feat. The right techniques make user tasks easier and prevent garbage output.
As of October 2014, Google's Chrome crossed 60% browser usage on desktop. So, designers are safe to design with Chrome's capabilities in mind first

Basically, Chrome allows for very subtle UI tweaks with the use of the HTML tag <datalist> (and in combination with 'date') which can greatly improve for example date/time input in Time Tracking UIs. Obviously, a frontend developer will know how to use them, but you as a designer will benefit greatly by knowing how to improve the UI with their use. The coolest thing with e.g. a date this is that a user can simply type a number and the input jumps the respective month (3 for March).
To be upfront, Chrome and Opera are the only browsers that fully support <datalist>. However, instead of talking and explaining the How-To, go ahead and check it out yourself:

Test with Chrome #31 Efficient Data Input