Marker Filter UX Improvements [Design Input Needed!]

[jasonkalmeida]

Marker Filter needs:

• More understandable UI regarding turning a marker filter off

[jasonkalmeida]

Just wanted to clarify things here.

Right now, when a user clicks on a location marker, the Event List is filtered to events at that location (a single location/venue can have multiple events).

There are two things I really want to tackle with this issue:

• A more clear representation of what is going on. I'm no designer, but my first thought tag under the search bar indicating "Events at X Location"?

• A more clear way to get out of the filter. If we implement the tag solution mentioned above, maybe an 'X' beside it to close it? Not sure. Right now the user just has to click any other part of the map, but that's not the most clear way especially for users who aren't used to other map UX's.

[Hucxley]

Why not increase the size of the single marker by...say 50%, open a floating panel next to it with the event details on it on a higher z-index, decrease the opacity of the other markers by 50%, and add an X to close the event detail panel that popped up next to the event. You could even set the event detail panel to open in whatever direction (left, right, top, bottom) that has the most space to accommodate it (to help with responsive design needs).

I'd jump on this task, but I know nothing about React. I've learned Meteor, Ember, and Vue, but always disliked React, so I never put any time in learning it.

Another approach I might take with Vue would be to have a list of all events styled a certain way, and create an overlay for the $selectedEvent. when someone clicks on an event, it would become the $selectedEvent, and the overlay displayed over the other events. So, you could click through to other events to change the event in focus, and provide more details about the $selectedEvent and a different visual presentation for the UX/UI cues regarding which marker is active.

[danielnarey]

• I think the interaction of clicking on a marker and seeing only the events at that location is pretty natural, so I’m not convinced that this needs to be explained to the user.
• I do think it would be helpful to have a way of unselecting other than tapping elsewhere on the map, but that could be as simple as having a link-styled button appear at the end of the filtered event list that says “See all events”. - Having that button appear would also serve as an indicator that the list is being filtered.

[chief-dweeb]

A couple of comments after messing around with the map. BTW I used zipcode 02140, and one of the interesting points is Porter Square Books which has two pins, one of which has several events associated with it.

• The example of Porter Square Books shows (I assume) that there can be multiple events at the same place for two different reasons: 1) the actual Mobilize event has multiple times associated with the event (recurring event?) and 2) there are more than one Mobilize event at the same place (different kinds of events?) . At present, this appears to the user initially as a pin with another pin beside it and a little offset vertically which reads pretty well. If you zoom in, the two pins separate which also makes sense. What would be cool (but perhaps not necessary) is to have the pin for the recurring events have a distinct icon that always had what looked like another pin just behind it to indicate that the pin represented multiple events.

• If there can be multiple pins (multiple real Mobilize event records) for the same place, resulting in overlapping pins, should clicking on a pin cause all of the overlapping pins to be shown in the list of cards? Stated differently, if a user's click is ambiguous (which pin did the user mean?) then shouldn't we show all of the pins the click might have targeted?

• Under what circumstances should the map zoom automatically? If the user manually zooms at some point, should we disable automatic zoom? This point arises when the user zooms in to separate pins only to have the map automatically zoom back out again as soon as the user clicks on one of the pins, which I found annoying.

• I agree that it would be nice to help the user understand that clicking on the map where there is no pin will restore the list of cards, and the suggestion that we just put a button in also seems reasonable. I would put it at the top of the list with a label saying: "Showing events a clicked location: " but that is just my opinion ;-)

• I also think that a key would be a useful device: both for making the different styles of pins make sense, but also to support filtering which pins are shown. The idea would be to have a way for the user to show what the current filter is (showing something like a list of filtering options with checkboxes?) and a way to change what is being filtered.

That's it for now...