Posted by:Nithin Rao March 18th, 2014

In last week’s article (read it here), we saw why good form design on mobile apps cannot be just about field label, field widget and a Submit button. In this part of the series, we draw to your attention some particular ways in which you can make forms easier to use on your mobile app.

1. Contextual keypads:

Now we didn’t have this on the desktop but it’s a mobile device boon. Remember how iOS gracefully launches the email keypad for your mails? And the numeric keypad for your passcode? Well, iOS is a great teacher and we must follow suit! Starting with the email keypad for a username login, perhaps?

With the limited space available on the mobile screen, it is such a thoughtful idea to show the keypad relevant to what the user will key in. Little things. That made Apple great.

2. Inline naming of fields:

We are so used to seeing the field name-with-field-widget  forms on our desktop screens. Like Name:  __________ and Age: ______ and so on. Honestly, the mobile screen begs us to break free of that norm. Screen space is precious and we cannot waste two rows; one for the field name and one for the input.  Filling in field names inline within a widget is the best other option.  While this may look miserly on a desktop screen, it makes perfect sense for a mobile device in your palm.

Place field names within the input widget. Like for example, ‘name’ could be written inline within a text box. And if you fear that the user input will wipe out this placeholder and leave them guessing about what the field is when they next visit the form, you can hardcode ‘name:’ into the widget in such a way that all user input just gets appended to it and does not overwrite it.

form_website

3. Keep the CTA visible at all times:

The CTA (Call To Action) button is the Submit button of your form. It is important that the user knows when he/she starts to fill out the form, where the CTA button is. This not only gives a sense of finiteness to the form but also prods them to complete the necessary steps quickly to reach Submit and be done.

On the desktop/laptop screen, there is ample chance for the user to notice the Submit button with one casual glance at the screen. Out there it stands, all bold and highlighted and conspicuous at the bottom of the screen, not bumping into anything else. Obviously, it’s going to be noticed.

But readers, we don’t have that luxury of space on the mobile device. Limited real estate, and a lot of form elements. Fitting in all the fields and the Submit button all in one screen while maintaining a healthy font size, is not easy. Having the user scroll ten screen-miles to see the Submit button is a strict no-no. So where does your CTA button go?

Think different and think out-of-the-web-box.

A CTA button doesn’t always have to be at the bottom of the form after the last field. It can be at the top right of your header bar and maybe accompanied by a forward-pointing arrow that subtly indicates that it takes you to the next step.  Or it could be a Done button anchored to the bottom of the screen as the rest of the form scrolls (this would be a good idea if the mandatory sections of the form could be placed upfront and the optional ones could be just headings that expand if the user taps on them)

More thoughts and examples, in the next post.  Meanwhile, do share your thoughts on what we discussed so far, in the comments section below.

Make Your App A Success : Grab this free eBook packed with UX tips, guidelines and best practices

Leave a Reply

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