UX/UI Updates to Tiles for Fx 39

RESOLVED FIXED

Status

RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: athornburgh, Assigned: athornburgh)

Tracking

(Blocks: 2 bugs)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments, 5 obsolete attachments)

(Assignee)

Description

3 years ago
Created attachment 8587018 [details]
Initial Style Guide (search bar + static/active tile UI)

For Fx 39, the following changes are being requested.

1.) New Tab controls - styling and arrangement changes only

2.) Search Bar - styling changes only

3.) Tile UI - new Web address bar and other styling changes

4.) On-boarding

Note: All of the above require some minor readjustments of the overall page layout.

The latest comps will be provided via dropbox in the following folder: https://www.dropbox.com/sh/qytsdfoqide7095/AAA42KJdgI-DqRin3hYl3J1ja?dl=0

Include here is an initial Style Guide to get Marina started. I'll provide further updates to this document as I add specs.
(Assignee)

Comment 1

3 years ago
Also, the On-boarding portion depends on BUG 1147476 (https://bugzilla.mozilla.org/show_bug.cgi?id=1147476).
(In reply to Aaron from comment #0)
> Created attachment 8587018 [details]
> 2.) Search Bar - styling changes only
A few releases ago, I thought we already had logos/wordmarks next to the search bar and in the dropdown.

adw, do you know what changed and why? I believe this was around the time of switching default search.

dcrobot, were you told to add it back?
Assignee: msamuel → athornburgh
Blocks: 1140185
Flags: needinfo?(athornburgh)
Flags: needinfo?(adw)
OS: Mac OS X → All
QA Contact: edilee
Hardware: x86 → All

Comment 3

3 years ago
You're right, it changed with the new "one-off" search UI that was released along with the Yahoo change (which also included the new UI in the main search bar).  If you need info on the design decisions there, I'm not sure who to ask (I didn't have anything to do with it), but Philipp is probably a good choice.
Flags: needinfo?(adw)
(In reply to Drew Willcoxon :adw from comment #3)
> You're right, it changed with the new "one-off" search UI that was released
> along with the Yahoo change (which also included the new UI in the main
> search bar).
Thanks. phlsa, do you have links to bugs/documentation around the removal of logo/wordmark next to the new tab's search bar? With the designs in attachment 8587018 [details], "Yahoo!" image is placed inside the search box and removes the search/magnifying-glass icon that's currently next to the in page search bar.

If we were to make the change, should the about:home search UI change as well?
Flags: needinfo?(philipp)
(Assignee)

Comment 5

3 years ago
Created attachment 8587045 [details]
UX:UI_Tile_Updates_Fx39_V1.pdf

Everyone - I simply made an error by including specs for the Yahoo! logo. Please disregard. Just ensure that the specs for the input field and button match, if they don't already.

An updated spec has been provided.
Attachment #8587018 - Attachment is obsolete: true
Flags: needinfo?(philipp)
Flags: needinfo?(athornburgh)
(Assignee)

Comment 6

3 years ago
Created attachment 8587511 [details]
UX:UI_Tile_Updates_Fx39_V2.pdf

V2: Additions to original Style Guide (New Tab page controls).
(Assignee)

Comment 7

3 years ago
Created attachment 8587538 [details]
UX:UI_Tile_Updates_Fx39_V2.pdf
Attachment #8587511 - Attachment is obsolete: true
(Assignee)

Comment 8

3 years ago
Created attachment 8587539 [details]
images_Tiles_Fx39.zip

All images specified in the Style Guide are included here.
I love the tiles styling with the integrated titles!
The two PDFs still include the Yahoo word mark. Am I getting a cached version or something like that, or is that intentional?
(Assignee)

Comment 10

3 years ago
Again, please disregard what's show in the comps. 

By stating "inherit current styling", I meant to imply that we should continue to show the eyeglass icon and NO logo currently in production.

What's depicted is just for "show"... But I imagine a day when the eyeglass is replaced by an arrow which would launch a list of other search engines. Selecting any search engine would display the provider's logo in the field to remind them of their choice.
Comment on attachment 8587045 [details]
UX:UI_Tile_Updates_Fx39_V1.pdf

Does there need to be a way to retrigger the onboarding experience? It seems that the Learn about New Tab is just a link that loads in the current page.

I would also assume we would probably just use the system/OS checkbox for the Include suggested sites option.
Attachment #8587045 - Attachment is obsolete: true
(Assignee)

Comment 12

3 years ago
Since testing has shown that on-boarding does not help users understand New Tab, I vote that we do NOT need to allow users to retrigger it. If anything, Learn About New Tab should be where they go after to learn more.

As for the UI tweaks - I would need to see it before agreeing (or proposing a compromise). Is that possible?
(In reply to Aaron from comment #12)
> I vote that we do NOT need to allow users to retrigger it.
Sounds good. I suppose we store the show-yet value as a pref, so if someone /really/ wanted to see it again, they could go to about:config. ;)

> As for the UI tweaks - I would need to see it before agreeing (or proposing
> a compromise). Is that possible?
Not a problem. We'll attach screenshots and tryserver builds to the implementation bugs. And even after landing where then you can test in Nightly, we can tweak things too. (Although probably better to check before actually committing to mozilla-central.)

Comment 14

3 years ago
Comment on attachment 8587538 [details]
UX:UI_Tile_Updates_Fx39_V2.pdf

You should probably consider updating the search box to the new one off UI.
(Assignee)

Comment 15

3 years ago
Created attachment 8591127 [details]
UX:UI_Tile_Updates_Fx39_V3.pdf

This final version includes all the on-boarding stuff.
(Assignee)

Comment 16

3 years ago
Created attachment 8591128 [details]
images_Tiles_Fx39.zip

All final images are included here.
Attachment #8587539 - Attachment is obsolete: true
Created attachment 8592303 [details]
inline examples

Here's a quick copy/paste hack of an inline example instead of highlighting something in the tile grid layout. This avoids depending on the actual layout of the new tab page where some users might have pinned or moved things around.

So the high level concept is, can we do the highlighting inline in space that doesn't change based on the user?
Flags: needinfo?(athornburgh)
(In reply to Aaron from comment #15)
> Created attachment 8591127 [details]
> UX:UI_Tile_Updates_Fx39_V3.pdf
The pin/block locations on the tiles are swapped (currently pin in top left, block top right; attached design has pin top right, block top left). Not sure if this is intended.

Can you also provide the expected messaging as text (as opposed to as images) for onboarding new users 1a,2a,3a as well as existing users 1b,2b,3b?
(Assignee)

Comment 19

3 years ago
Created attachment 8592365 [details]
UX:UI_Tile_Updates_Fx39_V4.pdf

NEW page 18-20 show what the on-boarding experience should look like on small screens.
Flags: needinfo?(athornburgh)
(Assignee)

Comment 20

3 years ago
RAW TEXT

1A

Welcome to New Tab on Firefox!

In order to provide this service, Mozilla collects and uses certain analytics information relating to the sites you visit in accordance with our [link] Privacy Policy [/link].

You can turn off this feature by clicking the gear (COG) button and selecting "Show blank page" in the [bold] New Tab Controls [/bold] menu.


1B

New Tab will show the sites you visit most frequently, along with sites we think might be of interest to you. To get started, you'll see several sites from Mozilla.

You can [bold] Delete [/bold] or [bold] pin [/bold] any site by using the controls available on rollover.


1C

Some of the sites you will see may be suggested by Mozilla and may be sponsored by a Mozilla partner. We'll always indicate which sites are sponsored. [link] Learn more [/link]

Firefox will only show sites that most closely match your interests on the Web.

+++++

2A

New Tab got an update!

Now when you open New Tab, you'll also see sites we think might be interesting to you.

Firefox will only show sites that most closely match your interests on the Web.


2B

Some of the sites you will see may be suggested by Mozilla and may be sponsored by a Mozilla partner. We'll always indicate which sites are sponsored. [link] Learn more [/link]


[bold] Delete [/bold] and [bold] pin [/bold] controls are available on rollover.


2C

In order to provide this service, Mozilla collects and uses certain analytics information relating to the sites you visit in accordance with our [link] Privacy Policy [/link].

You can turn off this feature by clicking the gear (COG) button and selecting "Show blank page" in the [bold] New Tab Controls [/bold] menu.
(Assignee)

Comment 21

3 years ago
Created attachment 8592387 [details]
UX:UI_Tile_Updates_Fx39_V4.pdf

Fixed the comps to show the correct text.
Attachment #8592365 - Attachment is obsolete: true
(Assignee)

Comment 22

3 years ago
Comment on attachment 8592303 [details]
inline examples

Ed, I've updated the original bug with an updated Style Guide. Lemme know if you have any questions!
(Assignee)

Comment 23

3 years ago
Swapping the "delete" and "pin" controls was NOT intentional. My bad.

Please change the text in the on-boarding to reflect the correct order the user will see (left to right).
The current hover text on the new tab tile controls:

5 newtab.pin=Pin this site at its current position
6 newtab.unpin=Unpin this site
7 newtab.block=Remove this site

In particular the string for "block" says "Remove" -- so not sure if we should change that hover text to "Delete" or change the introduction to say "Remove"

Although I have no idea how it's translated to all the other languages given that "block" is in the internal string name but l10n tends to translate from the english version. Sample size of 2 says it was translated as "remove"

de:      7 newtab.block=Seite entfernen
entfernen = remove
http://hg.mozilla.org/l10n-central/de/file/tip/browser/chrome/browser/newTab.properties

fr:      7 newtab.block=Supprimer ce site
supprimer = remove
http://hg.mozilla.org/l10n-central/fr/file/tip/browser/chrome/browser/newTab.properties
(Assignee)

Comment 25

3 years ago
I'm cool with "remove".
As per meeting today, we decided to do a couple of things:

1) Have the compact/small screen design as higher priority and the highlighted tiles as a less high priority to be done afterwards

2) Since we can't guarantee the placement of suggested tiles to be highlighted, we will place a unicorn tile in their spot.

Comment 27

3 years ago
Additionally, concerning the new in-tile title bar treatment, we should:

1) display domain name: strip out any leading "www" and display domain.com (.org, .net, .edu, .gov or other new gTLDs). Subdomains such as drive.google.com or bugzilla.mozilla.org should be included. No pages or paths should be included.

2) long domain names: we should come up with some logic that truncates long domain names. For example, superlong.superfantasticdomain.community. Perhaps, we can just display the domain name or use ellipsis if the name exceeds a certain character.

