Closed Bug 1319254 Opened 3 years ago Closed 3 years ago

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

Categories

(Firefox for Android :: General, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 53
Iteration:
1.11
Tracking Status
firefox53 --- verified

People

(Reporter: Grisha, Assigned: ahunt)

References

Details

(Whiteboard: [MobileAS])

Attachments

(6 files)

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?
Priority: -- → P2
Summary: [Highlights] [AS] Implement empty state UI explaining what highlights are → [AS] [Highlights] Implement empty state UI explaining what are the highlights
Blocks: 1314748
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...?
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?).
Duplicate of this bug: 1312019
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
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.)
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 )
Attached file 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 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 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 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+
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 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.
Duplicate of this bug: 1323085
Comment on attachment 8816301 [details]
Bug 1319254 - Pre: make final

https://reviewboard.mozilla.org/r/97076/#review98426
Attachment #8816301 - Flags: review+
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
Is there a specific reason to hard-code Firefox instead of using &brandShortName;?
Flags: needinfo?(ahunt)
(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
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
You need to log in before you can comment on or make changes to this bug.