Monday, July 30, 2018

What an icon says about you

Icons are an important part of modern computing. We see icons everywhere, from actions on the desktop to navigation in an application to action icons on a website. You can't go long without seeing an icon.

When I first started doing usability testing, I focused on icons. How will users perceive the function exposed by a single button, especially if that button is an icon? Icons can be abstract or representative. For example: in a word processing program, what icon would you click to print a document? The icon you have in mind probably looks something like this: (*wikimedia)

That is a fairly artistic rendering of a printer. But how simple can you make the printer icon, and still recognize it as a printer? (*wikimedia)

This high contrast icon is still recognizable as a printer to many users. Especially when presented on a toolbar with other icons, usually on the left end of the toolbar near the new-file and open-file and save-file icons, you'd probably recognize this as a printer icon. (In this case, certain icons can be learned based on association. In most applications, the "Print" action is usually near the "New File" and "Save File" actions.)

Branding is another form of an icon. You can associate a product or a brand through its icon. You can immediately recognize certain products through their icons, from the Nike "swoosh," the McDonald's "M," the Apple "apple," and the AT&T "Death Star." Open source software has its own recognizable icons, including Tux the Penguin, the GNU gnu, and "Beastie" the BSD Daemon.

Once upon a time, the Netscape "N" was instantly recognizable as the web browser's brand icon. Later, the organization spun off into Mozilla, represented by a less memorable big red dragon head. Finally, we have Firefox, represented by a stylized fox wrapped around a small globe. The fox icon has represented the Firefox brand for years, although now the Firefox organization wants to change the brand icon.

From an article in Venture Beat: "For most people, Firefox refers to a browser, but the company wants the brand to encompass all the various apps and services that the Firefox family of internet products cover," and "The fox with a flaming tail 'doesn't offer enough design tools to represent this entire product family'." The Firefox name will remain, but the branding will change.

This is a tall order. Changing any well-known branding for an organization or a product family is tough. Will users continue to recognize the product as one they have used before? Or will the new branding suggest to users that everything has changed, and the product they've used and known for years has now flipped to something completely different?

Firefox has proposed two possible branding options:


Venture Beat describes the icons as follows: "The first icon is the Firefox masterbrand icon, an umbrella under which all the product lines will live" and "The next [two] lines, in order, are as follows: general purpose browser icons (including Developer Edition and Nightly colors), singularly-focused browser icons (Firefox Focus and Firefox Reality)"and the last five icons are "new applications and services."

First, let me make some guesses about the new applications and services, represented by the five icons in the last two lines. I'm not sure what the first one represents, but I think the second is some kind of photo service, perhaps something like Instagram or maybe a static photo hosting service like Flickr. At least, that's what the green icon suggests to me. The third icon is clearly some kind of password management service, like LastPass or 1Password; the hexagonal "lock" icon is a clearer representation of a password service.

I'm not sure what the last two are. These are too abstract for me to interpret what they mean, but perhaps the last icon is some kind of interaction service, such as a private chat application.

Jumping back the the rest of the list. The first line of icons (the standard web browser, the in-development web browser, and the nightly-build web browser) are still recognizable to me. I don't use the Firefox Developer Edition or the nightly builds, but the different colors in those two icons suggest to me that they are not the standard web browser.

The System 1 icons are more familiar to me, compared to the current Firefox logo. I think if Firefox used the first row icons from System 1, their users would be satisfied that the browser product isn't completely new.

The second row of icons (including Firefox Focus and Firefox Reality) are a mix for me. I'm not sure what Firefox Focus is, based on this image. The Firefox Focus web page describes Focus as a "dedicated privacy browser with tracking protection and content blocking." I don't get that from either the System 1 or System 2 icons. Similarly, the icon for Firefox Reality doesn't suggest what Reality does for me. The Firefox blog describes Reality as a "cross-platform browser for mixed reality." I don't get "augmented reality" from any of the icons in System 1 or System 2.

What about the "parent" logo, the Firefox masterbrand icon at the top? For me, the System 2 icon better represents the "Firefox" family of products. I get the abstract fox icon from System 1, but I think it's too abstract. When I first saw the icon, I assumed it was a red book icon, but the designer had set the alpha channel to be too transparent, so the yellow diamond underneath the book was visible. (And now you probably can't un-see the "book" icon. Sorry.)

But negative space means something, too. As humans, we naturally look for negative space, and read a lot into what shapes we find there. For example, most people see a rightward arrow in the FedEx logo, suggesting speed.

Applying this negative space visual concept to the Firefox logos, my mind naturally tries to find meaning in the negative space of the System 2 icons. I'm less bothered by the negative space of the System 2 masterbrand icon, because the negative space forms a rough circle. But look at the first row of icons. What shape is that? I'm confused.

My recommendation to Firefox is to use the System 2 masterbrand icon, but use the first row of the System 1 icons to represent the web browser. Use the green "Photos" icon (or something like it) and the hexagonal "lock" icon for the Password application.

But go back to the drawing board for Focus and Reality, and the three other extra applications. I'm not sure what those represent, so I think they need more work.

Finally, I encourage Firefox to do a quick usability test. They may have done this already to create this first set of design concepts. Find a bunch of users, and show them the icons in isolation. For one set of testers, don't provide context. "What does this icon mean to you?" Let the user give a reply without knowing what application the icon might be used to represent. For another set of testers, provide some context, but don't indicate which icon is intended for which application. "Which icon represents a web browser?" "Which icon represents a Photos application?" You can probably do this with ten testers in each group, but I'd recommend a larger sample such as twenty testers in each group.

Compare your results. Do the unprompted testers associate the same icon with the same application as the prompted users? If the testers have strong agreement, then you've identified icons that most users will recognize for the purpose you intend.

1 comment:

  1. For what it’s worth, a firefox is not a fox but actually a red panda, so their icons might not be the only source of confusion.

    ReplyDelete