Posted by:Nithin Rao April 29th, 2014

This post is part of a series (read parts 123 and 4 here) on building forms in mobile apps.

In the last post, we saw why we must minimize the typing effort needed from users in mobile app forms and a few ‘how’s. In today’s post, let us look at some widgets that can be used for providing input in the form of selection from a set of given options. These have worked wonders for the mobile landscape and we’ll see how we can leverage them to improve the mobile form-filling experience.

As far as possible, design your mobile form to capture input by means of selection of one or more of a set of predefined options. This is advantageous not just to the user because it saves them the effort and time of keying in values themselves; it also works good for you as you can collect and organize data in a clean and structured way.

While conventional radio buttons and checkboxes can be replicated on the mobile screen, they would take up a lot of valuable screen space besides having the user perform lengthy scrolls if there are several options. Mobile app designers should thus look at other ways to creatively support the same single-select and multiple-select functionality that these widgets offer.

Picker wheels, lists, tables, grids and action sheets – all of these can be creatively designed for the small screen of a mobile phone and programmed to support either the single select or multiple select actions. Picker wheels have stood the test of time and make sense when we have too many form elements and thus face the handicap of limited space on the screen. A picker wheel will elegantly hide itself once the user is done so that way you save space.

Try the picker wheel even for fields for which you would normally use a text input, such as, for example the country code in phone numbers. A lot of people still ask the user to enter digits here. You could just give a picker wheel of all country codes – with the country name, the code and the + sign all included. This would ensure that the input is in a sureshot correct format apart from helping people who have doubts about a country’s phone code.

Also, you can program your picker wheel to be one that has multiple columns thus allowing the user to make several selections before closing the wheel. If the columns are logically interdependent, make your picker wheel smart enough to refresh the values in one column when the value selected in another changes. We did an app where we allowed users to see the properties and dimensions of pipes manufactured by our client. The user needs to select size and a parameter called ‘pipe schedule’ from the picker wheel and the screen refreshes to show the properties of a pipe that has the selected size and schedule. Now the sizes and schedules were interdependent. For every size, there could be only a certain set of schedules and vice-versa. We programmed the picker wheel to refresh the schedule column for every size selected and the size column for every schedule selected. It works flawlessly.

For iPad screens, having the picker wheel slide up the way it does on an iPhone could mean an awkward appearance and also a waste of screen space that you could better utilize. Instead, opt for a popover widget. A popover is a small-sized window that comes up over an existing screen and you can program its dimensions to complement your app design. Use popovers to appear over an existing screen when the user taps a selection field in a form. Have table views, action sheets and picker wheels snugly placed in them. The user just needs to make their selection and dismiss the popover by tapping anywhere else on the screen. It is neat and clean and helps keep the main screens of your app uncluttered.

Having stated the above, we also tell you to not totally rule out the conventional radio buttons or checkboxes. Use them when the number of options you have are less. Let’s say you have 3 options for selection: green, blue and yellow. This can easily be a radio button that will hardly occupy any space on your screen. Using a picker wheel here would be unnecessary. Split buttons and toggle switches can also function as variants of the good old radio button.

If you have a very long list of options to offer for selection, you should mull over the idea of whether it would be simpler to simply have the user type in a word rather than have to scroll a few hundreds of options you have and then finally make a selection! At the end of the day, the aim is to save the user’s time. So if you think it would be easier to simply have them key in text, go for it!

Picker wheels, lists and table views are the best options to go with when you have a medium-sized list. You can make list selection easier by grouping similar options under category headings. Let’s say you want the user to select a car type for a cab service. You have all kinds of cars available. You could make selection easier for the user by grouping the car names under various categories of cars such as Sedans, SUVs, Hybrid Cars, Luxury Cars, Sports Cars and so on.

A new trend in grouping list items is to have the group name anchored to the top of the screen while the list under it is scrolled upwards! As the last item of the group is reached, the anchor changes to the new group name and the list below it is refreshed. This makes the whole exercise of scrolling much more convenient so that the user doesn’t lose context in the multitude of options they are seeing!

And most importantly, don’t forget to have a Search bar at the top of your lists that will help the user quickly narrow down on a name if they happen to already know what they are looking for.

As you work on your next app, try out some of these options and see what works best for you. We’ll catch up again in the next post!

So, eager to learn more about Mobility ? Deep dive into your topic of interest !

Leave a Reply

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