1040282 - [UX] Design Spike: sponsored indication for enhanced and directory tiles

Status: RESOLVED FIXED

(Tracking Graveyard :: Firefox Operations, defect)

Description

[Bryan Clark (DevTools PM) [:clarkbw]]

As a product owner I need any tiles which have partner ties to Mozilla to have a clearly indicated sponsorship text label such that there is text saying “Sponsored” or "Enhanced" directly associated with those tiles.

Acceptance Criteria

* Every sponsored Directory Tile has the text “Sponsored” directly associate with it.
* Every Enhanced Tile displays has the text “Enhanced” directly associated with it.
* Icons such as the arrow and related popup message are not acceptable indicators.

"Enhanced" text is waiting on full approval, for now "Sponsored" can be assumed everywhere.

Comment 1

[Ed Lee :Mardak]

From dcrobot:

1.) No more message bar

2.) New header ("Site you visit most often" - suggestion from Mary Ellen)

3.) New corner radius

4.) More subtle glow effect on rollover

5.) New "Sponsored" label

6.) Show 1 sponsor vs. 3 sponsors (always on the right of the last row)

7.) New "What is this page?" text link (subsequent interaction TBD, depending on amount of text required)

8.) No more "toggle"... New cog with dropdown options for Enhanced view, Classic view and Blank page

Comment 2

[Ed Lee :Mardak]

Attachment: Interactions.png

Comment 3

[Ed Lee :Mardak]

Attachment: Tiles - 1 Sponsor.png

Comment 4

[Ed Lee :Mardak]

Attachment: Tiles - 3 Sponsors.png

Comment 5

[Ed Lee :Mardak]

Unlisted change is moving the pin button back to the top left.

Comment 6

[Ed Lee :Mardak]

(In reply to Ed Lee :Mardak from comment #1)
> 6.) Show 1 sponsor vs. 3 sponsors (always on the right of the last row)
Any reason why this needs to be the last row towards the right instead of anywhere in the grid? Nightly currently has a sponsored tile in the top right.

Comment 7

[Ed Lee :Mardak]

Blocks bug 1036284 where there's style changes from the previous spec.

Comment 8

[Ed Lee :Mardak]

(In reply to Ed Lee :Mardak from comment #3)
> Created attachment 8458886 [details]
> Tiles - 1 Sponsor.png
The WIRED tile here seems to be enhanced, yet there's no indication. Is that intended?

Comment 9

[Aaron]

Attachment: Tiles - 3 Sponsored 1 Ad.png

Proposed treatment for enhanced history tiles vs. placed ads

Comment 10

[Aaron]

I misunderstood the original request. The PNG attached above shows a label for every enhanced tile. I suggest that we label enhanced history tiles as "sponsored" because that would make a lot more sense to more people than "enhanced". If the tile is placed/recommended/paid-to-be-there, then it's an "ad".

I thought it was important to make the distinction between the two labels immediately apparent - especially wait is paid advertising content. Therefore, "ad" labels are in blue, and "sponsored" labels a subtle gray.

Comment 11

[Ed Lee :Mardak]

(In reply to Aaron from comment #10)
> I suggest that we label enhanced history tiles as
> "sponsored" because that would make a lot more sense to more people than
> "enhanced". If the tile is placed/recommended/paid-to-be-there, then it's an
> "ad".
To be clear, for people with enough history to push out directory tiles, the only indicators they'll see is [sponsored] (and no [ad]) if some tiles are enhanced. The current functionality is to only show history and enhance them if possible if the user has enough history, so no [ad] tiles.

If there's not enough history and non-organic/affiliate, i.e., "sponsored", directory tiles are shown, it'll be labeled [ad] (whether it's enhanced or not because it's showing a site not from the user's browsing history).

Comment 12

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

The difference between »Sponsored« and »Ad« seems to be hard to communicate.
From a users perspective, both words mean »This is here because someone paid for it«.
While that is technically true, the tiles that are currently called »Sponsored« would be there anyway. Only the enhancment is sponsored.

I think we should do one of the following:
1) Don't label organic enhanced tiles (the enhancement is pretty apparent by itself) and only label actual ads as »Ad« or »Sponsored«.
2) Use the same label on both kinds of tiles.

I'd greatly prefer 1. Maybe we could use the little arrow that were in some of the earlier mockups where the user can disable the enhancement so he is in control and still has an indicator.

As for the wording, there seems to be a preference towards the word »Ad« in the industry. Google, Bing and Yahoo all call their paid results »Ads«. Duckduckgo uses »Sponsored«, Twitter uses »Promoted«.
Either is fine I think, but we should settle on one or the other.

Comment 13

[Ed Lee :Mardak]

(In reply to Philipp Sackl [:phlsa] from comment #12)
> 1) Don't label organic enhanced tiles (the enhancement is pretty apparent by
> itself) and only label actual ads as »Ad« or »Sponsored«.
I believe the enhancement is technically an ad, therefore we'll need to label it.

