Open Bug 1172579 Opened 5 years ago Updated 3 years ago

Provide X (Do Not Show Again) For Snippet Opt Out

Categories

(Firefox :: General, defect)

defect
Not set

Tracking

()

REOPENED

People

(Reporter: bensternthal, Assigned: bbell)

References

Details

User Story

Ben et al,

That's a cool idea, allowing users to hide the snippet! I will try answer your questions:

1) Yes, please use the same X that appears on tiles when you hover over them.

I would suggest that the X only appears in the top-right of the snippet areas when a user's mouse hovers over that area. So it shouldn't really matter about the size or type of snippet.

Rough mock: http://i.sevaan.com/image/3c1J3g1D3w2X

Upon closing an "undo" box should be displayed at the top of the screen for a short period of time (Maybe 10 seconds).

Philipp, what do you think?

I would suggest measuring how many people undo this action after. If the number is high, instead of the X just hiding the snippet, it could fly out a sub-option that says "Remove this snippet". This extra step and the textual explanation may help reduce undos.

2) If there is an action to undo, this should be explained in a Sumo article.

Next steps would be to coordinate with Philipp Sackl (phlsa), who can help usher things forward.

Looking forward to seeing this in action!

Attachments

(2 files, 1 obsolete file)

9.71 KB, application/zip
Details
326.24 KB, image/png
Details
Copying this from email discussion, for context email is pasted into user story.

The snippets team is implementing a way for the user to opt out of a snippet. In other words a user can see a snippet, click an 'X' and that snippet wont be shown to the user again.

The behavior for this being done in the snippet but we need help on the interaction and UX, the specific ask is for:

1. Provide the X (as discussed its the same X as tiles).
2. Confirm we need an undo, and if so provide the visual for this.
3. If we have #2 assist in creating a sumo article explaining the behavior.
Flags: needinfo?(philipp)
Philipp: Following up from the email conversation between you and Giorgos.

1. Would you be able to provide the X and it's hover?
2. Can you advise on the undo, can we do this with just an image?

For point 2 Giorgos suggested via email:

>"Alternatively I was thinking that we place a 'Remove this snippet'
>link-type text on the top-right of the about:home page which will be the
>same for all snippets. Once clicked it will remove the snippet and read
>'You just removed a snippet. Undo' as Sevaan suggested. Upon removal
>another snippet is shown to the user."

Thanks again for the help.
There is a special case we should take into account: Firefox ships a few (<5 afaik) build-in snippets. These snippets are displayed if -for whatever reason- Firefox cannot fetch snippets and doesn't have another cached version. 

I suggest that don't allow users to disable these build-in snippets, mostly because they are controlled by the Firefox Team and not the Snippets team which controls the rest of the snippets and the removal mechanism under discussion. Therefore it will be harder to fix any issues and alter the behavior as we go.
Asking Bryan for some visual design help here...
While we should absolutely use the same icon as on newtab (defined in chrome://browser/skin/newtab/controls.svg), there are some questions around the visual design treatment of the snippet.

Bryan, could you take a stab at that?

As for the undo, we could also use the same mechanism as about:newtab with slightly different text.
Flags: needinfo?(philipp) → needinfo?(bbell)
I agree with Giorgos on Comment 2 in regards to leaving the built-in default snippets alone (we don't need an "undo" for those snippets).

I have a concern using text because of l10n issues - as Ben Sternthal mentioned - can we do with just an image?
Hit save too fast - what I meant was I agree with Giorgos in that for the default snippets we do not need an "X" and "undo" for those.
Clarifying next steps here...

We are waiting on:

1. Visual design treatment of X for all non built-in snippet from Bryan.
2. Guidance on undo, can we use the same mechanism of about:newtab (will this introduce l10n issues) or can we use an icon? Philip?

To set some expectations (and because whistler is approaching) can you let me know the date when you think you would have the above? Many thanks.
Flags: needinfo?(philipp)
Some drive by comments because I'm working on a similar bug 1138908

(In reply to Giorgos Logiotatidis [:giorgos] from comment #2)
> I suggest that don't allow users to disable these build-in snippets, mostly
> because they are controlled by the Firefox Team and not the Snippets team
> which controls the rest of the snippets and the removal mechanism under
> discussion. Therefore it will be harder to fix any issues and alter the
> behavior as we go.

A user doesn't know about Firefox team snippets and Snippets team snippets. I think providing a way to not see some and not all snippets might be confusing. 

(In reply to Ben (:bensternthal) from comment #1)
> >"Alternatively I was thinking that we place a 'Remove this snippet'
> >link-type text on the top-right of the about:home page which will be the
> >same for all snippets. Once clicked it will remove the snippet and read
> >'You just removed a snippet. Undo' as Sevaan suggested. Upon removal
> >another snippet is shown to the user."

Users probably wouldn't call these snippets. Maybe it could say something like "Don't show this message" and "Message removed. Undo".
Ping for post whistler update.

We are blocked on moving forward until we get the visual treatments, can you let me know when you think we could expect this? Also if we need to get together for a short (15) chat I can facilitate.

Thanks again.
Assignee: nobody → bbell
Flags: needinfo?(bbell)
Hi all,

Ben, Bryan and I met on vidyo to further discuss the "x" out treatment of snippets. To summarize:
1) Bryan will put together a treatment for "x"ing out specific messages when users hover over
2) We will provide "x" above the search bar only if a logo has been swapped (if users x out, then the Firefox logo will appear). There will be no "x" option if it's the default logo
3) When users opt out of specific messages, they will see a different message 
4) We do not need an "undo" functionality because users will see a new message and these messages will not live for more than 2 weeks anyways
5) There may be a plan in the future to create a notification / message center where opted out messages can live should a user want to see them again 

