Posted by:Nithin Rao June 27th, 2014

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

We have heard of all kinds of management practices in use but I guess this term of ‘Space Management’ is extra-significant in the context of mobile devices. And more so when form-filling is a task you expect your end user to perform. Continuing from the previous article in the series, we discuss some more nuances of managing space in the forms of your mobile app. You may not find some of the standard best practices here because enough has been written about them already. This article is more of an effort to point out specific ideas that could help with space management.

Anchoring Screen Elements

Anchor elements on your screen to retain fixed positions as the rest of the elements below them are scrolled. This way the overall length of your form gets reduced. It also helps retain context to what the user is seeing in the scrollable portion. Here’s an example:

If your form has 3 sets of questions each with a set of answer options, anchor the question to the top of the form as the user scrolls through the answers. Once an answer is chosen, refresh the anchor with the new question and the scrollable portion with the corresponding set of answers.

Multi-Screen Forms

Sometimes you have too many questions to ask and too many answer options that you want to provide for each of them! In such cases, no matter how much of ‘space management’ you try to do on the screen, it will still look cluttered. That’s when you should go back to the basic rule of conversation – ask one question at a time!

Yes, so that would mean you split your form into multiple pages. Ask one question at a time and show the corresponding answer options – all laid out well on the screen with ample negative or white space to ensure easy readability. The advantage of this approach is that users would find the form easier to fill while you don’t have to worry about trying to fit your entire form into the size of their palm.

Additional aids in this kind of a form would be bidirectional screen swipe (apart from Previous and Next buttons) to navigate between questions, a pagination and/or a percentage-complete indicators.

To reflect on where this approach would be suitable, think surveys, think polls and think examinations. You have the answer!

Orientation Support

We have all heard of the landscape and portrait modes on the mobile device. This orientation aspect of the mobile screen can be exploited to make form-filling an easier experience for your users. Especially if your forms need them to type in long sentences or paragraphs.

Making sure your form adapts to both portrait and landscape modes would allow users to fill in and view more detail on the screen at a time. It also reduces certain frequently-encountered issues such as, the keypad covering the text areas being filled in, or, repeated scroll being needed to reach the end of the form.

Easy ‘Tap-ability’

Given the limited space we have on the mobile screen, you cannot have giant-sized screen elements. But at the same time, having miniscule radio buttons and checkboxes that are hard to, quite literally, ‘put a finger to’ is not a good practice. Make sure that even if the radio buttons /checkboxes are small, they are easy to select. Make the entire surrounding area a ‘tap-able’ area. This must include the accompanying label and the box (if any) that houses the widget. Never limit the touch action to just the small circle of the radio buttons or check boxes. The same rule applies to other selection widgets as well.

The Floating Labels Concept

I came across this interesting snippet one day while looking for new ways to deal with form field labels. Though not very simple to implement, you can try it out for one of your apps and then re-use the code whenever you next need it.

This approach is basically using GIF animations, to have the placeholders in your fields shift position, fade in and fade out as the user progresses through the form. It makes for a smooth and intuitive experience and helps save a good deal of space on the form. Really cool, I thought!

Credits and source: Matt D.Smith and you can read more about it here .

The Virtual Magnifying Glass!

I have seen a few apps do this, especially those that run on Android devices. Form elements are compactly packed into a single screen such that only the field names are easily visible. On tap of each field, it pops out of the main form screen in a magnified avatar while the rest of the UI gets partially opaque and disabled. This magnified view of the single field will have the field name and the input widget such as, say, a text area or a list of values. The user provides the input and taps on a Done button and the magnified view gracefully returns home to the main form. A hint of the user-provided input is seen on the main form so that the user knows they need to tap the field to view the rest (in a magnified view of the input widget).

Saves tons of space!

So, as you can see, there are several ways to deal with the fine art of space management on mobile devices. We have discussed some of them but the possibilities are many and ever-evolving, as is the landscape of mobility. Have you tried something new that could be a lesson in space management? We’d love to know!

What type of app fits your mobility appetite? download to decide –

Leave a Reply

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