1049206 - Design for the "blank state"/"first run" experience when user has no search history

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: Search Activity, defect, P1)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: XXHDPI - Mobile - First run.png

After the user clears their search history, they're left with a rather blank looking screen. I put together a simple page that would just put up an icon with some introductory text. This page has the same layout as the "No internet connection" error page.

Comment 1

[Aaron Train [:aaronmt]]

Swiping up from the home button is not applicable on many devices with different launchers, and home button configuration.

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Aaron Train [:aaronmt] from comment #1)
> Swiping up from the home button is not applicable on many devices with
> different launchers, and home button configuration.

Fair point. I can come up with different copy for that.

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

^ If we launch into typing mode, this significantly changes what we do for the "blank state" (note to self)

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: XXHDPI - Mobile - First run 2.png

This might be more of what it looks like since we want to jump right into keyboard active state on "swipe up"

Comment 7

[:Margaret Leibovic]

antlam, do you have resources I can use for the fox icon?

Comment 8

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: img_foxes1.zip

Foxes! :) (included are happy and neutral, I have a depressed fox but we don't need that yet I think hah)

Comment 9

[:Margaret Leibovic]

I haven't had the chance to get started on this myself. This could be a good first search activity bug for someone!

Comment 10

[:Margaret Leibovic]

Taking this back!

Comment 11

[:Margaret Leibovic]

Attachment: screenshot w/ keyboard up

Here's my first pass at this mock-up. I think we should try to improve the text we have here, since it feels a bit long-winded. It also feels kinda awkward that it ends with a preposition.

Comment 12

[:Margaret Leibovic]

Attachment: screenshot w/ keyboard down

I just centered the contents of the view vertically, so they shift down when the keyboard is down. What do you think of this?

Comment 13

[:Margaret Leibovic]

As much as it's fun to play with fox icons, what would you think of using the Firefox logo here instead? It might help us add some more branding to the app, since right now it's hard to know that this thing is a part of Firefox. Just a thought.

Comment 14

[:Margaret Leibovic]

WIP here: https://github.com/mozilla/fennec-search/pull/77

I'll wait until we refine the design to ask for review.

Comment 15

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8483085 [details]
screenshot w/ keyboard up

This is looking good!

The line height seems a bit cramped though. What's it currently set at? 

Can we also try having the header set with Roboto Light (20sp, #363B40)?

Comment 16

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8483088 [details]
screenshot w/ keyboard down

Seems a bit low overall... Is the padding for this set from the top or bottom?

Comment 17

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #13)
> As much as it's fun to play with fox icons, what would you think of using
> the Firefox logo here instead? It might help us add some more branding to
> the app, since right now it's hard to know that this thing is a part of
> Firefox. Just a thought.

I'd definitely be open to it. We could try that and still use the happy fox for right after the user clears their history or something too I guess.

Comment 18

[:Margaret Leibovic]

(In reply to Anthony Lam (:antlam) from comment #15)

> The line height seems a bit cramped though. What's it currently set at? 

10dp between lines.

(In reply to Anthony Lam (:antlam) from comment #16)
> Comment on attachment 8483088 [details]
> screenshot w/ keyboard down
> 
> Seems a bit low overall... Is the padding for this set from the top or
> bottom?

It is centered vertically, but it may appear off because the top of the view is actually below the underline on the search bar (you can see the extra room below the underline if you look at a results view). I can try offsetting it by this amount.

Comment 19

[:Margaret Leibovic]

Attachment: (v2) screenshot w/ keyboard up

This is where my patch is at after our conversation on IRC earlier today. What do you think?

Comment 20

[:Margaret Leibovic]

Attachment: (v2) screenshot w/ keyboard down

Comment 21

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8483857 [details]
(v2) screenshot w/ keyboard up

I like it! good call on the 16 sp font size too :)

Comment 22

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8483858 [details]
(v2) screenshot w/ keyboard down

ship it!

Comment 23

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #11)
> Created attachment 8483085 [details]
> screenshot w/ keyboard up
> 
> Here's my first pass at this mock-up. I think we should try to improve the
> text we have here, since it feels a bit long-winded. It also feels kinda
> awkward that it ends with a preposition.

I still have to take a look at this but, what's the rationale behind adding "local" in front?

Comment 24

[:Margaret Leibovic]

(In reply to Anthony Lam (:antlam) from comment #23)
> (In reply to :Margaret Leibovic from comment #11)
> > Created attachment 8483085 [details]
> > screenshot w/ keyboard up
> > 
> > Here's my first pass at this mock-up. I think we should try to improve the
> > text we have here, since it feels a bit long-winded. It also feels kinda
> > awkward that it ends with a preposition.
> 
> I still have to take a look at this but, what's the rationale behind adding
> "local" in front?

Oh, the header is just using the &brandShortName; entity, so on Nightly it would be "Nightly Search" and on release it will be "Firefox Search". It's just "Local Firefox Search" since that's the brand name we added for the standalone activity when you build it.

My concern is more over the copy below that header.

Comment 25

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to :Margaret Leibovic from comment #24)
> (In reply to Anthony Lam (:antlam) from comment #23)
> > (In reply to :Margaret Leibovic from comment #11)
> > > Created attachment 8483085 [details]
> > > screenshot w/ keyboard up
> > > 
> > > Here's my first pass at this mock-up. I think we should try to improve the
> > > text we have here, since it feels a bit long-winded. It also feels kinda
> > > awkward that it ends with a preposition.
> > 
> > I still have to take a look at this but, what's the rationale behind adding
> > "local" in front?
> 
> Oh, the header is just using the &brandShortName; entity, so on Nightly it
> would be "Nightly Search" and on release it will be "Firefox Search". It's
> just "Local Firefox Search" since that's the brand name we added for the
> standalone activity when you build it.
> 
> My concern is more over the copy below that header.

Gotcha - let me think about that copy.

Comment 26

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I think I was over thinking it. Let's go with "Quickly search for anything you want" :)

Comment 27

[:Margaret Leibovic]

Attachment: Empty view for search history list

I tried to follow the patterns we use for empty views in the home panels.

Comment 28

[:Margaret Leibovic]

https://hg.mozilla.org/integration/fx-team/rev/32246ae74dfa
https://github.com/mozilla/fennec-search/commit/adcf54f1e4daff243292bde23180d38afdf026b3

Comment 29

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/32246ae74dfa

Comment 30

[Flaviu Cos]

Verified as fixed in build 35.0a1 (2014-09-23);
Device: LG Nexus 4 (Android 4.4.4).