update Google/Yahoo/Wikipedia icons to have better icon sizes

VERIFIED FIXED in Firefox 28

Status

defect
P1
normal
VERIFIED FIXED
6 years ago
5 years ago

People

(Reporter: ywang, Assigned: mconnor)

Tracking

Trunk
Firefox 30
x86
Windows 8
Dependency tree / graph

Firefox Tracking Flags

(firefox28 verified, firefox29 verified, firefox30 verified, b2g-v1.3 fixed)

Details

(Whiteboard: [release28] p=0 s=it-30c-29a-28b.3 r=ff28 [qa+])

Attachments

(6 attachments)

Talked with Michael today about the search icons on auto-complete screen. Currently, the new BING icon is bigger than the rest provider icons. We should make them look consistent.

Also, let's update the Yahoo! search icon with the latest brand. Unfortunately(Not surprisingly), Yahoo! doesn't have any brand guideline for reference. It's likely that we will have to mockup one in 74px*74px for use.
Assignee: nobody → mmaslaney
Hi Yuan, is this a [beta28] or [release28] bug?
Flags: needinfo?(ywang)
Adding mconnor.  Partner engineering has been updating these icons in bug 936198 and bug 947275.
Blocks: 947275
Flags: needinfo?(mconnor)
Summary: UX work - Fix the size of BING search icon and update Yahoo! icon on Auto-complete → Fix the size of BING search icon and update Yahoo! icon on Auto-complete
Whiteboard: [defect] p=0
Assignee

Comment 3

6 years ago
I'm going to assume/assert that the right UX is going to look like the new Bing icon, rather than the other icons, especially on higher-DPI screens.  That means we need large format Yahoo, Google and Wikipedia icons.  Yuan, can you confirm so I can go hit up partners for assets?  (And if correct, please feel free to assign this bug to me.)
Flags: needinfo?(mconnor)
I think this should be [beta 28].

Given the fact that original technical constraint of displaying fav icons in large format has been resolved, let's look into using large format icons for Yahoo, Google, and Wiki. 

Michael, could you please make a visual call on whether we should keep using original format or change to a larger format as the latest Bing icon?

As soon as a final decision is made, Mike Connor will ping partners to get visual assets.
Flags: needinfo?(ywang) → needinfo?(mmaslaney)
Yuan, I would move to the larger format, which would make them easier to identify.
Flags: needinfo?(mmaslaney)
Whiteboard: [defect] p=0 → [defect] [beta28] p=0
Assignee

Comment 6

