Compare forms: Neighborhood selector

This is a comparison of two different search interfaces designed to enable a user to use “neighborhood” as a criterion. Example “A” is part of of a City of NY Restaurant Inspection Information website. Example “B” I created for the City of NY online Training Provider Directory. In both cases there are multiple search criteria available, of which “neighborhood” is only one. Let’s take a look:

Example “A” confuses the user with two competing methods for browsing neighborhoods, along with a “Neighborhoods” text link that still appears to be active. Can the keyword search be combined with a neighborhood “browse”? What search criteria are hidden in the multiple drop-downs? Why is sorting done on the search screen instead of the results screen? What should I do with all these action buttons?

Example “B” expands functionality (by allowing the user to select multiple neighborhoods) and simplifies design (no mysterious combinations of drop-downs and action buttons). Visually the various search criteria are handled equally, suggesting that they are additive. Neighborhood selection is done with a single-click on an item, and reversed just as easily. The arrows between the selected and available boxes are not buttons (because of the single-click selection method buttons are not needed) so they do not look like buttons, they have no bounding box and are slightly grayed-out. Overall this solution is more powerful, simpler, and creates a better user-experience.