[GIF] Complex filtering pattern for mobile

Argh! Just noticed that the GIF doesn't loop :-( My bad. The larger version which is attached does loop though, check that one out.

-----------------------------

Some common methods to filter product sets on mobile (iOS) are:
- Launch modal with filters in an accordion (i.e.: Target, Amazon).
- Launch modal with each filter in a nested modal or list view (i.e.: Nordstrom, Walmart).
- Launch modal and have only three filters in a segmented controller (i.e.: H&M).

In all the above, when wanting to filter a category of products, a modal is launched to display the filters. This is an understandable way to do it, but when the filter modal takes over the screen I feel like I’ve been forced to take a step away from the products to focus on these filters instead. That feels a bit disjointed since the filters are tied directly to the product set.

This shot tries to integrate products and their filters to make them feel more connected in use. There are no modals, instead the filters are revealed in a drop down from the header (or perhaps an expanding header) which doesn’t fully obscure the product set. The filters are displayed as a horizontal scrolling list (similar to eBay). This way, we can show one filter at a time which keeps the area uncluttered and allows for more space to implement more useful / functional filtering mechanisms.

Another way to think about it: the part of the screen in blue at the top manipulates the product set; the part in white below displays the product set. At all times you can see the blue and white parts.

————

The app screens shown are my ideas on an update to the PriceSpy app. PriceSpy is a price comparison tool which has a large number of filters on their website but none shown shown in their mobile app, presumably because of complexity. Some of their filters are quite useful though and would work well on touch.

The first filter shown is a slider for the camera sensor resolution which incorporates a chart of distribution. The second is the brand filter which incorporates a small indicator against each brand to indicate if that brand has many or only a few cameras in the product set.

——————

The screens were made in Sketch and Keynote, animated in Keynote and exported as a .mov, and the GIF created from Photoshop (I had to skip some steps in the animation to stay within the 500 frame limit).