Using a small keyboard on a mobile phone can make it difficult to type. To make it easier for claimants filling out forms on their phones, it is best to provide options where they can tap or select instead of typing. It is also helpful to show the right kind of keyboard on their screen as they are typing. Additionally, when a claimant is typing numbers, the form should automatically format their entry.

 

 

Stack form elements 

Input fields are the areas of the UI form where claimants type in information or choose options, including text boxes or buttons. Field labels are directions or questions that tell claimants what to enter in each field. When creating UI applications and site for mobile, a best practice for mobile usability is to arrange the labels and fields on top of each other.  

For claimants filling out forms on their mobile devices, it’s easier to understand what they need to do if words are above the spaces where they need to write. Placing field labels at the top of the input field allows you to fit longer words, make the text bigger, and more easily accommodate different languages. 

icon-needs improvement Needs improvement

The example shows three form fields with the name of the field and the input field displayed side by side. The first field is "phone number" and the input field is on the right side. The second one is "email" and the input field is on the right side as well, directly below "phone number". In the third row there is a question that reads as follows: Do you have a state issued driver's license or state issued ID?, and the options to choose from are "yes" and "no", also displayed on the right.

Placing field labels and input fields side by side since it can be harder for claimants to input text and know which fields are tied together.

 

 

icon-better Better

The example shows three form elements stacked vertically. First the name of the field and below the input field, including "phone number" and the input field below, as is the case of the name field "Email" and the input field is displayed below.

Stack and align field labels to help with readability and easier input.

 

 

Reduce typing  

Reduce the typing required to complete a UI application and site by displaying the options available to claimants as checklists, radio buttons, and dropdowns. You can present short lists with options or use predictive functionalities as an alternative to scrolling through the longest lists (country or state). Remember that input fields requiring one touch to select an option create an easier mobile experience.

icon-needs improvement Needs improvement

The example shows an open text input box.

Text boxes and text areas on mobile devices increase the need and difficulty of typing since it can be harder to type on smaller screens.

 

 

icon-better Better

The example shows a list of options to choose from to answer the question "How the disaster affect you? Only the first option has been selected: "Workplace closed". Other options include "Became ill or injured" and "Loss of income".

Minimize the need for typing by using form features such as checklists, radio buttons, and dropdowns.

 

 

Use the correct keyboard 

Form input fields should trigger the correct keyboards (numeric or alphabetical) to reduce the amount of typing and effort required to complete your UI application and site on mobile. When tapped, input fields should trigger the numeric keyboard if the input field requires numbers (for example, a phone number or a Social Security number) and the alphabetical keyboard when text is required (for example, a name or explanation).

icon-needs improvement Needs improvement

The example shows a numeric input field highlighted, asking about "phone number" while the form is set to display the alphabetical keyboard on mobile devices.

Tapping the input field triggers the alphabetical keyboard automatically, even when claimants need to add a phone number.

 

 

icon-better Better

The example shows a numeric input field, "phone number", and the form is set to display the numeric keyboard on mobile devices.

Touching the input field triggers the correct keyboard (which for this field is numeric), making it easier for claimants to enter the information requested and reducing the likelihood of mistakes.

 

 

Use auto format 

As claimants enter numbers on your UI application and site, the application and site should automatically apply the desired format. Adopting this approach prevents confusion and helps the claimant identify possible entry mistakes. 

icon-needs improvement Needs improvement

The example shows three phone number input fields to input Example of a phone number questions with three separate input fields for phone numbers.

Requiring claimants to format numbers or to divide the number across multiple fields.

 

 

 

icon-better Better

The example shows a phone number input field, with only one input field that displays the traditional breakdown of phone numbers (such as area codes in parenthesis).

Set fields to automatically display numbers in the preferred format as the claimant types.