Mobile friendly inputs

Designing mobile-friendly inputs is not just about making the form fields fit into the smaller screen space; it’s also about enhancing the user experience by making form interactions more intuitive and less frustrating. Here’s a more comprehensive guide on mobile-friendly inputs, including some innovative approaches to improve usability.

Avoid squishing content or reducing font size to fit smaller screens. Use large, descriptive buttons and increase font size to improve readability.

But there’s more, besides consistency in form design, there’s also a big problem with entering values. If a value is set, it must first be deleted and then set again. I find this procedure very user-unfriendly.

A common issue on mobile forms is the need to delete a pre-filled value before entering new data. This can be frustrating for users. One solution to this problem is to use JavaScript to clear the input field on focus and restore the original value if the user doesn’t change it.

Let me know what your think about?

Here an example

Picture by Paul Hanaoka