Closed Bug 1150228 Opened 5 years ago Closed 5 years ago
UX/UI Updates to Tiles for Fx 39
40.3 - 11 May
1.02 MB, application/pdf
1.75 MB, application/pdf
60.93 KB, application/zip
525.79 KB, image/png
2.07 MB, application/pdf
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.
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
OS: Mac OS X → All
QA Contact: edilee
Hardware: x86 → All
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.
(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?
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
V2: Additions to original Style Guide (New Tab page controls).
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?
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
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 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.
This final version includes all the on-boarding stuff.
All final images are included here.
Attachment #8587539 - Attachment is obsolete: true
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?
(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?
NEW page 18-20 show what the on-boarding experience should look like on small screens.
Fixed the comps to show the correct text.
Attachment #8592365 - Attachment is obsolete: true
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!
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
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.
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?
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.
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" ?
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...
I suggest leaving the way it is. We'll have to go to the drawing board again for 39.
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.
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?
phlsa: Yes, Tahoma is suitable.
Sounds like the designs are done for 39, so resolving fixed. The implementation will be handled in the blocked bugs.
You need to log in before you can comment on or make changes to this bug.