Another push/pull question

I’m building a prototype for a search page. This has some filters that appear in a collapsible panel as checkboxes. When you select one, a little button appears on the main area to show the selected filter. If you click on the cross in this, it disappears and the checkbox gets unticked. All good so far!

There are quite a few filters and, if more than 5 or 6 are selected, it will need to go onto 2 rows. At the moment, I’ve got all the little buttons placed on top of each other so it builds nicely by pushing the widgets to the right/pulls from the right if they are unselected.

Can anyone think of a way of doing it so that once a set width is filled, it pushes below so that you get 2 rows?

Should I bother?

We’re going to user test the page. The task could just be:

  • Open the filter panel for ‘Place type’, filter by ‘Houses’ and ‘Castles’
  • Remove the filters

We want to test whether or not the filters are usable and findable. Does it need to work 100% like the final product will?

Hard to know when to stop sometimes!

You have to use logic conditions to make it. I mean: yes it’s possible to do with “area of widget” condition (Monosnap) and “Move” action.
If you’ll not able to do it by yourself, just write me back and I’ll help.

Yes, of course! Axure RP is made for such tests.

Just do it! :slight_smile: Don’t stop :sunglasses:

I think it’s unlikely that one row vs two rows of filters will have any significant impact on your usability test for the filters. I would just model the prototype to only ever need one row of filters and save the second row wrapping behavior for a developer.

Yeah, I think you’re right. Sometimes it’s tempting to keep going. But then you almost end up building the entire website. The prototype I’ve built is pretty comprehensive in terms of functionality and definitely allows us to test the original hypotheses.