Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 3 down vote favorite
2

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.

share|improve this question
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
show 1 more comment

closed as not constructive by JonW♦ Mar 23 '12 at 9:27

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or specific expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, see the FAQ for guidance.

5 Answers

up vote 1 down vote

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.

share|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
up vote 3 down vote

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

share|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
up vote 1 down vote
+50

Dates

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.

Location

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.

Overall

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

share|improve this answer
up vote 0 down vote

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.

Pagination

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

Other

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

share|improve this answer
up vote 1 down vote

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

share|improve this answer

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