1103232 - [meta] Improve "Add to reading list/mode" UX

Status: RESOLVED INVALID

(Firefox for Android Graveyard :: Reader View, defect)

Description

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

User story
---
As a user, I find an article that I want to read in Reading Mode. Then, I tap the icon that shows me a fully immersive Reading Mode. After reading said article, I back out and life goes on - having never added anything to my "Reading List".


Suggestions
---
It feels to me like clicking on the "Reading mode" icon should ALSO add it to the Reading List. The discover-ability of the "Add to Reading List" icon concerns me here and it also feels like an extra step that is unnecessary. 

I feel like we could rethink the user flow here a bit and make some improvements :) Thoughts?

Comment 1

[:Margaret Leibovic]

Dupe of bug 871994?

I agree it's a bit confusing that "reader mode" and "reading list" are different, but I think there is a difference between "make this page easier to read" and "I want to read this later".

Definitely the long tap on the reader mode icon is not discoverable at all, so there's currently not a good way to be on a page and say "I don't have time for this now, just stick this in my list" unless you know about that long tap feature.

Comment 2

[Richard Newman [:rnewman]]

This is something I raised before, but I've actually come around to the counter-argument. I don't think that things should be added to your reading list by default when you apply reader mode: people really do use reader mode to just clean up the page while they look at it.

Another tidbit that might change your mind: I want to be able to add *any* page to my reading list, even if it's not suitable for Readability. So why is this action tied to the reader mode toggle?

It should really be at the same tier as (or replacing) the bookmark star, not a hidden operation or one dependent on reader mode.

tl;dr: I'd prefer to see us leave the book icon as reader mode, and find a different method for adding to reading list.

Comment 3

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

Hm- noted! It feels to me like we agree there's an opportunity to clean up the interaction here a bit more. 

Will sketch this flow out a bit more.

Comment 4

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

Attachment: sketch_addtoreaderV2.JPG

Just leaving some notes here: I've discovered that this does touch upon quite a bit of the sharing/saving (Tabs) ideas that we have already. Particularly when we look at the "Add to Firefox" work that Yuan was doing. Where it makes sense, I think we should try to re-use as much of the UX/UI as possible there. 

That being said, I've tried to identify 3 main points of friction that we might want to look at (let me know what you guys think of this):

 - Users can "Add to Reading List" by long pressing
  - This is a great feature but not easily discoverable
  - Confirmation Toast's can offer an option to 'quick switch' (like undo-ing a closed Tab) 
  - Actively calling out this option will help user's create a mental model of the options available (Adding to Reading list for later vs. Reading in Reader mode right now)
 
 - "Reader mode" actually functions like a 'toggle' of sorts (but it's not obvious)
  - Perhaps we could transition this in? (slightly less jarring)
  - Animation would be able to reinforce the notion that this is a "temporary state" 
  - This would help to separate "Reader mode" from "Reading List"
 
 - Navigation along the bottom is very powerful but doesn't stick around for a long time
  - The "Add to Reading List" icon is here but there isn't any "first run" experience to tell the user about it
  - Working with Desktop side on the UI of what their UX/UI for this looks like
  - We're also exploring "quick/easy-win" options around this to help it stand out a bit more

I know some of this may seem repetitive, but I just wanted to take a step back and look at the whole flow. Here's a sketch that I did to outline where I think we could make some improvements and to show what I'm thinking about :)

note: middle screen is a very bad rendition/sketch of our current "Add to Firefox" UI :P

Comment 5

[Richard Newman [:rnewman]]

Anthony and I chatted today with Margaret, and I think we have four actionable bugs, partly aping Safari, rephrasing and reinterpreting Comment 4:

* Move reader mode from a page action to replace the favicon if applicable. This avoids some conflicts with other page actions, and avoids some URL bar crowding. Long press can stay or go, but doing this is what makes it feasible to keep in the presence of other page actions. Our goal is to avoid the need for users to discover long press via exposing adding in a more regular fashion.

* Add a transition for reader mode content. (This might be hard to do.) Emphasize modal nature.

* Improve the article view affordance for adding to reading list -- e.g., an in-content button at the top, rather than a bar at the bottom.

* Implement some desktop-linked mechanism for adding any kind of content to reading list, such as having the bookmark star launch the Add to Firefox interface. (Needs work to preserve article content and summary, but not hard.)

Comment 6

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

Attachment: sketch_addtoreader_crossplatform.JPG

Related: Sketch we did today to look at what form of alert the user might receive to know what to do about getting back to their Reading List if they're changing devices.

Green is the notifications UX around how a user will know what to do. Handoffs on the left side are currently not in the roadmap but something that's just an idea ATM.

Comment 7

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

NI-ing rnewman here to get this on the radar again :)

Comment 8

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

Filed bug 1114708 to track the transition work

Comment 9

[Richard Newman [:rnewman]]

Let's make this a meta bug.

Comment 10

[:Margaret Leibovic]

This meta bug just ended up tracking unrelated things, I just moved those issues back directly under the readerv2 bug.