This post is part of a series on building forms in mobile apps.

As I mentioned in the previous article of this series, Time and Space are two extremely important considerations while designing a mobile app. We covered time-related aspects and ways to make form-filling quicker in the last post. In this and the next post, we talk of space and present a few ways and means to design screen elements and layouts in your mobile app forms to better engage your users. Remember, lengthy-looking forms are a big turn-off for a lot of people so you should keep them looking short and sweet if you want to see a higher form-submission rate! Also, since space is at a premium here, wastage is big no-no!

An icon can speak several words!

Use visual metaphors and form elements that are so intuitive the user just knows what they are being asked for – the visual cue being enough. There are innumerable icons in use in today’s mobile app world – so the user will most likely understand the ones you use in your app. Use icons as actionable items to directly capture inputs on click of the icon. Like for example, if you want a voice input, show them a microphone icon tapping which begins the record process. If you want them to pick locations, show them balloon pointers on a map and ask them to pick one.  And use geo-location to show them nearby locations. So much easier than to scroll through a long list of locations and pick one.  Again, let’s say you want them to choose one of the options – Male and Female. Show the two options as tiny icons – the standard ones which everyone recognizes – and highlight the one that the user selects.

Another popular example is showing + and – icons next to items in a menu or product catalog. The user can use these not just for selection of the item but also adjusting the quantity or the count of the items selected.  You can also use the + or – icons for users to add new rows of inputs such as for example if they are entering names of people attending an event. This way you are making the form grow longer only if really necessary.

Using icons instead of text goes a long way in saving critical screen space and making your form look crisp and neat.

Club a set of inputs into one widget

Instead of having individual screen widgets for each input you want from the user, try clubbing multiple inputs into one widget.  Like for example if you want the user to input date and time, give them a picker wheel that houses both. Likewise, if the user has to provide inputs of values for ‘Feet’ and ‘inches’ – club them into one picker wheel with two columns.  Go a step ahead and make your picker wheel smart to refresh its columns each time a value is selected (read more about this in Part 5 of this series).

The horizontally-scrolling blurb

Now this is a UI element that I personally love!  See the image below – I am sure a lot of you have encountered this horizontally-scrolls-on-arrow-tap blurb while using your smartphone. Hats off to whoever came up with idea for the sheer simplicity with which it helps you save screen space! Use this element when the user is trying to key in something into a text field on your form and you want to help with suggestions. Or if you have a finite set of actions the user can take after clicking on an on-screen object.  This also serves as a good alternative to the action sheet that generally occupies more space.


Contextual form elements

So as I have been saying, screen space is at a premium on the mobile. Don’t show a form or form elements until the user reaches the point in the workflow of the app where it makes sense. So let’s say they are trying to book a seat on a flight. Don’t show the fields pertaining to payment till they have made their choice on the seat map. And once they move to the payment fields, keep the seat map closed but easily accessible just in case they feel they don’t want the window seat for a change!

Vertical or horizontal scroll ?

We are also so used to the vertical scroll for mobile app screens. But for a lot of scenarios where you want to display a set of options, a horizontal scroll would work equally fine. Just vertically delineate the options with UI that helps differentiate between them. Imagine how much of space could be saved this way. A simple swipe of the bar can reveal options sideways. Very useful to avoid long vertical , never-ending screen-scrolls.

The good, old Accordion

Accordion widgets are extremely useful when you want to break your form into several sections. See how the Google Play app on Android does this. Allow the user to fill up one section, then close and wrap it up into the accordion and curtain down the next section for the user to fill in. Very useful to, I say again, save space!

For those who want their users to write their heart out! 

If your form has too many Text Area widgets and you want to avoid long paragraphs taking up real estate on your screen,  have a label for the field tapping on which will take the user to a screen that is half text-area and half keypad. Let the user key in input and click Done in the keypad. ‘Done’ should take them back to the main form. Quick and easy. And it doesn’t eat up space in your main form.

So these were some quick ideas and methods to handle space constraints while building forms in your mobile app. There are some more interesting ones that we will see in the next post in the series. So long!

Image Source: