What is the optimal layout for a mobile search form with a large number of fields?

Question

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:

EDIT:
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.

Answer 1

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

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.

Answer 2

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 :

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

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

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.