Icon improvements 2014

[sven]

Quote from the blogpost: Time to unify - We’ve improved our icon and logo

The icon needs to fulfill the following requirements:

• Works as an 16x16px icon (e.g. for Firefox or Safari)
• Works as an 19x19px icon (e.g. for Google Chrome)
• Works as an 24x24px, 32x32px, 38x38px and 48x48px icon (e.g. retina displays)
• Should be more recognizable than the old icon
• Should be well embedded into the browsers’ extension-bar
• All icon sizes needs to be consistent in their appearance
• The ABP label and the stop-sign are required (more on this later)
• Use the same open source font for every size

Getting into more detail

As you can imagine, it’s very challenging to redesign an icon that is already very prominent, especially if you don’t want to confuse some of the over 60 million users that we have. This project is not a project which started yesterday. The idea to create a new logo is more than a year old. Since then, I created lots of different variants in some quiet minutes, which, for example, didn’t include the ABP label. However, we quickly figured out that we can’t make such a huge leaps in so short a time. Some requirements evolved after creating initial drafts. The idea was to create a logo which has the stop sign and the ABP letters in it. An additional goal was to improve the scalability and similarity between the icon and logo. Using an open source font in our product is IMO now overdue since it is not that difficult to use custom fonts on websites anymore.

This ABP icon has cost me a lot of sleepless nights and it was, and still is, necessary to be patient while developing it (especially the 16x16 one). I asked myself more than once: who had this great idea to call this extension Adblock Plus and why did we put the letters ABP into it…

It is obvious that the three letters ABP are too much for a 16x16 icon in general. But it’s inevitable for now, since we figured out that we can’t change the combination of having the stop sign and ABP label inside. However, I want to show you what I’ve ended up with.


The new icon and a new/old comparison (click to enlarge image)

We have three different icon versions at the moment.

• The one which is used for Google Chrome and Opera
• The one for Firefox and Internet Explorer and
• The one for Safari

We can’t change anything about the grayscale effect in Safari but we could change the icon for all browsers in a way so that they are more equal. At the moment, the Google Chrome and the Firefox icon are quite unequal.

Looking back at our requirements, you will find these two:

• Should be more recognizable than the old icon
• Should be well embedded into the browser user interface

Color
To meet these requirements, color is very important of course. At some point, I decided to use #CD0000 because I wanted to have a recognisable red with a big contrast in combination with the white ABP label. This color was not chosen randomly. I used the WCAG 2.0 contrast ratio formula (You can find an easy calculator for this here) to ensure an acceptable contrast in our future user interfaces / websites . You need to think of it, for example, in the context of developing a website or tools for color blind people (or are there conditions other than color blindness that you mean by ‘color deficits’?).Since there are also a lot of people with color deficits out there, it is of course one of our goals to ensure that most of the people out there can experience our tools and websites without big limitations. The color #CD0000 fulfills all the important WCAG 2 requirements except the WCAG 2 AAA ones. But this isn’t bad because the WCAG 2 AAA requirements include a font which is smaller than 18pt. The ABP icon needs to be scaled down to a size of approx. 34x34px to reach the 18pt font in the ABP label. Therefore, I implemented a dark dropshadow to fulfill also the WCAG 2 AAA requirements. This dark shadow has the color value #8f0000. If you use the WCAG calculator and put #8f0000 as the background color and #FFFFFF as the foreground color you will see that we fulfill all WCAG 2 requirements.

The extra pixel
Optimizing the visibility of the ABP label in the small icon version is one of the more challenging tasks. What I’ve done is:

• First, I used a full colored 1px drop shadow to increase the contrast there
• As a second step, I tried to improve the visibility of the font itself. I solved this problem with some dark extra pixels which I added to the label.

I prepared a little infographic to show the most important details and the implementation of the extra pixels.


16x16 icon details (click to enlarge image)

High definition icons
I have not been able to test the 32x32 and the 38x38 versions for high definition (e.g. retina) displays as of yet, so please don’t focus on those sizes.

How can you support us?
I’d appreciate any feedback related to the logo from a variety of user groups, including developers, designers, ABP users or just people that are interested in creating something together.

If you want to play around with the logo you can do this with the

• ABP icon comparison Photoshop file
• Please download the font Source Sans Pro first
• Let me know if you need other files

Last but not least, you have the chance to vote on whether or not you think the logo is ready to implement or if it still needs some improvements.

[Aulë]

My comments are specifically about the color version of the icon.

The changes certainly do make the icon more recognizable, as required. They do, however, achieve that effect at the cost of introducing two problems:

The icon already stands out, and much more so after the changes, but crying for attention is not the purpose of the permanent UI button. Even less so if said button is rarely used. I am aware of your conflicting desire to use it to improve brand recognition, but I nevertheless suggest you to think more about ergonomics and aesthetics of the entire browser UI. Please consider toning it down a bit.

The combination of anti-aliasing and manual anti-anti-aliasing makes the font look very poorly, particularly the upper halves of the letters. If you want to improve legibility, I am aware of two techniques that produce both good and good-looking results. First, harder and requiring a lot of manual work, is to aim for the cartoonish look of, say, late SNES games. Second, much easier, is to use automatic hinting - make sure that anti-aliasing and hinting (but not sub-pixel rendering) are on, and simply try to find a good combination of text size and position in a graphics program.

[sven]

Thank you for your useful feedback Aulë.

The icon already stands out, and much more so after the changes, but crying for attention is not the purpose of the permanent UI button. Even less so if said button is rarely used. I am aware of your conflicting desire to use it to improve brand recognition, but I nevertheless suggest you to think more about ergonomics and aesthetics of the entire browser UI. Please consider toning it down a bit.

