Chapter 4

Chapter 4

Use Appropriate Input Types

This chapter is most relevant for mobile device users.

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.

Therefore the examples will be most meaningful on your phone or tablet.

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?

Just an example, so use 800-555-4242

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

Just an example, so use hello@example.com

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.

Just an example, so use 800-555-4242

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

Just an example, so use hello@example.com

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!

Enjoying The UX Mini Course?

Sign up for the Cubicle 6 newsletter to get practical UI/UX articles written by a developer for developers.