Page MenuHomePhabricator

Increase visibility and tap-able area for search filters
Closed, ResolvedPublic


Finding's 1 + 2

Finding 1
It is easy for users to accidentally trigger the search overlay when they mean to tap on the search filters areas


Increase tap area to 44px for the height and by 22px to either side of the text.

Finding 2
Users seem to have a hard time deciphering the filter dropdown as a link rather than a title

Increase the tap area for the search filter area to include slightly to the left and right of the label text and 5px above and below.
Potentially consider styling the title as a link:

Filter implementation on Apple news



Event Timeline

Hi @AMroczkowski just as a heads up I didn't get to take a look at this on beta before Places was removed. Should the updates also be reflected in Alpha? If not I'll review this ticket on Monday when Places is back in Beta.

@AMroczkowski would it be possible to have the filter dropdown be blue (as styled above?)

@cmadeo hm, I definitely did that. Maybe it got undone with another commit.

But yes.

@cmadeo yeah it was done here (with screenshot!)


@AMroczkowski, weird! It looks good in the screenshot.

@cmadeo a fix is waiting on code review. I'll push a new build as soon as it's merged. Sorry about that.

Thanks for the heads up @AMroczkowski, no worries at all :)


just to confirm, the color I pulled from Zeplin is rgb 39 78 192 0x274ec0

which is somewhat close to what we call wmf_darkBlueTint in the app 0x2a4b8d

just confirming that the color you want is rgb 39 78 192 0x274ec0


Ah sorry, sometimes Zeplin doesn't do the best job at pulling hex codes.
It should actually be the wmf_BlueTint (I think that's the name!) which is #3366CC. It's the same color as the selected states on the tab bar and the map/list button.

Sorry about that.

Thanks @AMroczkowski! Looks good! Would it be possible to make the chevron a bit bolder though? I had it at 1px, but 1.5px would probably look nicer with the semibold. Sorry for this change.

@cmadeo That chevron is actually an image that was already in the app. I spent awhile looking for an appropriate
character but none looked right. I can try to scale the image up a bit. If that doesn't work I might need a larger image.

Ah okay, thanks @AMroczkowski! Here's the chevron at 1.5 incase you need it:

@AMroczkowski any updates re: chevron weight? Is it possible to use the version above?

@AMroczkowski looks great! Could we just add 2px additional spacing between the text and the chevron?


So it's not straightforward to add just 2px in spacing since it's rendering as a string

This adds and additional space, which works out to be about 2px

look ok?

@AMroczkowski, ah! Sorry about that.

Yes, these look great!

ABorbaWMF added a subscriber: ABorbaWMF.

Tested on an iPhone 7+ with iOS 10.3, iPad Mini Retina with 10.2, and an iPhone 5s with iOS 10.2 on Beta App 5.5.0 (1140)

Spacing looks fixed.