I think we can make more use of this distinction of "sponsored" = from history vs "ad" = not from history down the line as well. E.g., showing related pages/articles or similar sites as sponsored from history vs ads from unvisited.

Comment 14

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

(In reply to Ed Lee :Mardak from comment #13)
> I think we can make more use of this distinction of "sponsored" = from
> history vs "ad" = not from history down the line as well. E.g., showing
> related pages/articles or similar sites as sponsored from history vs ads
> from unvisited.

My concern is that exactly that distinction will be very hard to communicate.
In the users mind sponsored === ad. So we should either unify the label or label one of them in a way different enough that there is no confusion about *how* they are different (the latter one would be my preferred option).

Comment 15

[Ed Lee :Mardak]

(In reply to Philipp Sackl [:phlsa] from comment #14)
> My concern is that exactly that distinction will be very hard to communicate.
> In the users mind sponsored === ad. So we should either unify the label
The actual label probably doesn't matter that much -- just that the user can simply understand and make the connection to the content being shown is "sponsored" in some way.

I've attached a video and stills that normally just shows a blue square no matter enhanced or sponsored or ad or whatever those mean to you. This lets us put whatever label behind the hover action, but the user already sees the blue square indicating "sponsored."

webm: https://bug1040369.bugzilla.mozilla.org/attachment.cgi?id=8461274
 png: https://bug1040369.bugzilla.mozilla.org/attachment.cgi?id=8461277

It has a benefit of working with whatever the words get localized to (which could have varying text lengths).

Comment 16

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to Ed Lee :Mardak from comment #15)
> (In reply to Philipp Sackl [:phlsa] from comment #14)
> > My concern is that exactly that distinction will be very hard to communicate.
> > In the users mind sponsored === ad. So we should either unify the label
> The actual label probably doesn't matter that much -- just that the user can
> simply understand and make the connection to the content being shown is
> "sponsored" in some way.

Let's stick with simply "sponsored" for either sponsored Directory Tiles or Enhanced Tiles, it's simple and avoids excess explanations of the variations of other labels.

> I've attached a video and stills that normally just shows a blue square no
> matter enhanced or sponsored or ad or whatever those mean to you. This lets
> us put whatever label behind the hover action, but the user already sees the
> blue square indicating "sponsored."
> 
> webm: https://bug1040369.bugzilla.mozilla.org/attachment.cgi?id=8461274
>  png: https://bug1040369.bugzilla.mozilla.org/attachment.cgi?id=8461277
> 
> It has a benefit of working with whatever the words get localized to (which
> could have varying text lengths).

I'll look into using a hover option for showing the text.

Comment 17

[Ed Lee :Mardak]

dcrobot, is there anything left for this bug or can you resolve it?

Comment 18

[Aaron]

How can I see the final product? I just updated nightly and it looks the same it did a week ago. Please advise.

Comment 19

[Ed Lee :Mardak]

Nightly is the same because the implementation bug 1040369 hasn't landed yet as the decisions in this design bug block that bug. Are the design of what you want the for the sponsored indicator appropriately discussed in this bug?

Comment 20

[Aaron]

The specs for the Sponsored indicator are as follows:

Labels should say "SPONSORED" 4px side padding - total height = 21px
Paid tile text/treatment
use enhanced title replacing history title
overlay sponsored text: #333333 background, white text
Static label: Border = 1, #DCDCDC, corner = 2, fill = #F9F9F9, text = Arial, Regular, 10 px, #9B9B9B
Rollover: fill = #DCDCDC, text = #666666

Comment 21

[Ed Lee :Mardak]

Yeah, those notes have been in bug 1040369. I was asking if there was anything else before you can resolve this design bug as fixed?

Comment 22

[Aaron]

All design work has been accounted for at this point. Thank you.

Comment 23

[Marco Mucci [:MarcoM]]

Need info GMC for verification of this design bug.