Crying for attention is not what we want to achieve here. I agree that "crying for attention" shouldn't be the purpose of a permanent UI button but have a look at the comparison below. Is the new version really crying for attention or does it seems like it is more integrated into the browser and therefore perceived more as a common browser element (which usually doesn't grab your attention)? I created an image to see the difference a little better. Consider that you would always move your eyes automatically from the website you're watching to the icon if it would be an attention grabber. Nevertheless there are other extension icons like for example the hola icon (->) which is also not an attention grabber despite of it's exceptional design.

but I nevertheless suggest you to think more about ergonomics and aesthetics of the entire browser UI

That's exactly what we want to achieve. Therefore we added better shadow effects which make the icon looks like it's integrated into the browser.

The combination of anti-aliasing and manual anti-anti-aliasing makes the font look very poorly, particularly the upper halves of the letters.

I'm sure that we should be able to improve the icon after time with little iterative improvements. As you might have seen there is a version on the icon that says v.01. This should hint that we will improve or extend the list of icons in the future. The important question to ask yourself now is: Is the new suggested icon in better, worse or the same quality compared with the old icon. If it's not worse than it's a good idea to use this one for the future and to improve it like described. As you know, one of our main goals is to unify the icon for every browser and to design it that it looks very similar to the new ABP logo.

If you want to improve legibility, I am aware of two techniques that produce both good and good-looking results. First, harder and requiring a lot of manual work, is to aim for the cartoonish look of, say, late SNES games. Second, much easier, is to use automatic hinting - make sure that anti-aliasing and hinting (but not sub-pixel rendering) are on, and simply try to find a good combination of text size and position in a graphics program.

I followed your advice and tried some of these techniques. You can find the results in the image below:



Thanks for the text hinting hint . I didn't know this method before. Unfortunately it's not integrated in Photoshop but in Gimp. Therefore i made the test with Gimp but after reading the theory about font hinting i assumed that this method will not help and i think you can see this very well in the image above.

[iMac]

Although the new icon is technically superior (readability etc.) I'm afraid this isn't the main issue with ABP's icon.
It's the fact that it's an absolute eyesore.

I've been an Adblock Plus user for many years and many browsers, and the first thing I do after installing ABP is always remove any and all icons.
It's a little bit inconvenient to have to go fish for options in the menubar, but worth it to not have to look at that pimple on your UI all day long.

On Safari, however, I find myself not removing the icon. Why? Probably because it matches the rest of the browser UI. Being grayscale helps, too.

I realize the red color is part of why it's recognizable, but it's plenty recognizable in Safari still.
You were also talking about unifying, but the grayscale is supposedly some kind of technical limitation in Safari?
I suppose that means the only way to make everything truly unified is to make it grayscale everywhere?
I would be OK with this. And maybe I wouldn't need to remove it form Firefox anymore.

[Lain_13]

New designs for an icon certenly does look better but I do agree with the previous post. It really doesn't looks like it belongs there. Especially if we take into account the fact that all standard icons in the modern versions of Firefox and Chrome are grayscale. So, it should match browser theme.

One more thing which is definitely stands out is the fact that current icon seems like floating above the toolbar and the new one seems like painted on top of it.
If you look closely at the standard Chrome icons you will notice that they looks like there are two layers in place of the toolbar and icons are carved through the first layer all the way to the second one with contrast shades at the edges. Firefox uses similar approach but bottom layer seems darker and shadows isn't that sharp but much wider.

Another issue which I've noticed in the Chrome version of ABP icon is size. It's noticeably bigger than any standard browser icon.


So, it could be possble to leave it red in Firefox and Chrome but shade of that red color should match shade of the grey color of the "bottom" layer and icon should have similar "carved" design as the rest of the browser icons. In such case it will look much more natural there and won't turn into an "eyesore".

[Mariia Kolkee]

Ola khé aze!

[snoack]

Please note that extension icons on Chrome aren't supposed to mimic the built-in menu items, which wouldn't be possible anyway since the color and design of the built-in icons depend on the operating system and theme. So the official guidelines for Chrome extension icons states following:

• Do use big, colorful icons that make the most of the 38x38-pixel space. Browser action icons should seem a little bigger and heavier than page action icons.
• Don't attempt to mimic Google Chrome's monochrome menu icon. That doesn't work well with themes, and anyway, extensions should stand out a little.

[sven]

We made some further readability improvements on our newest icon. You can see the results in our current chrome, safari and opera devbuilds.

It really doesn't looks like it belongs there. Especially if we take into account the fact that all standard icons in the modern versions of Firefox and Chrome are grayscale. So, it should match browser theme.

From a design perspective it would be nice to have only icons in the same style. From a user experience point of view of adblock plus this behavior would harm the user experience of most of our users because the greyscale icon is currently the indicator for the disabled adblock plus status (except safari). So you see most of our users would be confused after seeing the adblock plus icon in greyscale because they wouldn't be able to say if it's active or deactive anymore. This icon change has it's goals like described in the first post which are:

• ...
  Should be more recognizable than the old icon (we got quite a lot of feedback that we we're successful with this)
  Should be well embedded into the browsers’ extension-bar (this doesn't mean to look like the browser built in icons)
  All icon sizes needs to be consistent in their appearance (as long this is possible. safari is the only browser where we aren't able to use the colored icon)
  ...

To change the icon into a greyscaled or browser specific built-in icon would be way more of an effort for now and it is questionable if this is a good idea because of the UX problem that i've mentioned. I would rather see a feature for users in the future which makes it easily possible for them to change the toolbar icon with an own one.

[Felder951]

In the Properties Window, put custom into the icon property.
Add your icon to the project. Dragging into the Project Explorer is fine. The icon should be 16×16.
Add this code to your project globally.