I think this covered everything, let me know if I missed anything else!
Just a couple of thoughts for Giorgos while Bryan works and adds his work. 

1) Can add tracking to the "x" clicks? 

2) The "x" treatment should also apply beyond simple snippets - if we do anything extra such as buttons (like EOY) etc., the hover state and "x" option should also be applicable.
Attached file Close-assets.zip
Parts needed to implement the mocks...
Flags: needinfo?(philipp)
Flags: needinfo?(giorgos)
Attached image _0001_Hover@2x.png (obsolete) —
See the mockup in action here: http://invis.io/9S3NRN8EF

Notes about colors and which icon to use when can be found there.
Mucho thanks!

Giorgos can you confirm this is everything you need?
I've updated the mock to include how this might work with a Logo Covering Top Ad. I'm also aware now that to implement my original mock we would need a new snippets template, that would make the whole snippet clickable. I changed the original mock to reflect that realization. 

http://invis.io/UN3NVORWD
Attached image _0001_Hover@2x.png
complete mockup flow can be found here: http://invis.io/9S3NRN8EF
Attachment #8638200 - Attachment is obsolete: true
Whole thing being clickable looks good. However this wont work if we have multiple links in there with does happen.

Discussed with jean, we would like this behavior to be optional.
Clarifications:

1. When I click X on the mockup (https://mozilla.invisionapp.com/share/9S3NRN8EF#/screens/91293662), snippet text goes away and no new snippet appears. Jean requests the we display a new snippet:
(In reply to Jean Collings from comment #9)
> 3) When users opt out of specific messages, they will see a different
> message 

What we have now implement on the backend shows a new snippet and I lean towards keeping this behavior.


2. When I click X on top image on the mockup (http://invis.io/UN3NVORWD) top logo goes away but snippet text bellow stays in place.

I think is makes things complicated for us and for the user as well. Snippets that change the top logo usually have text bellow. X-ing the top logo and replacing it with the default logo and keeping the text below the search bar, feels like that users will end up with a broken snippet. Broken both in terms of context as they will see text without the rest of the snippet and code as the two parts of the snippet maybe interacting.

I suggest that snippets have one behavior: When the X button gets clicked, snippet gets blocked and another snippet gets loaded. Multiple X button maybe appear on a snippet (on replaced top logo, text, etc) as needed. 


3. 
(In reply to bbell from comment #14)
> I'm also aware now that to implement my original mock we would need
> a new snippets template, that would make the whole snippet clickable. 

Placing the X on the snippet means that each new snippet template will have to re-implement the X-ing UI. Given that we probably need to X out snippets with special effects and therefore special templates, each new special snippet will have to write the X-ing UI code as well. I just want to make sure that we are all clear that placing the X on the snippet makes things more complicated on the code front. Instead placing an X outside the snippet (e.g. on the top-right of the about:home page) enables us easily to X-out every snippet.
Flags: needinfo?(giorgos)
Giorgos - were you waiting for feedback on the above?
Flags: needinfo?(giorgos)
Blocks: 1193395
No longer depends on: 1193395
Flags: needinfo?(giorgos)
Summary: Provide X (Do Not Show Again) & Undo Art For Snippet Opt Out → Provide X (Do Not Show Again) For Snippet Opt Out
(In reply to Ben (:bensternthal) from comment #18)
> Giorgos - were you waiting for feedback on the above?

Yes and no. I wanted to clarify things and make sure we are all on the same page. I'll go ahead and implement based on what we discussed here and we can iterate if needed.
Commits pushed to master at https://github.com/mozilla/snippets-service

https://github.com/mozilla/snippets-service/commit/bb3a3c3e5893ba2f25b3cb74b72d6d505ec4ea8d
[bug 1172579] Add handle clicks on block-snippet-button.

https://github.com/mozilla/snippets-service/commit/a5b18119ebd32e3c87a08afdcc8860a52e5966ec
Merge pull request #121 from glogiotatidis/snippet-xout-button

[bug 1172579] Add handle clicks on block-snippet-button.
I got everything needed and build the windows 10 snippet and a new simple snippet template. 

From my end this bug can be closed. Thanks all!
Thanks Giorgos! There are several other templates that I would like to have the functionality on as well.

The third most used template:
a) logo swap template (if a user x's out the copy OR the logo, both should go away)

The ones below are not currently being used but probably will in the future. Do we want to work on these when they are needed? Let me know. 
b) simple video over search bar (if a user x's out the copy OR the video, both should go away)
c) sms & email for Android w/ configurable campaign ids (only if user x's out the widget)
d) logo replacement with share
e) share video over search bar
Flags: needinfo?(giorgos)
I created https://github.com/mozilla/snippets/issues/52 to track the creation of the new templates. This bug provided th UX guidance and visuals I need.
Flags: needinfo?(giorgos)
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Can we explore an option for a mini pop up when users hover the X to say "Remove this" or "I don't want to see this"?

The +tabs page, when you hover over the x on a Tile says "Remove this site". I didn't want to go with "Remove this snippet" since users don't know what a snippet is typically. 

Giorgos, let me know if you need Brian to provide this asset.
Status: RESOLVED → REOPENED
Flags: needinfo?(giorgos)
Resolution: FIXED → ---
See Also: → 1200762
(In reply to Jean Collings from comment #24)
> Can we explore an option for a mini pop up when users hover the X to say
> "Remove this" or "I don't want to see this"?
> 
> The +tabs page, when you hover over the x on a Tile says "Remove this site".

That is just a title on the anchor element, it can easily be added to this.
(In reply to Schalk Neethling [:espressive] from comment #25)
> (In reply to Jean Collings from comment #24)
> > Can we explore an option for a mini pop up when users hover the X to say
> > "Remove this" or "I don't want to see this"?
> > 
> > The +tabs page, when you hover over the x on a Tile says "Remove this site".
> 
> That is just a title on the anchor element, it can easily be added to this.

Perfect, thanks so much.  Do you know when this can be completed?  I am just curious as I am waiting to push out new content so we can use the new functionality.

Thanks for your help!
(In reply to Jean Collings from comment #24)
> Can we explore an option for a mini pop up when users hover the X to say
> "Remove this" or "I don't want to see this"?
> 
> The +tabs page, when you hover over the x on a Tile says "Remove this site".
> I didn't want to go with "Remove this snippet" since users don't know what a
> snippet is typically. 

To go ahead with this we need two things:
 - Decide on the copy. Input from the Firefox team will be valuable.
 - After we get the copy we need to translate the copy in the languages firefox is available.
 - Then we need to make changes in the snippets service
 - and finally build the string into the templates.

The change itself it's not complicated but it needs input and orchestration of different teams and projects (firefox, l10n, snippets-service, snippets templates).

I'll come back with more information within the week.
Flags: needinfo?(giorgos)
Hi Brian, 
We'd like to incorporate a "title" when users hover over the X to indicate that they would be removing a snippet. In the case of tiles, the hover state says "Remove this tile". For snippets, we can simplify and say "Remove this" but would like your thoughts. We want to avoid the word "snippet" since most users don't know what that would be. 

Let me know what you think, thanks!
Flags: needinfo?(bbell)
Jean can you spin this up as a sep bug. 

This bug covers the initial button. Additional features tweaks etc should be distinct bugs.

Thanks!
Flags: needinfo?(jcollings)
(In reply to Ben (:bensternthal) from comment #29)
> Jean can you spin this up as a sep bug. 
> 
> This bug covers the initial button. Additional features tweaks etc should be
> distinct bugs.
> 
> Thanks!

Done! Please see here: https://bugzilla.mozilla.org/show_bug.cgi?id=1203629
Flags: needinfo?(jcollings)
Hi Giorgos,

I tested the functionality of the opt-out template.  

2 fixes/questions:
1. Can you please center the text in the box?  Some of it shows up slightly cut-off.  
http://cl.ly/image/1Y0t1A0Y0n2F
2.  When I click on the red-x to opt out, it takes me to the link included in snippet instead of x-ing out.  Will this happen only in the preview mode?  Will it actually x-out when it is a live snippet?

Thanks so much for your help,
Jessica
Flags: needinfo?(giorgos)
As per the original pull request, https://github.com/mozilla/snippets/pull/53#issue-104669349, the functionality does not work in preview mode only on the actual about:home page
Flags: needinfo?(giorgos)
(In reply to Schalk Neethling [:espressive] from comment #32)
> As per the original pull request,
> https://github.com/mozilla/snippets/pull/53#issue-104669349, the
> functionality does not work in preview mode only on the actual about:home
> page

Ok, thank you for clarifying.
Hi Brian,

This link http://invis.io/9S3NRN8EF has been archived. Can you re-share again so we can take a look at the mock ups? Thank you!
Flags: needinfo?(bbell)
You need to log in before you can comment on or make changes to this bug.