Are there good UI patterns for designing search forms with many fields? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 4 years ago.

Improve this question

I'm having a difficult time finding any resources that describe good UI patterns for large search forms. I have a form that requires 20+ possible inputs and can't come up with a design I feel good about (although in my defense I'm no design expert). In my case I'm loo开发者_如何学Goking for a web solution, but I imagine a UI-pattern for this scenario is probably platform-agnostic.

I've looked at some sites like Google and Amazon (advanced searches) and am wondering if there are better ideas. Any suggestions?

---

I think google advanced search is a good starting point.

You might want to bear in mind the following things:

1. Make sure you are clear about the need for each field in the form. They may all be completely necessary, but if some are not, then they could be making the form unnecessarily complex.

2. Try to group your questions into logical areas using fieldsets and separate them visually on the page. This should make it easier to process the form.

3. You can try hiding areas of your form using javascript to make the initial view less confusing. Although this risks confusing users if the controls for showing those sections are poorly labeled.

4. Make sure you try out your design on as many people as possible - ideally from the community who will use it.

Some resources to consider:

I realise there are some specific challenges in search form design, but the following resources ought to be of some help.

• Forms on UI patterns

• Wufoo - form designs for many different purposes, but there may be something of use to you there.

• Luke Wroblewski's book Web Form Design is a great starting point if you're trying to develop your knowledge of how to design and layout forms. If you haven't time to get hold of the book, his website also has some helpful pointers.

• If you want to go deeper, you could also consider Information Architecture for the World Wide Web by Louis Rosenfeld and Peter Morville. A bit old now, but has some excellent chapters on designing a search system for a web site.

---

Have a look at progressive disclosure (see here and here and here) and responsive enabling. It also helps if you have good defaults. Have a look at the other patterns for "getting input from users"

---

Usually you can split up your search fields into two groups:

• one that contains input fields that will be used most of the time, normally the lesser part (in my experience up to 30% of all fields)
• a second one, that contains the other (not so often used) fields

If you could apply this split to your problem, it should be easy to do a frontend containing the first group of input fields, and then a second one which would open/extend on demand. I'm not a web developer, so I can't tell you how difficult it would be to get this UI behavior.

---

Any shopping(nextag.com, become.com, froogle.com, shopzilla, ebay, etc) site would do this business. However, my idea is to create a tooltip and take the input and after submitting(a button on tooltip) the tooltip will disappear and the result would come at the parent page.