Use Appropriate Input Types

Frustrated users are more likely to churn. Let's keep that from happening!

What's even better than receiving great feedback on invalid input? Being prevented from giving invalid input in the first place!

The Problem

Have you ever filled out a web form field on your mobile phone for credit card number and were presented with the standard text keyboard instead of the numeric one?

Or been prompted for your email address but been presented with the standard keyboard and had to hunt for the @ symbol?

Sure, these are minor inconveniences, yet they nonetheless add friction to the user experience.

These usability issues are really easy to miss as a developer, because we work on our desktops or laptops with a full keyboard available at all times.

The Solution

This one can be tedious to fix but it's easy. Use the correct input type for the information requested from your users in each field.

These inputs look exactly the same. However, if you're on mobile tap on each one. The difference will be immediate.

It's amazing how such a small change can be a huge improvement.

Take Action Now

1. Review every input in you application.

2. For a web use the correct <input type="..."€> attribute. Check all the available types here.

3. For native, refer to the platform's documentation. Each platform is different, but they all facilitate the same fundamental input types.

Congratulations

You've made it easier for your users to easily enter valid input!