6 years ago
Taking this, since it's on me to get assets from partners.
Assignee: mmaslaney → mconnor
(In reply to Yuan Wang(:Yuan) – Firefox UX Team from comment #0)
> Created attachment 8349120 [details]
> Screen Shot 2013-12-17 at 5.06.41 PM.png
> 
> Talked with Michael today about the search icons on auto-complete screen.
> Currently, the new BING icon is bigger than the rest provider icons. We
> should make them look consistent.
> 
> Also, let's update the Yahoo! search icon with the latest brand.
> Unfortunately(Not surprisingly), Yahoo! doesn't have any brand guideline for
> reference. It's likely that we will have to mockup one in 74px*74px for use.

The size from the original mockup was 32 x 32 since that was generally the size I felt confident we could get (or currently had).

If we are deciding on final large size I would recommend sticking with 64 x 64 and centering them in the tile with the appropriate background color. Icon sizes are generally a multiples of 16 and 64 x 64 is a more likely size for people to have.
My previous attempts at programmatically getting the right background color from an icon failed. We might get better results from a larger 64x64 icon, but I doubt it. We use the OpenSearch format[1] to define search plugins, that's where the logo image comes from. The plugin file is localized and each locale can have a different set of plugins and even logo images for the same engine. I don't think there's an easy way to add bg color information to that file. Adding it anywhere else would probably cause a localization revolt with people on the streets burning cars and stuff.

From how quickly the original images were generated for bug 895520 I assumed it wouldn't be that big a deal to generate for other engines. If this is not the case we should consider reverting bug 895520 for metro v1 and rethink our search UI for 64x64 icons or similar. I'd hate to do that as the larger search tiles we had before were being cut on smaller screen.

If 64x64 is readily available, is creating the 74x74 image by adding the borders to the 64x64 an option? 

[1] - http://www.opensearch.org/Specifications/OpenSearch/1.1
Assignee

Comment 9

6 years ago
We're currently shipping 74x74 PNGs, it seems. Let's ignore "what we think we can get" here and decide _precisely_ what we want, and then modify as circumstances warrant.  I'm happy to chase partners for appropriately-sized assets.  One significant issue is that both Yahoo and Google have non-square icons, so simply extending the border with a background colour isn't going to look right if we're aiming for icon+colour.

Current Bing icon is a 70x70 icon with a bit of extra padding, FWIW.
We may need images for different engines for other locales as well. Italian currently has ebay and amazon for example, see bug 949521. I'm not sure how we decide which engines show up for each locale in metro though. :kar do you know?
Flags: needinfo?(krudnitski)
(In reply to Rodrigo Silveira [:rsilveira] from comment #10)
> I'm not sure how we decide which engines show up for each locale in metro though

Right now they're the same each locale ships on desktop. The only differences are google.xml->googlemetrofx.xml and bing.xml->bingmetrofx.xml, since both Google and Bing provide locale detection server side.
Assignee

Updated

6 years ago
Summary: Fix the size of BING search icon and update Yahoo! icon on Auto-complete → update Google/Yahoo/Wikipedia icons to have better icon sizes
It is my understanding that the l10n community gets the icons needed since they have either established relationships or endorsed the search providers for that particular locale. So once it's firmly settled on the icon size, en-US is fixed up and the other locales should follow suit (with an appropriate bug) to get the correct-sized icons from other search providers pertinent to their locale. At least that's my understanding.
Flags: needinfo?(krudnitski)
Duplicate of this bug: 918426
Whiteboard: [defect] [beta28] p=0 → [beta28] [defect] p=0
Assignee

Comment 14

6 years ago
Posted image Yahoo_Main.jpg
So... this is what Yahoo! came back with... I don't know enough about the various contexts, would this get too small or would we fall back to the 16x16 icon on small/low dpi displays?
Flags: needinfo?(ywang)
To get the large icon it needs to be 74x74. Can we add a 2px border to the image?
Assignee

Comment 17

6 years ago
Man, I didn't even verify that it was 74x74. Good catch!
Flags: needinfo?(ywang)
Hey Mike, we've got Yahoo covered here, but we're still missing Wikipedia and Google. Can we just work up our own tiles or are these partners going to have to send us something?
Flags: needinfo?(mconnor)
Assignee

Comment 19

6 years ago
I'll reach out to Google first, and worst case we can fudge something up.

Wikipedia already has SVG options we can use: http://wikimediafoundation.org/wiki/File:Wikipedia_wordmark.svg or http://wikimediafoundation.org/wiki/File:Wikipedia%27s_W.svg   I _think_ the wordmark is too small there, but it's more fodder for changing away from square icons for this UI.

mmaslaney, thoughts?
Flags: needinfo?(mconnor) → needinfo?(mmaslaney)
Assignee

Comment 20

6 years ago
This is a quick resize of the 150x150 icon the Google Search app uses on Win8, I've reached out to our partner contact at Google to determine if this works.  If we don't use this, I expect we'll use something very similar.
The Wikipedia wordmark works for our given size. I'll go ahead and create a template to optically size all the icons, which will make them more consistent. 

Is Yahoo against us using the solo "Y" wordmark? To keep icons consistent, It would be ideal have all using wordmarks.
Flags: needinfo?(mmaslaney) → needinfo?(mconnor)
Assignee

Comment 22

6 years ago
I'm a little confused... do you mean the wordmark or the single-letter icon?  I wouldn't consider the "W" icon a wordmark.

As for Yahoo! Yuan pointed out that they're increasingly using the full name version in preference to the "Y!" iconography, space permitting.  The favicon is the only exception I've seen, everything else (i.e. Weather and Mail apps on Android) use the full logo.  I'm not sure it makes sense to ask them to diverge from their standard branding.
Flags: needinfo?(mconnor)
Whiteboard: [beta28] [defect] p=0 → [beta28] [defect] p=1
Assignee

Comment 23

6 years ago
Still waiting on Google.

For needinfo, see comment 22.
Flags: needinfo?(mmaslaney)
Sorry for the confusion, Mike. Considering Yahoo's stance, should we then use the full wordmark/logo for each vendor? It's not a huge deal if we mix single letter and full name logos together, but it would be nice to be consistent.
Flags: needinfo?(mmaslaney)
Whiteboard: [beta28] [defect] p=1 → [release28] [defect] p=1
Assignee

Comment 25

6 years ago
While I'm all for visual consistency, other brands have different policies, who gets to "win" here?  In the absence of text, I'd be in favour of wordmarks over logos, but ultimately I think the best icons to use are the ones that match how those brands surface themselves elsewhere.  It may not look as clean visually, but I'd argue that user familiarity should trump that.

Updated

6 years ago
Blocks: 949521
Whiteboard: [release28] [defect] p=1 → [release28] p=1 r=ff28
Whiteboard: [release28] p=1 r=ff28 → [release28] p=0 r=ff28
Status: NEW → ASSIGNED
QA Contact: kamiljoz
Priority: -- → P1
Whiteboard: [release28] p=0 r=ff28 → [release28] p=0 s=it-30c-29a-28b.3 r=ff28
Attached, the 74x74 Wikipedia icon.
Assignee

Comment 27

5 years ago
Posted patch metroIconsSplinter Review
Yahoo and Bing are current.  These plugins work correctly, though we have the wrong form code.  Will fix that soonish.
Assignee

Updated

5 years ago
Attachment #8384918 - Flags: review?(mbrubeck)
Attachment #8384918 - Flags: review?(mbrubeck) → review+
Assignee

Comment 28

5 years ago
Comment on attachment 8384918 [details] [diff] [review]
metroIcons

https://hg.mozilla.org/integration/mozilla-inbound/rev/e03d758c7d0d

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 
User impact if declined: ugly or very small icons
Testing completed (on m-c, etc.): tested plugins on nightly and beta 
Risk to taking this patch (and alternatives if risky): only changes the icon for Metro, worst case is a blank box
String or IDL/UUID changes made by this patch: none
Attachment #8384918 - Flags: approval-mozilla-beta?
Attachment #8384918 - Flags: approval-mozilla-aurora?
https://hg.mozilla.org/mozilla-central/rev/e03d758c7d0d
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 30
Whiteboard: [release28] p=0 s=it-30c-29a-28b.3 r=ff28 → [release28] p=0 s=it-30c-29a-28b.3 r=ff28 [qa+]
For testing and verification.  Reopen if any defects found.
Flags: needinfo?(kamiljoz)
Attachment #8384918 - Flags: approval-mozilla-beta?
Attachment #8384918 - Flags: approval-mozilla-beta+
Attachment #8384918 - Flags: approval-mozilla-aurora?
Attachment #8384918 - Flags: approval-mozilla-aurora+
Went through the verification process using the following builds:
- http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2014-03-09-03-02-04-mozilla-central/
- http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2014-03-09-00-40-03-mozilla-aurora/
- http://ftp.mozilla.org/pub/mozilla.org/firefox/releases/28.0b9/win32/en-US/

Before going through the verification process, I installed an older version of Nightly and made sure that the icon's have been updated in the newer builds compared to the older builds:
- http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/2013/12/2013-12-01-03-02-03-mozilla-central/

- Ensured that the new icon assets are being used (used the attached images from this ticket as a point of reference)
- Ensured that the search assets are larger than the previous assets
- Ensured that the assets look good on a High DPI screen (Surface Pro 2)
- Ensured that the assets look good on a normal screen (X1 Carbon)
- Ensured that all four of the search icons are appearing every single time (Bing, Yahoo, Google, Wikipedia)
Status: RESOLVED → VERIFIED
Flags: needinfo?(kamiljoz)
You need to log in before you can comment on or make changes to this bug.