protyping a search form

31 Jan 2011 - 10:27pm
3 years ago
4 replies
716 reads

I'm just seeking a bit of prototyping advice.

I need to build a search form with a number of different criteria to narrow the range of results.

(Female/male; Age ranges; Physical location; etc)

What would be a good way to prototype this?




1 Feb 2011 - 4:05am
Danny Hope

Pencil and paper, then HTML (+ a bit of jUery if you need it to actually work).

You could also consider using faceted navigation as an alternative to forms.

4 Feb 2011 - 8:06am
Louise Hewitt

What do you need the prototype for?

If you are testing the dynamic behaviour / creation of filters etc then you'll need a backend data set to plug in

If you are user testing the concept (i.e do people know what to do with the form) then paper, html all good.

BTW, generally speaking though, Danny's right - it seems users will typically search first, then narrow/expand, rather than preset constraints (i.e. use an advanced search form like you suggest). I've observed this being the case even in highly specialised environments (academic repositories etc), where either users used the search box only first, then - if there were no faceted nav/filtering options post search - used the advanced search as a fallback only OR specialist searches used boolean operators in the search field rather than the form elements.

Best of luck


On 1 Feb 2011, at 11:42, Danny Hope wrote:

> Pencil and paper, then HTML (+ a bit of jUery if you need it to actually work). > > You could also consider using faceted navigation as an alternative to forms. > >

11 Feb 2011 - 9:10am
James Torio

Before you start to protoype you may want to first think of the use case(s) becuase they can influnce both what content is being displayed and how the user interacts with the content. 

At a high level who is conducting the search, what type of device are they using what is the context, what are their goals?

This can be a starting point to guide your design.

I have found that rough sketehces can get a conversation moving and helps to ask  and answer questions with users and clients, then quickly move to front end code to test interactions. 

11 Feb 2011 - 11:54am

I've been doing pretty intense data filtering screens lately. Know what your users' goals are and in what context, first and foremost. Domain knowledge is important so you know which filters and controls need to be on the forefront and which you can hide if you have space issues. If you have specific filter selections, you can take a look at Amazon, Best Buy, New Egg, etc., to see creative filtering. Then apply general heuristics. Try not to put more than 7+-2 items in a particular control. If you need to, then try to expose them all in an understandable order. Make it obvious what the search box is actually searching and make sure both keypresses and mouse clicks get the user where they want to be. Usability testing on highly functional pages is very enlightening.

Your question was more about process, though.

Personas (if needed) -> Use Cases -> Sketches -> Research/Testing -> Prototype -> Testing -> Repeat

Quick answer, hope it helps if even a bit.

Syndicate content Get the feed