[AS] [Highlights] Implement empty state UI explaining what are the highlights

VERIFIED FIXED in Firefox 53

Status

()

Firefox for Android
General
P1
normal
VERIFIED FIXED
a year ago
11 months ago

People

(Reporter: Grisha, Assigned: ahunt)

Tracking

unspecified
Firefox 53
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox53 verified)

Details

(Whiteboard: [MobileAS])

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(6 attachments)

(Reporter)

Description

a year ago
We want to help user understand what highlights are, and empty state (no highlights) is a good chance to do that.

Trello card: https://trello.com/c/KzNiH9aQ/67-onboarding-as-a-new-and-existing-user-i-should-have-a-clear-understanding-of-what-is-going-on-with-my-new-tab-experience

Invision mocks:https://mozilla.invisionapp.com/share/ZS97FSXQ6#/screens

Also, when else can we show this UI, other than empty state? Can we only have a few items in the highlights section, and can we combine a sparse highlights list with this onboarding UI?
(Reporter)

Updated

a year ago
Priority: -- → P2
Summary: [Highlights] [AS] Implement empty state UI explaining what highlights are → [AS] [Highlights] Implement empty state UI explaining what are the highlights
(Reporter)

Updated

a year ago
Blocks: 1314748
(Reporter)

Comment 1

a year ago
Android UI mocks: https://mozilla.invisionapp.com/share/VW7ZBXV8Q#/screens/208555236_New_Tab_-_No_Highlights

Updates on display logic coming soon.

Some considerations for now: clean install vs. existing data which needs to be "prepared" for highlights - images/metadata to display, etc.

For clean install, need to ensure messaging is clear enough and indicates that everything is working and we're waiting for user to browse enough things. Need to ensure that highlights algorithm will pick up some of the recent history to display.

For existing install with data present, need to ensure we display on-boarding for some minimal amount of time, letting user discard it (perhaps via a button like "Got it!").

Need to determine how many highlights are enough to stop showing onboarding ux. 1, 2, 3...?
(Reporter)

Comment 2

a year ago
Created attachment 8815428 [details]
pasted_image_at_2016_11_29_11_33_am.png

