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

VERIFIED FIXED in Firefox 35

Status

Firefox for Android Graveyard
Search Activity
P1
normal
VERIFIED FIXED
4 years ago
26 days ago

People

(Reporter: antlam, Assigned: Margaret)

Tracking

unspecified
Firefox 35
x86
Android
Dependency tree / graph

Details

(Whiteboard: shovel-ready)

Attachments

(5 attachments, 3 obsolete attachments)

(Reporter)

Description

4 years ago
Created attachment 8468106 [details]
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.
(Assignee)

Updated

4 years ago
Blocks: 1017135
Swiping up from the home button is not applicable on many devices with different launchers, and home button configuration.
(Reporter)

Comment 2

4 years ago
(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.
(Reporter)

Updated

4 years ago
Depends on: 1045655
Priority: -- → P1
(Reporter)

Comment 3

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

Comment 4

4 years ago
Created attachment 8471141 [details]
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"
Attachment #8468106 - Attachment is obsolete: true
(Assignee)

Updated

4 years ago
Duplicate of this bug: 1053212
(Assignee)

Updated

4 years ago
Duplicate of this bug: 1049208
(Assignee)

Comment 7

4 years ago
antlam, do you have resources I can use for the fox icon?
Assignee: nobody → margaret.leibovic
Flags: needinfo?(alam)
(Reporter)

Comment 8

4 years ago
Created attachment 8475551 [details]
img_foxes1.zip

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

Comment 9

4 years ago
I haven't had the chance to get started on this myself. This could be a good first search activity bug for someone!
Assignee: margaret.leibovic → nobody
Whiteboard: shovel-ready
(Assignee)

Comment 10

4 years ago
Taking this back!
Assignee: nobody → margaret.leibovic
(Assignee)

Comment 11

4 years ago
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.
Attachment #8483085 - Flags: feedback?(alam)
(Assignee)

Comment 12

4 years ago
Created attachment 8483088 [details]
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?
Attachment #8483088 - Flags: feedback?(alam)
(Assignee)

Comment 13

4 years ago
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.
(Assignee)

Comment 14

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

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

Comment 15

4 years ago
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)?
Attachment #8483085 - Flags: feedback?(alam) → feedback-
(Reporter)

Comment 16

4 years ago
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?
Attachment #8483088 - Flags: feedback?(alam) → feedback-
(Reporter)

Comment 17

4 years ago
(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.
(Assignee)

Comment 18

4 years ago
(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.
(Assignee)

Comment 19

4 years ago
Created attachment 8483857 [details]
(v2) screenshot w/ keyboard up

This is where my patch is at after our conversation on IRC earlier today. What do you think?
Attachment #8483085 - Attachment is obsolete: true
Attachment #8483088 - Attachment is obsolete: true
Attachment #8483857 - Flags: feedback?(alam)
(Assignee)

Comment 20

4 years ago
Created attachment 8483858 [details]
(v2) screenshot w/ keyboard down
Attachment #8483858 - Flags: feedback?(alam)
(Reporter)

Comment 21

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

I like it! good call on the 16 sp font size too :)
Attachment #8483857 - Flags: feedback?(alam) → feedback+
(Reporter)

Comment 22

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

ship it!
Attachment #8483858 - Flags: feedback?(alam) → feedback+
(Reporter)

Comment 23

4 years ago
(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?
(Assignee)

Comment 24

4 years ago
(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.
(Reporter)

Comment 25

4 years ago
(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.
(Reporter)

Comment 26

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

Comment 27

4 years ago
Created attachment 8484447 [details] [diff] [review]
Empty view for search history list

I tried to follow the patterns we use for empty views in the home panels.
Attachment #8484447 - Flags: review?(bnicholson)
(Assignee)

Updated

4 years ago
Blocks: 1038797
Attachment #8484447 - Flags: review?(bnicholson) → review+
https://hg.mozilla.org/mozilla-central/rev/32246ae74dfa
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 35

Comment 30

4 years ago
Verified as fixed in build 35.0a1 (2014-09-23);
Device: LG Nexus 4 (Android 4.4.4).
Status: RESOLVED → VERIFIED
status-firefox35: --- → verified

Updated

26 days ago
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.