Page MenuHomePhabricator

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

Assigned To
Authored By
cmadeo
May 1 2017, 8:34 PM
Referenced Files
F8100284: Screenshot 2017-05-16 13.06.23.png
May 16 2017, 5:07 PM
F8100287: Screenshot 2017-05-16 13.06.13.png
May 16 2017, 5:07 PM
F8100168: Screenshot 2017-05-16 12.46.38.png
May 16 2017, 4:49 PM
F8100169: Screenshot 2017-05-16 12.46.36.png
May 16 2017, 4:49 PM
F8040809: chevron.pdf
May 11 2017, 6:25 PM
F7863746: Place iPad - B 01.png
May 1 2017, 8:34 PM
F7864231: Screen Shot 2017-05-01 at 1.33.17 PM.png
May 1 2017, 8:34 PM
F7761721: 01 Redo search.png
May 1 2017, 8:34 PM

Description

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

Video: https://www.usertesting.com/highlight_reels/iztfQ5MMqu2EQJv69qCq

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

Screen Shot 2017-05-01 at 1.33.17 PM.png (431×980 px, 172 KB)


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

Suggestion
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
IMG_1926.PNG (1×750 px, 1 MB)

Design

iPhoneiPad
01 Redo search.png (1×750 px, 832 KB)
Place iPad - B 01.png (1×768 px, 1 MB)
Zeplin: https://zpl.io/yOsjFZeplin: https://zpl.io/1jdRDF

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!)

weird

@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 :)

@cmadeo

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

@AMroczkowski

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?

@cmadeo

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?

Screenshot 2017-05-16 13.06.23.png (166×564 px, 17 KB)

Screenshot 2017-05-16 13.06.13.png (281×564 px, 33 KB)

@AMroczkowski, ah! Sorry about that.

Yes, these look great!

ABorbaWMF subscribed.

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.