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

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: General, defect, P1)

Description

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: 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.

Comment 1

[Marco Mucci [:MarcoM]]

Hi Yuan, is this a [beta28] or [release28] bug?

Comment 2

[Matt Brubeck (:mbrubeck)]

Adding mconnor.  Partner engineering has been updating these icons in bug 936198 and bug 947275.

Comment 3

[Mike Connor [:mconnor]]

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.)

Comment 4

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

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.

Comment 5

[Michael Maslaney [:mmaslaney] ([e-mail])]

Yuan, I would move to the larger format, which would make them easier to identify.

Comment 6

[Mike Connor [:mconnor]]

Taking this, since it's on me to get assets from partners.

Comment 7

[Stephen Horlander [:shorlander]]

(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.

Comment 8

[Rodrigo Silveira [:rsilveira] [:rodms]]

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

Comment 9

[Mike Connor [:mconnor]]

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.

Comment 10

[Rodrigo Silveira [:rsilveira] [:rodms]]

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?

Comment 11

[Francesco Lodolo [:flod]]

(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.

Comment 12

[Karen Rudnitski [:kar]]

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.

Comment 14

[Mike Connor [:mconnor]]

Attachment: 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?

Comment 15

[Rodrigo Silveira [:rsilveira] [:rodms]]

To get the large icon it needs to be 74x74. Can we add a 2px border to the image?

Comment 16

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Yahoo_Main.png

Modified to 74x74px

Comment 17

[Mike Connor [:mconnor]]

Man, I didn't even verify that it was 74x74. Good catch!

Comment 18

[Jim Mathies [:jimm]]

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?

Comment 19

[Mike Connor [:mconnor]]

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?

Comment 20

[Mike Connor [:mconnor]]

Attachment: placeholder Google image

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.

Comment 21

[Michael Maslaney [:mmaslaney] ([e-mail])]

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.

Comment 22

[Mike Connor [:mconnor]]

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.

Comment 23

[Mike Connor [:mconnor]]

Still waiting on Google.

For needinfo, see comment 22.

Comment 24

[Michael Maslaney [:mmaslaney] ([e-mail])]

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.

Comment 25

[Mike Connor [:mconnor]]

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.

Comment 26

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: search_icon_wikipedia.png

Attached, the 74x74 Wikipedia icon.

Comment 27

[Mike Connor [:mconnor]]

Attachment: metroIcons

Yahoo and Bing are current.  These plugins work correctly, though we have the wrong form code.  Will fix that soonish.

Comment 28

[Mike Connor [:mconnor]]

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

Comment 29

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/e03d758c7d0d

Comment 30

[Marco Mucci [:MarcoM]]

For testing and verification.  Reopen if any defects found.

Comment 31

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/efdaac7851ae
https://hg.mozilla.org/releases/mozilla-beta/rev/d13e6de7885f

Comment 32

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-b2g28_v1_3/rev/d13e6de7885f

Comment 33

[Kamil Jozwiak [:kjozwiak]]

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)