Mobile devices have many challenges when it comes to UX design. One of the most obvious design challenges is dealing with the limited screen real estate during tap input. It is critical that product designers, developer and product managers understand the best ways to make this process really simple for users.

This article highlights three key factors that improve data input, which are speed up input, providing help and assistance for users and indicating problems directly related to the user’s input.

Input

Match the Keyboard With the Required Text Inputs

App users appreciate apps that provide an appropriate keyboard for text entry. Unlike physical keyboards, touch keyboards can be optimized for each form field the user has to fill out and the type of text field determines what kind of characters are allowed inside the field. Common input types for which you should optimize include:

• Number: phone number, credit card number, PIN
• Text: proper name, username
• Mixed format: email address, street address, search query

Ensure that this matching is implemented consistently throughout the app rather than only for certain tasks but not others.

Configure Auto-Capitalization Appropriately

Configuring auto-capitalization settings appropriately is important to mobile form field usability. The first letter in each text field should be capitalized if required by the locale, as well as the first letter of each sentence. For example, this is especially relevant for input fields that:

• Ask to name something, such as a user‘s first or last name
• Contain sentence-like messages, such as text messages

However, you should disable auto-capitalization in email field, because when it’s turned on users might go back and delete the first capital letters as they fear e-mail delivery issues.

Disable Auto-Correct When the Dictionary is Weak

Poor auto-correction is frustrating when users notice it, and can be downright harmful when they don’t. Auto-correct often works very poorly for things like abbreviations, street names, emails, person names, and other words that aren’t in the dictionary.

Old version of the Amazon’s mobile app had auto-correct mode turned-on for the address field, which caused valid entries to be overwritten by auto-correct.

This usually happens because *users generally focus on what they are typing instead of what they had typed.* In case of address information, this lead to valid addresses being auto-corrected into invalid ones, and thereafter submitted because the user failed to notice an auto-correction had taken place.

Fixed Input Format

Don’t use fixed input format. The most common reason for forcing a fixed format is validation script limitation (your back-end can’t determine the format it needs). In most cases it’s a problem of development, not user. Rather than forcing the format of something like a phone number during user input, you should make it possible to transform whatever the user entered into the format you want to display or store.

##Default Values and Autocomplete You should anticipate frequently selected items and make data entry easier for the user by providing fields with pre-populated smart default values or prompts based on previously entered data. For example, you can pre-select the user’s country based on their geo location data.

This solution can be paired with autocomplete functionality, which significantly speeds up the user’s actions. Autocomplete presents real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently. It’s especially valuable for users with limited text literacy or who have difficulty with spelling, especially if they are using a non-native language.

#Labels and Helpful Information The user wants to know what kind of data to enter in an input field and clear label text is one of the primary ways to make your UI more accessible. *Labels* tell the user the purpose of the text field, maintain their usefulness when focus is placed inside of the field and should remain even after completing the field. 

You can also provide helpful information in context of the input field. Have relevant, in-context information ready to assist users to move through the process easily.

Limited Number of Words

Labels aren’t help texts. You should use succinct, short and descriptive labels (a word or two) so users can quickly scan your text fields.

If you need more information about fields, helpful information can be a great way of eliminating confusion and possible errors that the user might face when dealing with them.  ##Simple Language *Speak the same language as your users.* Unknown terms or phrases will increase cognitive load for the user. Clear communication and functionality should always take precedence over professional jargon and brand messaging.  ##Inline Labels Inline labels (or placeholder text) work great for simple fields like username or password.  But it’s *a poor replacement* for separate text labels when there is more than 2 text fields on the screen. Yes they are very popular, and yes they do look nice, but they have two serious problems: 

• Once the user clicks on the text field, the label disappears and thus the user cannot double check that what he/she has written is indeed what was meant to be written.
• When users see something written inside a text box, they may assume that it has already been prefilled in and may hence ignore it.

Good solution for the placeholder text is a floating label —  when the user engages with the text input field, the floating inline labels move to float above the field.

**Takeaway:** Don’t just rely on placeholders, include a label as well. As once a field has been filled out, the placeholder is no longer visible. You can use floating label which ensure users that they filled out the correct field.

Label Color

The label’s color should reflect your app’s color palette, while also meeting appropriate contrast ratios (shouldn’t be too bright or too dark).

#Validation Field validations is meant to have conversations with users and guide them through the difficult times of errors and uncertainty. The output of this process is emotional rather than technical. One of the most important, and often unloved parts of data processing, is error handling. It’s human nature to make mistakes though, and your input field probably isn’t exempt to human error. When done right, validation can turn an ambiguous interaction into a clear one.

Real-time Validation

Users dislike when they go through the process of data input only to find out at submission, that they’ve made an error. The right time to inform about the success/failure of provided data is right after the user has submitted the information.

Real-time inline validation immediately informs users about the correctness of provided data. This approach allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors. Use a contrasting color for error states, such as a warmer hue like red or orange.

The validation shouldn’t only tell users what they did wrong, but it should also tell them what they’re doing right. This gives users more confidence to move through the input process.  ##Clear Message It should give a direct answer on following user question “What just happened and why?” Your validation message should clearly state:

• What went wrong and possibly why.
• What’s the next step the user should take to fix the error.

Again, it should avoid using technical jargon. The rules are simple, but somehow they are very easy to ignore.

Right Color

Color is one of the best tools to use when designing validation. It works on an instinctual level, adding red to error messages, yellow to warning messages, and green to success messages is incredibly powerful. Below is a good example of validation for the password text field:

Another good example with using color is a character restriction for the input text field. Character counter with a red line showing that the restriction has been exceeded.

But make sure that colors in your digital interface are accessible for your users, it’s a really important aspect of a well executed visual design.

Conclusion

You should make the process of data enter as easy as it possible. Even minor changes such as auto-capitalization or indicating what information goes in each field can significantly increase input field usability together with overall UX. Think deeply about how the user is actually using your mobile app when they’re able to give inputs and make sure you’re not missing something obvious when designing your app.

Thank you!