Nested multiple selections

Question

I am building a web application that allows users to search a gym chain's class timetables. This gym has multiple branches, in multiple states and cities. The inputs to the class timetable search are:

Location - user can select multiple gym branches (there are over 100 in total) to search for - they can be in any state and city

Class type - can select multiple class types (only around 10 class types) e.g. Body Pump or Spin

Day of week - can search as many days of the week, default selection is all days

I would like to restrict the number of gym clubs the user can select to maybe 5 - I don't want to have a case where my application is searching hundreds of timetables.

The part I am most struggling with is the location selection - I don't want to have one long page of checkboxes and I want the user to know which clubs they have selected so far.

Answer 1

It is most likely that people will only be interested in branches close to their location so offer them a 'search for branches near my location'. If this was a mobile app then I would even make this automatic.

You can return either all results as it is unlikely that there will be too many for a given location or only return the top 5.

^{download bmml source – Wireframes created with Balsamiq Mockups}

It is worth keeping things familiar rather then trying to do something 'clever' which may not be obvious.

Please note that I have also left out showing the final results as I feel that this would be a different question (and quite an interesting one!).

Answer 2

Location

Make it a auto-suggest drop down menu and give placeholder as 'Type to search' in it. Once the user has selected it, it will become a label and give an 'Edit' button to change the selection.

In case you want multiple locations to be selectable, then make label a 'Hyperlink' which will turn into a textbox once clicked and 'Add' button rather than 'Edit'

Class type

As you mentioned that there are only 10 options and multi-select is required, so assuming that number of class types are going to increase so give checkboxes for each class type. In case class types are going to be static then you can also give a multi-select dropdown, though I feel checkboxes are more convenient.

Day of the week

Give eight checkboxes - Seven for all days of the week and one for 'All' selection.

Answer 3

The store selector for any supermarket should work for setting the location - i.e. do a post-code / zip-code / town search and return the closest 5. From their they can select each one and view the time tables.

It may be simpler to do away with the day of the week selector if you can fit all the timetables on one page.