handle facets on mobile

[paulswartz]

The facets take a big chunk of the page on smaller screens. Some things I can think of:

• have the facet popup roll up to just show a title, and then tap on it to unroll
• have a set of tabs at the top (like Pantry Pickup) and include a "Filter" tab
• have an icon at the bottom to reveal the facets, and a close button to hide again

[paulswartz]

I mocked up two versions of this UI while I was waiting for the Red Line to figure itself out this morning:

This one uses some of the desktop idea @WheresHJ had on Tuesday. There's a filter bar just below the menu bar. When clicked, it shows the existing filtering UI, with an 'apply' or 'filter' button at the botton. When clicked, the active filters appear as bubbles with either the name of the value, or the name of the facet categories (haven't quite decided which is better).

This one changes around more of the UI. It moves the search UI to a bar at the bottom, and adds a Filter button next to it to pull up the UI. When the filters are activated, the button changes color (and perhaps name?) to indicate that the filtering is active.

[paulswartz]

I also did a simple version:

Instead of big UI elements, there are just simple buttons at the bottom. One to open the filtering UI, the other to open the search box.

[WheresHJ]

I tend to not like primary action buttons at the bottom of a webapp because
there can be a slight usability issue due to the proximity of the web
toolbar (on iPhone) or the physical buttons (on Android). However, the
just-button idea is interesting - you'd have to make the buttons very
visually distinct from the map.

Harlan Weber
Designer | Researcher
http://www.hjweber.net

On Mon, Mar 10, 2014 at 8:30 PM, Paul Swartz [email protected]:

I also did a simple version:
[image: picture]https://f.cloud.github.com/assets/214921/2380873/3820ab6e-a8b4-11e3-9ec6-3099b8eab676.jpeg

Instead of big UI elements, there are just simple buttons at the bottom.
One to open the filtering UI, the other to open the search box.

Reply to this email directly or view it on GitHubhttps://github.com//issues/68#issuecomment-37251431
.

[paulswartz]

@WheresHJ: