Page MenuHomePhabricator

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

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.


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

Design

iPhoneiPad
Zeplin: https://zpl.io/yOsjFZeplin: https://zpl.io/1jdRDF

Event Timeline

cmadeo created this task.May 1 2017, 8:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 1 2017, 8:34 PM
JMinor triaged this task as Low priority.May 2 2017, 11:42 PM
JMinor moved this task from Needs Triage to Design on the Wikipedia-iOS-App-Backlog board.

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.

@cmadeo I'll push a new alpha today

cmadeo added a comment.May 9 2017, 7:57 PM

Awesome, thanks!

cmadeo added a comment.May 9 2017, 9:37 PM

@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

cmadeo added a comment.May 9 2017, 9:52 PM

@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.

@cmadeo it should be up on Alpha now

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?

AMroczkowski added a comment.EditedMay 16 2017, 5:07 PM

@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?

@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.

JMinor closed this task as Resolved.May 23 2017, 8:54 PM