Page MenuHomePhabricator

As a user I would like searching wikipedia to be a prominent option when I first see the Application
Closed, ResolvedPublic

Description

User story
As a user who knows what I want to search on wikipedia, I don't see a prominent search on the Explore tab.

Design

Video

Fast scrollSlow scroll (click to view gif)

Mocks

Details

  • Exposed search field is only shown at the top of the feed (not exposed when users scroll up and down lower in the feed)
  • Animation should track with scrolling, snapping is okay if the user pauses mid transition (ala Safari)
  • Tapping into the exposed search field triggers the search overlay
  • Currently no animation transition is defined from clicking on the exposed search box to going to the search overlay. This will be designed and defined after user testing.

Event Timeline

JMinor triaged this task as Medium priority.Mar 22 2016, 9:48 PM
JMinor added a project: iOS-app-v5.1.0-Saturn.
JMinor moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.
JMinor raised the priority of this task from Medium to High.Oct 24 2016, 6:45 PM
RHo added a subscriber: RHo.

Next steps:

  • Mock-up on 4-inch screen
  • Try with white
  • Try with black (or grey)
  • Accessibility

Center align the text in the search box

cmadeo added a subscriber: cmadeo.

For localized wordmarks in the future would it be possible to grab files from the server? Or would all of the SVGs need to ship with the app?

This is more a tech question, but my ideal would be to have a local version
of English, and then download additional languages as needed. Partly also
depends on what web and android do, as shared effort/use would make a
backend more worth building.

@AMroczkowski this is looking really good! I realize that the slow gif above is a not working, but would it be possible to have the search text field fade as it folds under the header?

https://youtu.be/0L2RZVr7E04

Just a note to say this looks great. I actually think the transition into the search UX from this works pretty well as is.

I hope this helps users find their way to search!

@AMroczkowski this is looking really good! I realize that the slow gif above is a not working, but would it be possible to have the search text field fade as it folds under the header?

https://youtu.be/0L2RZVr7E04

@AMroczkowski Just moving this back to 'Ready for dev' for the search text fade discussed above. Otherwise this is looking great!

@cmadeo it was actually over the weekend, just need to push out a build :)

@AMroczkowski would it be possible to have the fade occur a bit sooner in the scroll up? It would be great to have the opacity be at 50% when only half of the text box is visible.

@cmadeo it was actually at 50% when half the text box was visible

However, I made the search box (and only the search box) fade more aggressively

https://youtu.be/4kBptsNkJo4

This looks great @AMroczkowski! Sorry that I had my opacity ratios off.

Device: iPhone 7 (iOS 10.3.1) - will check other devices later
Wikipedia app: Version 5.5.0 (1141)

I can't say this is fixed yet as the screencap shows that the search bar is not visible when scrolling down to the Top Read section. Also the Wikimedia Apps/iOS FAQ says there is no color customization in the app yet (only Android has it right now), so when @cmadeo said "try with black (or grey)" I suppose that meant changing the entire iOS interface to dark mode which can be done in Display Accommodations of the Settings.

@Nicholas.tsg the search bar is supposed to be hidden as you scroll. Search is still accessible from the magnifying glass icon in the top right

ABorbaWMF added a subscriber: ABorbaWMF.

Tested on iPhone 7+ with iOS 10.3.2, iPhone 5s with iOS 10.2, and iPad Mini 2 Retina on 10.2.1 on App version 5.5.0 (1142)

This one is fixed.