Design layout of tile title, explanation, suggested label

RESOLVED FIXED

Status

()

Firefox
New Tab Page
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: Mardak, Assigned: Aaron)

Tracking

(Blocks: 1 bug)

Trunk
Points:
5
Dependency tree / graph

Firefox Tracking Flags

(firefox41 affected)

Details

(Whiteboard: .?)

Attachments

(5 attachments)

(Reporter)

Description

3 years ago
Created attachment 8611267 [details]
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
(Reporter)

Comment 1

3 years ago
Created attachment 8611268 [details]
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...
(Reporter)

Comment 2

3 years ago
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

3 years ago
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.
Flags: needinfo?(athornburgh)
(Assignee)

Comment 4

3 years ago
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)?
Flags: needinfo?(athornburgh)
(Reporter)

Comment 5

3 years ago
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... ?
(Assignee)

Comment 6

3 years ago
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
(Assignee)

Comment 7

3 years ago
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...

Comment 8

3 years ago
(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.

Updated

3 years ago
Blocks: 1140185
(Assignee)

Comment 9

3 years ago
Created attachment 8616304 [details]
ST Label V3 - top.png

Kevin + Ed... like this?
Flags: needinfo?(kghim)
(Reporter)

Updated

3 years ago
Assignee: nobody → athornburgh

Comment 10

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

Looks good.
Flags: needinfo?(kghim)
(Assignee)

Comment 11

3 years ago
Created attachment 8616764 [details]
Tile_Label_Updates_SG-V1.pdf

Here's a Style Guide for the updated labels.
Flags: needinfo?(edilee)
(Reporter)

Updated

3 years ago
Attachment #8616764 - Attachment mime type: application/octet → application/pdf
Flags: needinfo?(edilee)
(Reporter)

Comment 12

3 years ago
I believe this design bug is done with attachment 8616764 [details]. Implementation will happen in bug 1158858.
Status: NEW → RESOLVED
Iteration: --- → 41.2 - Jun 8
Points: --- → 5
Last Resolved: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.