I'm working on the layout for a search form that has approximately 8-10 fields. At this point, the search form fills nearly the entire viewport. My research has turned up general strategies for large mobile forms, but these seem to be geared toward various sign up forms, contact forms, etc.

The problem is that the form's function as a search tool requires that the returned results must include all of the original input fields. As a result, the first returned match would likely not appear until the user scrolls down. This seems to be far from an optimal experience.

Assuming that no more fields can be removed from the form, whats the best strategy for users to navigate search results while maintaining the ability to review their search terms, as well as perform a new search without navigating away?

Here is a screen shot of a form that would pretty closely resemble the type of form I'm talking about:
enter image description here

In re: http://www.uxbooth.com/blog/mobile-form-design-strategies/, I am sure that the right-aligned labels suggested that I had not considered that article. The decision to deviate from vertical-aligned labels was made in the interest of remedying the original problem -- reducing the vertical size of the form.

Because all of the labels are relatively short, the risk of one being cut off is reduced. Also, the font sizes, container grids, and field sizes were all modified to reduce risk of improper formatting on smaller screens. The issue of losing view of the label on focus has also been remedied by preventing automatic zooming.

I don't think combining location fields will work as well in this context. In contrast to the example from the article, the location fields aren't merely alternate paths to the same result set. Ex: if Store A is in District 1, a search for only Store A yields only results for that store, but a search for District 1 includes Store A and all others in the same district.

It is possible to update the server side handling to parse only one field and interpret whether the user typed "District X" or "Store X", etc. On balance, however, requiring the user to type in a much longer text string seems to be a less optimal experience than having multiple fields. Moreover, the unintuitive nature of one field for 4 options would require some extra instruction, thus negating some of the saved real estate. Finally, mistyped words, and thus wrong results, seem to be a very likely source of user frustration.

As far as removing location fields and relying on GPS, this approach simply won't work because users may be hundreds of miles from the locations that they're searching for.

With respect to removing unnecessary fields, you'll have to take me at my word that all of the non-required elements have been removed.

2 Answers 2


I would suggest that upon search the search panel is collapsed into a panel in the top of the search result, as depicted below.

enter image description here

The reasoning behind this is that it wouldn't be a good idea to keep the search form present and displaying the result beneath it since, as you also mentioned, this will obstruct the result. The possible solutions to this as I see it is either by linking to a new page with the result or collapsing the search form, as my suggestion propose.

Since the search panel is still accessible in this suggestion the users may review the filter parameters they set up in the same view as the result without leaving the view.

  • This is an outstanding suggestion, and likely the option I'll take. I added some info in response to the earlier answer, so I'll wait for any response before marking answered, assuming that a better answer isn't posted in the mean time. Mar 10, 2012 at 2:02
  • @user1091949 thank you, I'm glad you like it! I think MFrank2012 might be on to something, the concept appeals to me, but I doubt it would be a suitable solution for a mobile device which has a compromised screen size. Mar 10, 2012 at 12:54

For starters,I am not sure if you have read this article on UX booth about form design for mobiles which gives some excellent inputs on translating large forms into their mobile equivalent. It is briefly summarized below :

  • Label alignment: Avoid using horizontal labels (left- and right- aligned) for mobile forms. Use vertical align labels instead.
  • Remove: Get rid of unnecessary elements and features to help users focusing on their tasks. If possible, omit optional fields or
    elements which do not have primary uses.
  • Combine: Combine various similar input fields into a single field. Make sure it is clear what users can do and what they could enter in the field.
  • Improvise: Make good use of mobile devices’ built-in features such as location detection via GPS satellites to simplify your mobile form input.
  • Break into small steps: Split a long form into a few smaller steps to make your mobile forms easier to use. Use this approach sparingly.Also, try reducing unnecessary elements on each page to avoid slow page downloads.
  • Use appropriate input elements & menu controls: Replace one type of control with another which could simplify the form and its interaction. Prioritise mandatory content and fields, and avoid over emphasizing optional fields or those which are only useful for a very small group of users.
  • Choose appropriate list selections: There are two main ways to present a list selection: locked drop down (in alphabetical or non alphabetical order) and open predictive search. Both have pros and cons. Choose the appropriate list selection based on your field and selections.
  • Set sensible defaults: Provide some default selections where appropriate based on the context in which your forms are used.

That said,is there a way for you to combine multiple fields into one.

E.g. Area,region and district can be perhaps combined into one field since they are all drill down into location. As stated in the summary above,perhaps you can use the phone's GPS feature to determine the region and other fields

If that is not possible,an approach for you would be to have your data retrieval in a two step process.The first step process shows your mobile form as given below :

enter image description here

And users on filling it up are presented with a grid view which displays the results as given below

enter image description here

The thing to note here is that all the fields will have their initial values displayed and they are editable enter image description here

Now I know this approach isn't optimal and I strongly am doubtful about the ability to show a 8 column tabular field but this is an option you can look at.

I would really welcome discussion about this approach of allowing free form text (in the parameters) to directly update the results content.

  • I would agree that it probably would be a good idea to combine some search fields, such as the LOCI, as you mentioned. I'm a bit concerned however that the table you depict will have quite small cells, especially for the text fields, and may be hard to click on a 4" screen. But I liked the idea of having interactive fields right beneath the header, so it's a +1 from me! Mar 9, 2012 at 9:27
  • Made an edit to my post in response to your suggestions. It was too long to fit in the comments. As far as the grid view suggestion, I really just don't think this is feasible given the small size of the screen and number of fields. Mar 10, 2012 at 2:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.