Posted by:Nithin Rao July 23rd, 2014

This post is part of a series (read parts 1234567 ,8 ,9 ,10 and 11 here) on building forms in mobile apps.

There are several interesting ways in which we can validate form inputs on a mobile app. Keeping in mind the several time and space related constraints faced in the context of mobility, there are ways we can ensure input validation is smooth, quick and hassle-free for the users. Here’s a peek at a few of them:

On-device input processing:

Wherever possible, perform local processing of inputs. Equip your app with the necessary business logic to pass or fail an input right there instead of having a server side action validate it. The last thing users want, is to wait till your remote server examines the input and then be told it is an invalid one. Building crisp validation logic into your app’s code is, instead, the sensible thing to do. Especially if you know there are business rules that will not change too often.

Inline errors:

Given that space is at a premium on the mobile screen, avoid dedicating extra space to display your error messages. Have the error messages placed inline within a field perhaps highlighted in a color that will draw attention to the error.  An interesting case-in-point is this app I came across that would convert placeholder text into inline errors.  So let’s say we have a text field with a placeholder that says ‘Enter new password’. The user taps on it, the keypad comes up, they key in the input and tap on the ‘Done’ button in the keypad. An immediate check on valid password format happens and the resulting error, is shown by refreshing the placeholder text in the field to say, for example, ‘Your password must be alphanumeric.’ This is seen in red font as against the usual greyed-out placeholder text.  If your error message is too long to fit into the widget space, use blurbs in the vicinity of the widget to serve the same purpose.

The Slide-In Action Sheet Vs Modal View Alert

Many a time, we wish to ask the user for confirmation before they submit a form. A lot of apps do this by throwing an alert/warning message in a popup (modal view) and usually have a couple of action buttons on it such as ‘Proceed’ and ‘Cancel’ for example.  We must move away from this method of using repeated modal views in our apps because the screen is already small and the more we keep superimposing information on the same screen, the more overwhelming it gets for the user. Besides, it creates the notion that there are too many steps to be taken to accomplish a task. What would be more subtle and yet make sure you have your confirmation is an action sheet that elegantly slides in from the bottom. It will have a crisp message and two action items such as the ‘Proceed’ and ‘Cancel’ example we spoke about. While this retains the functionality you want, it does not seem like one additional mini-form by itself and the user finds it quicker to surpass and proceed to the next steps. Also, it does not give the I-will-not-let-you-go-any-further kind of strict tone that modal views generally bring about!

Progress indicators and feedback

I couldn’t stress enough on how important it is for your forms to have visual indicators that provide cues to the user as to what is happening whether it is those few seconds being taken to validate inputs or simply perform a successful submission to a back-end system. After having taken the pains to give you the information you need, the user has a right to know it was worth it. That the form is being processed and once it is, whether it was successfully submitted or not.  You could use spinning wheels, progress bars or a simple text message. Not providing these visual cues and feedback could frustrate users and also have them try and move away from the screen even before the submission can happen. Which brings me to another point – make sure you block the UI when a submission is happening!

Prevention is better than cure!

Look for ways to help the user not make the mistake in the first place. If you don’t accept more than 15 characters for the name, make the keypad go dead after 15 characters have been entered. The user will get the point! Also, this way, you minimize the necessity to display validation messages and thus the time taken to fill the form.

The Queue Concept

Since a lot of mobile apps are native, they must be built in a way that does not handicap the user if there is no or limited access to the internet. If your app has multiple forms, the user should be able to fill them offline and queue them up for submission as and when they enter a networked zone again. An added bonus would be the provision to remove a form from the queue.

Recap is a good habit!

Mobile screens are small so obviously you cannot fit in everything into one screen if you have several fields in your form. In view of this, it is advisable to show a quick recap of inputs to the user, before final submission or checkout. That is just being thoughtful so that users can be sure of what info they have provided.

Auto-save form inputs

It is a good idea to make sure you do a local auto-save of the mobile app form inputs on a periodic basis.  Since the app is on a mobile device, there could be several distractions while filling a form such as incoming calls or messages or notifications from Facebook! There could also be network interruptions. In such situations, the user may either move out of the app or to a different screen and then come back at a later point. It is a pain to have to fill up all the fields again. Instead they should just be able to continue and quickly submit the form.

Add the fun factor!

Unless your app is to do with something that warrants a deadly level of seriousness, try making your error messages more human, fun and interesting to read. Users hate seeing error messages anyway, more so if they are trying to get something done quickly on their mobile phone, but it would so nice if you could get a laugh out of them while politely asking them to provide the input again! One example is this app I was using that asked me to enter my date of birth and when I accidentally keyed in the year as 2016, it asked me ‘Hey, are you really from the future?!’

Those were a few of many thoughts on the topic of mobile app form submission. Have you tried any specific form submission technique that helped your app? We’d love to know.

Take charge of your enterprise app strategy ! Download this eBook with the 10 best practices and get started

Leave a Reply

Your email address will not be published. Required fields are marked *