13 Basic and Fundamental Tips to Improve

Mobile Form UX

One of the most tiring thing mobile user experiences, when they are asked to fill a form in a mobile application. Users wish to get it done as soon as they can and get to the main feature of the application for which he/she ahs downloaded the application. Increased complexity of this section increases the possibilities of abandonment of the application by the user.

Therefore the Form UX is a key section for the Mobile Developers to look on and improve, to make their user feel less frustrated. Making the form filling more pleasurable and as easy as possible for your user will have a large impact on your application success.

To reduce the complexity and unnecessary barriers and improve the usability here are few basic and fundamental points that may worth and be use full to implement.

1. Align Labels vertically or use Placeholders instead.

Due to the limited real estate we have on the mobile screen, we need to be more precise while using this. Making the labels vertically aligned will be one of its key, as horizontally if we use, we’ll have to make both elements fit in the same width and some time due to long size it may not be enough or may be too dense to appear clearly.

It may cause the design to appear cluttered and makes the fields difficult for the user to click and key in the values.

So using the labels and the input area vertically aligned will solve this issue. Other option may be more useful, instead of having the separate labels use placeholder text in the input area itself, it’ll give you access to enough space and to user easy to tap and key in the values.

Difference can be found in the following Screen Shot below.

2. Use reasonably a big fields area

It’ll be of great help for your user, if they can easily tap the fields to key in the values, rather tapping very carefully to avoid the mistake, or accidently tap the wrong field, so keep the input area larger and easily tap-able. Minimum height of any text area should not go below 40 PX.

3. User appropriate Labels

While designing a form always keep in mind to provide the user enough information for what they need to enter in each field. Use meaningful and self-explanatory words/sentence in labels so that user can easily understand what they need to key in.

Do not use repetitive or too lengthy information in labels, it’ll make your user confused and ultimately frustrated.

4. Use GPS

If your form requires inputting the users’ location/address use GPS to grab the data and have them appeared automatically in those fields, BUT must keep the option open if user wants to edit these values.

It’ll please the user and increase their interest in the application.

5. Make calls-to-action as large as possible

This is seems like an obvious point and yet so many retailers still expect their users to press a CTA the size of a pinhead in order to submit the form.

Be at least 44x44 pixels. Have plenty of white space around them to prevent erroneous clicks. Use a color that’s distinct from the rest of the page elements.

Have the difference reviewed between following 2

6. Avoid unnecessary and optional fields

As we have limited space and mobile form design should be very optimum, so keep the unnecessary fields out to simplify the process.

For example, “Re-Password” field can be excluded, and instead give the user ability to view the characters while typing so that user will know what he/she is typing.

Avoid any other unnecessary field which is not required by your application core business criteria, it’ll be a waste of time and tedious for the user to see or have seen no use of the details he/she had provided.

Avoid asking DOB and the Age both; anyone can serve the purpose, if you really need this.

7. Make use of Social Network Plugin for User Registration

User’s registration some time is the very first process user need to go through before they really play with the app.

Therefore make this process as much as automated. Using Register with Facebook, Twitter, Google +, LinkedIn may enhance the process. This will give the user option to avoid keying in registration form values and can fasten the process and avoid or decrease the users’ frustration as well.

8. Condense into a single page if possible

Office Depot is a great example of this as its guest checkout only requires the card details, address, phone number and an email address before you can confirm the payment. This makes the process feel extremely short and should help reduce the amount of dropouts. Therefore condense your design in one single page if possible. See the following Image.

9. Simplify the Data Entry Process

Typing with mobile keyword is always very frustrating for the user therefore provide user with form where they have to make key board entry as less as possible. This can be achieved by using following.

For any numeric entry, you may provide a Slider with appropriate Range, instead of the manual entry. For example if asking for Age/Weight of the user you can provide Slider

with appropriate range over it instead of the text box to type in. Sliding finger is much easier for the user then carefully typing the numeric digits from the keyboard.

Use appropriate keyboard type for every Fields. For example for entering the Email field you should provide the Keyboard having “@” and “.com” keys. For Phone number fields provide user with Numeric keyboard.

For any Date entry, providing user a Text field will be a tedious work, so provide user a Calendar instead, it’ll make the process faster and interesting.

10. Divide Form in different Section/Segments

In case if a form requires having too many fields; divide and arrange the fields in multiple segments/sections.

E.g. If a form requires users’, Personal, Qualification, Biological details and Address, in this case keep the Personal Information in one segment, Qualification information in another segment, biological details in different segment and address in different segment.

Designing the form this way makes the user psychologically feel less tedious then having all in one full page. So after completing every segment of the form user get a feel of success and that will keep him/her going.

11. Keep the data saved at every stage

One of the most frustrating things mobile user experiences is that, if for some reason, he/she navigates away from the app in the mid of form filling and then returns again to find the Empty form. All the data he has previously filled has lost.

Therefore to avoid this frustration, you can save the previous data in the temporary memory so that when user returns they’ll find the previously entered data OR alert them while navigating away about the loss of data.

12. Avoid putting unnecessary Alert

Form validation is a key for the application & developers to ensure the correctness of the data.

But some time it gets frustrating for the user if for some wrong entry they are getting alerts boxes and taping OK again and again, therefore simply mark the wrong entry with some color code instead of putting Alert boxes.

13. Use of Progress bar

Ultimately a Form is being filled to be submitted. Some time due to huge amount of data or some time due to slow internet connection it takes longer to complete this process of Form Submission. So in this case notify the user about the progress. Keeping the user waiting on “Loading…” mask makes them feel annoying or frustrating.

Therefore, use of a progress bar in this case, will make them feel safe and progressive.

Thanks for Reading.

Do write your comments.

rupeshchanchal@gmail.com