3) favicon should be precede the domain name: when not available, use the generic globe icon.
Aaron, do you have updated images for the small screen design? In particular, a background image for the onboarding panel with the grey gradient?
(Assignee)

Comment 29

3 years ago
There are no new images. In fact, for the small screen experience, you'd be removing the blue gradient image. Also, the gray to white gradient shown should be code based, not image based.
Ok thanks Aaron,

Kevin, when you have the following links for on-boarding, please let me know:

'Learn more'
'More about New Tab'
'About your privacy'
'Privacy Policy'

(I assume the last two are the the same link)
(Assignee)

Comment 31

3 years ago
On-boarding FYI - "Privacy Policy" should instead "Privacy Notice". The comps on dropbox have been updated.
(Assignee)

Comment 32

3 years ago
For Fx38 > Suggested Tiles - Contextual statement should say "Suggested for <mobile phone> visitors"

For Fx39 > Suggested Tiles - Contextual statement changes to "Because you're interested in <mobile phones>"
Any reason not for the shorter "Suggested for <mobile phone> interest" ?
(Assignee)

Comment 34

3 years ago
That isn't a proper sentence. Personally, I'm not sure why we need to say "Suggested" at all since the label already says so. I anticipate much debate around this. Not sure who would have the final say...

Comment 35

