839255 - Update search interaction for Marketplace. (mobile only)

Status: VERIFIED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P1)

Description

[Maria Sandberg [:mushi]]

Attachment: .key - search interaction

We need to update the way search works for the Marketplace on mobile. Please see attached file (in presentation mode) to look at the new interaction.

Summary:
- Remove search button
- When a user swipes down on the screen (or perhaps after x seconds) a search field animates in from below and replaces the wordmark in the header. 

Branding has approved the changes.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

Is this supposed to be for MWC demo purposes? Or as a permanent change to the production Marketplace app?

Comment 2

[krupa raj[:krupa]]

will it be intuitive for the user to know how they go about searching for an app if there is no icon?

Comment 3

[Michael Maslaney [:mmaslaney] ([e-mail])]

I believe we decided that search would transition once the user began swipe down, much like Pinterest and/or Google+.

Comment 4

[Maria Sandberg [:mushi]]

Removing the search icon is a permanent change. We might move towards a model where we display the search field all the time, but for now this is what we're going with. If you guys want to discuss the reason for the change I'm happy to do that in person or over Vidyo.

Comment 5

[Josh Carpenter [:jcarpenter]]

(In reply to krupa raj 82[:krupa] from comment #2)
> will it be intuitive for the user to know how they go about searching for an
> app if there is no icon?

My two cents: the functionality will reveal itself as soon as the user begins to scroll, which should be within a few moments of the user opening the app, so discoverability should be excellent. In fact you could make the case that the animated transition will actually do more to call attention to the functionality than a mere icon would have.

Comment 6

[Wil Clouser [:clouserw]]

Stuart - can you look at this?

Comment 7

[Stuart Colville [:muffinresearch]]

@Maria: Apologies in advance for the long list of questions I'm still learning the ropes :)

Should this behaviour be global? (For example presumably it doesn't need to appear on search results pages (there's a search box there already) and possibly not on the settings page either).

How should the transitions appear? Should the logo move up as the search box comes in? (fwiw: The attachment for me only shows one image using preview)

Should the settings button remain where it is e.g. be visible at the same time as the search box?

Does mobile mean just mobile or tablet as well, or something more specific e.g. just B2G.

Comment 8

[Maria Sandberg [:mushi]]

(In reply to Stuart Colville from comment #7)
> @Maria: Apologies in advance for the long list of questions I'm still
> learning the ropes :)
No problem, always feel free to ask for clarification. 

> Should this behaviour be global? (For example presumably it doesn't need to
> appear on search results pages (there's a search box there already) and
> possibly not on the settings page either).
This will only apply where there currently is a search button. Should be home screen only. 

> How should the transitions appear? Should the logo move up as the search box
> comes in? (fwiw: The attachment for me only shows one image using preview)
If you run the attachment in presentation mode in Keynote it will show the transition. (You can request it from desktop if you don't have it). The idea is that the logo and wordmark fades out and the search field animates in from below. 

> Should the settings button remain where it is e.g. be visible at the same
> time as the search box?
Yep, settings button will stay the same, visible with or without search box. 

> Does mobile mean just mobile or tablet as well, or something more specific
> e.g. just B2G.
The change needs to happen everywhere where we currently have a search button. As far as I know that is mobile only, desktop has the search field displayed at all times. 

Let me know if you have any more questions!

Comment 9

[Chuck Harmston [:chuck]]

Attachment: Screencast of interaction

Attaches screencast of interaction, by request.

Comment 10

[Stuart Colville [:muffinresearch]]

Here's a pr with the search transition https://github.com/mozilla/zamboni/pull/597

Comment 11

[Stuart Colville [:muffinresearch]]

Attachment: Video of transition based on delay

Here's an attachment of a video (no audio) showing an implementation of a search box appearing based on a delay.

There was a comment raised on the pull request for the branch which asked what if the user wants to search immediately without waiting for the search box? [1] With no button it's not possible to allow them to do that.

Would it be possible to consider showing the search box based on a delay or interaction whilst retaining a way for the user to instigate the search box manually via a button?

Also I'd be interested to get feedback on the delay approach versus requiring a direct interaction?

[1] https://github.com/mozilla/zamboni/pull/597#issuecomment-13570032

Comment 12

[Maria Sandberg [:mushi]]

Michael - can you take a look and see if the video mirrors what you had in mind? It looks good to me. 

It's fine for the video that the search field is revealed after a time delay. For the real implementation the reveal should be triggered by the user scrolling down. I appreciate the feedback from the branch and I understand the concern. My answer is the same as in comment 4 :)

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

If there is time, I would make the search transition in slightly faster.

Comment 14

[Potch [:potch]]

I'm late to this party, but why are we obscuring one of the most direct and effective ways a user can obtain an app? I get to the marketplace and want that great app my friend told me about- why should I have to search or wait for search?

Comment 15

[Matt Basta [:basta]]

Can we just get rid of the logo and show a search box instead? If the user is in the browser, they can see the URL or the page title (depending on the platform), and in the app, they had to click the Firefox Marketplace name and logo on the home screen. And to top it off, they had to look at our logo for a few seconds while the splash screen is visible.

FWIW, the Mail app doesn't have a header that says "Firefox Mail" (Thunderbird?) and the Calendar app doesn't have a header that says "Calendar".

Comment 16

[Potch [:potch]]

I guess I don't understand the rationale and goal here.

Comment 17

[Potch [:potch]]

I now understand the rationale and goal here! Stuart, will update you.

Comment 18

[Christopher Van Wiemeersch [:cvan]]

Stuart, what's the ETA here? We need this by Thursday.

Comment 19

[Stuart Colville [:muffinresearch]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #18)
> Stuart, what's the ETA here? We need this by Thursday.

I was awaiting on an update following the discussion that happened on Friday. To avoid delay I'm working now on moving this to scroll based rather than timer based and addressing all the other review comments.

Here's the current version that uses scroll and fixes a number of issues.

https://github.com/mozilla/zamboni/pull/597/

Comment 20

[Stuart Colville [:muffinresearch]]

Should the transition always happen on the homepage or only once?

Comment 21

[Stuart Colville [:muffinresearch]]

(In reply to Stuart Colville [:scolville] from comment #20)
> Should the transition always happen on the homepage or only once?

To clarify: should the transition occur on every visit to the homepage or only the first visit.

Comment 22

[Michael Maslaney [:mmaslaney] ([e-mail])]

The transition should occur on every visit.

Comment 23

[Stuart Colville [:muffinresearch]]

(In reply to Michael Maslaney from comment #22)
> The transition should occur on every visit.

Ok great, that's how it works in the branch currently. (clearing the needsinfo)

Comment 24

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/bcc85ea

Awesome work and thanks for your patience, Stuart!

Comment 25

[Christopher Van Wiemeersch [:cvan]]

https://github.com/mozilla/zamboni/commit/fcd393e

Comment 26

[Cristian Boldan]

Verified as fixed in Marketplace-dev app (Unagi)
The search is displayed when the user swipes down the page.
Closing bug.