I am looking to modify the "faceted filter" on our schedule page and would like some input on what kind of UI elements I could use to enhance the experience. The current one is woefully bad and the city/miles section really doesn't work correctly, it was originally built using zip codes and converted to using cities.

What would be some good UI elements to use here and how would you see this thing working?

The URL is http://www.scic.com/schedule

The page does not validate, please don't crucify me for that, I only started work here a month ago.

I have been building a demo using the multiselect widget ( http://www.erichynds.com/jquery/jquery-ui-multiselect-widget ) for the states but not sure what I should use for the other parts.

  • 4
    Can you ask a bit more of a focused question? This is a pretty general "design my interface for me" question as it stands now--the more specific you are, the better we'll be able to help. – Alex Feinman Aug 9 '11 at 13:34
  • If you'd have looked at the site, you could see how my question wasn't really as agnostic as you have determined. – MB34 Aug 9 '11 at 14:09
  • 6
    As @Alex stated, this is a UI critique request, which is not really allowed on the site for multiple reasons. If you have specific questions to ask, then ask those. – Charles Boyung Aug 30 '11 at 18:44
  • 2
    This isn't really a suitable question. You should edit your question so that it asks about, say, one specific set of UI elements and patterns, or asks about one aspect of your design. SE isn't really built for discussions. – Jimmy Breck-McKye Aug 30 '11 at 18:49
  • 1
    I agree, this question is not a good fit as it stands. I posted my thoughts in chat. – Patrick McElhaney Aug 31 '11 at 12:38

My first question would be how frequently is a user going to want to see classes for multiple states? Maybe that doesn't need to be so large and multi-select but rather a dropdown. I would, however, have state come first (regardless of if it is multi-select) and have the city drop down filter to only show the cities in that state (or those states). This kind of just goes with the filter from big things down to little things.

Second I would propose that instead of [city] within [25 Miles] which is a bit confusing, instead say within [25 miles] of [city].

I like the dates selector but it feels a little weak at this point. There is also the problem of not seeing what you actually have selected. (e.g. I clicked 2011 and see aug, sept, oct, nov selected but really the whole year is selected) Also, if I do click 2011 it shouldn't invert what I have selected already for that year...

| improve this answer | |
  • We have thought about moving the state above city and filtering cities in the selected state, sure. – MB34 Aug 9 '11 at 17:53
  • We also would rather have the location search, with the miles, to be from zip code. We have functionality to get the zip codes within a radius of another zip code, then we would display all cities with those zip codes. There are some good suggestions here, thanks. – MB34 Aug 9 '11 at 17:54
  • As an improvement to the month picker I would suggest possibly using an interface more in tune with this one lucianocosta.info/jquery.mtz.monthpicker – Matt Lavoie Sep 6 '11 at 13:46

It's not a fully comprehensive answer but I reccommend using an auto-complete search field for the city e.g. the jQuery UI element.

I found using the city field that it was monotonous and took far too long to reach the bottom, I suggest using the autocomplete element which will let users search for their city and results will be shown as they type.

| improve this answer | |
  • We really need to do away with it because it really is by zip code. The query to load it looks like this: SELECT DISTINCT(LocCity),LocZipCode FROM exp_course_events order by LocCity – MB34 Aug 9 '11 at 17:57
  • BTW, I didn't write it, I'm just in charge of making it better. – MB34 Aug 9 '11 at 17:57


Currently the arrows moving the months shown are not intuitive (it's not immediately clear whether a click on an arrow shifts 4 months or 1 month at a time).

Recommendation: it would be better to show dates in a famiiar calendar format. See the Calendar Picker pattern. I'd suggest the jQuery UI Datepicker with the date range option as a plugin.


At first, there is a distinction between searching by distance from a city OR by selecting a state. Logically, these two are on equal levels, but currently they seem to have a parent > child relationship. Also, the "online courses" choice is only under state, but it should be available in both city and state.

Recommendation: Use a Modular Tabs pattern. One tab = City/Zip. Use a Combobox for city and a text box for ZIP. Other tab = State. Include the "online courses" checkbox in each one.

Select Program(s)

The multiselect widget is nice here, but a user can't see current selections when the accordions are closed.

Recommendation: Show the selection when the top-level program categories are all closed (maybe keep a category open if it has active selections in it). Also allow selection of a the top-level program category without having to open it. Use a pattern similar to Basecamp's project permissions settings.


The "Clear _ Selection(s)" feature on each group is nice. Might include a global "clear selections" as well.

| improve this answer | |

I think you should simply use the faceted filter with the count which will be much more easier to navigate.

| improve this answer | |

City, miles lists

IMO you should replace double triangle (arrow) (up/down) with one arrow (down). I try to click up or down to change value in list (ex. city) but it only expand list. So it should be a single triangle in this kind of functionality.

State list, Programs list

Consider adding a text box above list with states and programs for filtering checkboxes.

When user select a program it should appear above program lists with a controll for remove selection and remove from selected programs list.

Only Clear Program Selection checkbox is not enough for me.


You should show to the user how many 'pages' in current listing are. Ex. 'Page 1 of X'


Remember Search Param, make font bigger and put it into white panel (filter panel).

| improve this answer | |

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