3 years ago
I suggest leaving the way it is. We'll have to go to the drawing board again for 39.

Updated

3 years ago
Depends on: 1121549

Updated

3 years ago
Blocks: 1121549
No longer depends on: 1121549
(Assignee)

Comment 36

3 years ago
UNIVERSAL CHANGES REQUESTED

1.) All fonts for Mac desktop computers should be Helvetica - NO Lucida Grande or Arial

2.) All fonts for PC desktop computers should be Segoe - NO Arial

Once Firefox ships with Fira, we can update individual text elements.

Updated

3 years ago
Depends on: 1158853

Updated

3 years ago
Depends on: 1158856

Updated

3 years ago
Depends on: 1158858

Updated

3 years ago
Depends on: 1158859
(Assignee)

Comment 37

3 years ago
Please note that there is a NEW link to the current comps for New Tab on Firefox 39:
https://www.dropbox.com/sh/w4a7rbrvm9x6hse/AAAcx1BACed10LrtqL69KZHxa?dl=0

The comps now reflect the correct placement of "pin" and "delete" icons.

This is the last time I will change this link - sorry for any inconvenience.
(In reply to Aaron from comment #36)
> UNIVERSAL CHANGES REQUESTED
> 
> 1.) All fonts for Mac desktop computers should be Helvetica - NO Lucida Grande
>  or Arial
> 
> 2.) All fonts for PC desktop computers should be Segoe - NO Arial
> 
> Once Firefox ships with Fira, we can update individual text elements.

Segoe isn't available by default on Windows XP (~14% of users). Are we falling back to Tahoma there?
Flags: needinfo?(athornburgh)
(Assignee)

Comment 39

3 years ago
phlsa: Yes, Tahoma is suitable.
Flags: needinfo?(athornburgh)
Sounds like the designs are done for 39, so resolving fixed. The implementation will be handled in the blocked bugs.
Status: NEW → RESOLVED
Iteration: --- → 40.3 - 11 May
Points: --- → 13
Last Resolved: 3 years ago
No longer depends on: 1158853, 1158856, 1158858, 1158859
Resolution: --- → FIXED
Depends on: 1164594
No longer depends on: 1164594

Updated

3 years ago
Depends on: 1167805
No longer depends on: 1167805
You need to log in before you can comment on or make changes to this bug.