1168898 - Design layout of tile title, explanation, suggested label

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Ed Lee :Mardak]

Attachment: 6 options from dcrobot

Part of the concern raised in bug 1158858 is that the [suggested] tag takes away space from the title and causes things to get crowded. This forces us to decide which things we want to cut off or prioritize more.

dcrobot has provided some options:
1) fade - left
2) ellipses
3) fade - right
4) below 1
5) below 2
6) combo

Comment 1

[Ed Lee :Mardak]

Attachment: ed tagged

How about moving the tag to the top of the tile kinda like a tab? This gives full space for the title (and favicon if we want that).

Theoretically this could provide space to allow for multiple tags/tabs. Not sure if it makes it imply you can switch between tabs...

Comment 2

[Ed Lee :Mardak]

And some of the discussion from the email:

dcrobot: If it matters, my preference is keeping the Suggested label in the URL space. Trying to combine the tag with the contextual statement below looks convoluted (especially using our existing language).

kghim: My preference is for #3, suggested/sponsored label on the right with favicon and right faded title. 2nd choice is #1, lable on the left followed by favicon and right faded title. #1 does look really crowded.

oyiptong: My preference is the one that is on 2 lines, with SUGGESTED being outside the tile. See attached snippet. My tastes are probably weird and I'm probably wrong. But I really don't like 3 lines and I don't like when the Title is cut off. It *is* a lot of information to pack in though. That's a tough job.

dcrobot: This option would most definitely break to 2 lines in many instances - especially when translated. Do we really want two lines of text beneath a Suggested Tile? What if it's in the top row? But I hear what you're saying about cramming a bunch of stuff in the URL bar...

Comment 3

[Kevin Ghim]

Aaron, can move this forward by having three options to consider? Seems like a variation of #2, #3 is in the lead. Let's get this sorted out for launch.

Comment 4

[Aaron]

My final vote is #2 with the ellipses. That would require the least amount of change and remain the most readable.

Are there any objections, or serious defenders of version #3 (fade to label on right)?

Comment 5

[Ed Lee :Mardak]

Any comments on the tag being above the tile as in attachment 8611268 [details]?

Another alternative is to have the tag on top of the tile image maybe partially transparent that disappears on hover? I believe there's some space dedicated to the controls that shouldn't have important tile image content already... ?

Comment 6

[Aaron]

Ed, I like your solution as an alternative.

Let me put together a couple more mocks that show just the ellipse vs. a tag above.

-A

Comment 7

[Aaron]

Attachment: Tile_Label_Options_ROUND-2.zip

Gang, here are 2 mocks that show Ed's solution, and the ellipse.

Is either a favorite? I kinda like the tag in the upper left corner...

Comment 8

[Kevin Ghim]

(In reply to Aaron from comment #7)
> Created attachment 8613707 [details]
> Tile_Label_Options_ROUND-2.zip
> 
> Gang, here are 2 mocks that show Ed's solution, and the ellipse.
> 
> Is either a favorite? I kinda like the tag in the upper left corner...

Aaron, Ed and I talked through this. I think we should go with option 1, the tag in the upper left corner. However, we should make it more subtle. The dark grey background with light letters are jarring. My suggestion would be 1) lighter colored label box 2) Mixed case

Additionally, ashonnard/jterry the max character limit for the Suggested Tiles title within the title bar should be 30 characters.

Comment 9

[Aaron]

Attachment: ST Label V3 - top.png

Kevin + Ed... like this?

Comment 10

[Kevin Ghim]

(In reply to Aaron from comment #9)
> Created attachment 8616304 [details]
> ST Label V3 - top.png
> 
> Kevin + Ed... like this?

Looks good.

Comment 11

[Aaron]

Attachment: Tile_Label_Updates_SG-V1.pdf

Here's a Style Guide for the updated labels.

Comment 12

[Ed Lee :Mardak]

I believe this design bug is done with attachment 8616764 [details]. Implementation will happen in bug 1158858.