Updated mocks and flow (same url, https://mozilla.invisionapp.com/share/VW7ZBXV8Q#/screens/208555236_New_Tab_-_No_Highlights.

On first launch, display the onboarding UI. If there are highlights to show, display a "dismiss" button in the onboarding UI. Otherwise, wait until there are highlights to show, and display a "dismiss" button then.

Once there are highlights available, consider expiring onboarding UI at some point (in case user doesn't click the "dismiss" button themselves?).

Comment 3

a year ago
Here's a mockup: https://mozilla.invisionapp.com/share/VW7ZBXV8Q#/208555236_New_Tab_-_No_Highlights
(Reporter)

Updated

a year ago
Duplicate of this bug: 1312019
(Assignee)

Comment 5

a year ago
Side note: we create 3 default bookmarks on install (possibly more for distributions), so we'll be showing at least one item in activity stream by default (at least with the current algorithm, which shows at least one bookmark).

I wonder if we'd want to filter out those default bookmarks?
Assignee: nobody → ahunt
Iteration: --- → 1.10
Priority: P2 → P1
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
(Assignee)

Comment 9

a year ago
Part 2 isn't directly relevant to this bug, but I'd already implemented it by the time I figure out RV animations, so we might as well keep it.

(I've got the correct assets locally, but I'm still experimenting with webp quality settings to minimise their size.)
(Assignee)

Comment 10

a year ago
Some datapoints from optimising the largest (xxhdpi) fox:
Original image (png): 166k
Optimised using optipng -o7 && advdef -z4: 118k
Removed alpha channel (solid background), then optimised as above: 94k

Finally with webp:
default (-q 75): 9k
final (-q 90): 16k

There's a somewhat noticeable degradation in quality when converting, primarily in the edges, with the default quality settings. However boosting the quality results in an almost identical image with a significantly smaller size than the equivalent png.

(I'm going to add some documentation on this to https://wiki.mozilla.org/Mobile/Fennec/Android/png_optimisation )
(Assignee)

Comment 11

a year ago
Created attachment 8816505 [details]
fox.zip

Attaching the original assets just in case we need to make any future changes to them (better optimisation, change in background colour, etc).
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)

Comment 14

a year ago
mozreview-review
Comment on attachment 8816302 [details]
Bug 1319254 - Pre: implement stable IDs for AS RecyclerView

https://reviewboard.mozilla.org/r/97078/#review97828

::: mobile/android/base/java/org/mozilla/gecko/home/activitystream/StreamRecyclerAdapter.java:147
(Diff revision 1)
>  
>          notifyItemChanged(0);
>      }
> +
> +    @Override
> +    public long getItemId(int position) {

Couldn't we just return historyIDs and the bookmarkID  * -1? We do this somewhere and I think the only reason why we have this complicated approach in CombinedHistoryAdapter is because we have more than two types of IDs.
Attachment #8816302 - Flags: review?(s.kaspari) → review+

Comment 15

a year ago
mozreview-review
Comment on attachment 8816303 [details]
Bug 1319254 - Add welcome panel to Activity Stream

https://reviewboard.mozilla.org/r/97080/#review97830

::: mobile/android/base/resources/layout/activity_stream_main_highlightstitle.xml:7
(Diff revision 2)
> +    <RelativeLayout
> +        android:id="@+id/welcome_panel"
> +        android:layout_width="match_parent"
> +        android:layout_height="wrap_content">
> +

Most of the time we won't need this. So it might make sense to move this into a ViewStub:
https://developer.android.com/reference/android/view/ViewStub.html

::: mobile/android/base/resources/values/styles.xml:766
(Diff revision 2)
> +    <style name="ActivityStreamButton" parent="Widget.AppCompat.Button.Colored">
> +        <item name="colorButtonNormal">#39A5FC</item>
> +        <item name="android:textColor">@android:color/white</item>
> +    </style>

We should avoid to introduce a whole new set of colors. Especially as we already have blue-ish button in the UI. That's probably something antlam and bryan should talk about.
Attachment #8816303 - Flags: review?(s.kaspari) → review+

Comment 16

a year ago
mozreview-review
Comment on attachment 8816512 [details]
Bug 1319254 - Move Highlights title into separate item to make animation better

https://reviewboard.mozilla.org/r/97236/#review97832
Attachment #8816512 - Flags: review?(s.kaspari) → review+
(Assignee)

Comment 17

a year ago
mozreview-review-reply
Comment on attachment 8816302 [details]
Bug 1319254 - Pre: implement stable IDs for AS RecyclerView

https://reviewboard.mozilla.org/r/97078/#review97828

> Couldn't we just return historyIDs and the bookmarkID  * -1? We do this somewhere and I think the only reason why we have this complicated approach in CombinedHistoryAdapter is because we have more than two types of IDs.

(I also discovered that RecyclerView.NO_ID == -1, so I've shifted the fix panels to -2:-4, and am using |(-1 * bookmarkId) - 10| for bookmarks.)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
(Assignee)

Comment 22

a year ago
mozreview-review-reply
Comment on attachment 8816303 [details]
Bug 1319254 - Add welcome panel to Activity Stream

https://reviewboard.mozilla.org/r/97080/#review97830

> We should avoid to introduce a whole new set of colors. Especially as we already have blue-ish button in the UI. That's probably something antlam and bryan should talk about.

I've filed Bug 1323085 to figure that out. link_blue seems like it might be the best choice.
(Assignee)

Updated

a year ago
Duplicate of this bug: 1323085
Comment hidden (mozreview-request)
Comment hidden (mozreview-request)
(Assignee)

Comment 26

a year ago
mozreview-review
Comment on attachment 8816301 [details]
Bug 1319254 - Pre: make final

https://reviewboard.mozilla.org/r/97076/#review98426
Attachment #8816301 - Flags: review+

Comment 27

a year ago
Pushed by ahunt@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/89f3f7bc1172
Pre: make final r=ahunt
https://hg.mozilla.org/integration/autoland/rev/a06051226e24
Pre: implement stable IDs for AS RecyclerView r=sebastian
https://hg.mozilla.org/integration/autoland/rev/0ec81cb7d250
Add welcome panel to Activity Stream r=sebastian
https://hg.mozilla.org/integration/autoland/rev/4b7b0b1c1901
Move Highlights title into separate item to make animation better r=sebastian

Comment 28

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/89f3f7bc1172
https://hg.mozilla.org/mozilla-central/rev/a06051226e24
https://hg.mozilla.org/mozilla-central/rev/0ec81cb7d250
https://hg.mozilla.org/mozilla-central/rev/4b7b0b1c1901
Status: NEW → RESOLVED
Last Resolved: a year ago
status-firefox53: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
Is there a specific reason to hard-code Firefox instead of using &brandShortName;?
Flags: needinfo?(ahunt)
(Assignee)

Comment 30

a year ago
(In reply to Francesco Lodolo [:flod] (mostly out of office until Dec 19) from comment #29)
> Is there a specific reason to hard-code Firefox instead of using
> &brandShortName;?

Sorry for this. There's no good reason, and I'll try to fix it in Bug 1323835. Thanks for the heads up!
Flags: needinfo?(ahunt)
Iteration: 1.10 → 1.11

Comment 31

11 months ago
Tested on latest Nightly 53.0a1 (2017-01-10) using:
- Prestigio Grace x5 (Android 4.4.2);
- Nexus 9 (Android 7.1.1).

After clearing data and installing Switchboard experiments add-on, there is a text that explains what Highlights are. Also, there is a Dismiss blue button and a fox image.

Marking this as Verified.
Status: RESOLVED → VERIFIED
status-firefox53: fixed → verified
You need to log in before you can comment on or make changes to this bug.