Icon Evolution

There is a reason they choose that green. There’s a reason why that symbol was picked from the masses of submitted ideas from designers. At least, I hope so.

The purpose of an icon is to evoke a lasting emotion that goes beyond a user’s interaction with a product. That emotion should be so strong, that icon so burned into memory that just the sight of the simple symbol pops your company, product and mission into the forefront of a user’s mind. No text need be added, no exciting background images, no tag lines. Just one simple symbol.

For years we’re talked about the power of the simple Nike swish, the signature “Pepsi Red”, and countless other brands that have fought for a lasting impression in our minds. But what about starting from scratch? You have a new product, with a new mission for a new user. Where do you start?

256px-Feed-icon.svg

For Spotify, their iconology is spot on. For those of us who’ve dwelt in the tech world for a few years, we’ve learned to recognize the simple symbol of an RSS feed. An Rss feed can be thought of as a streaming channel of information that a user has chosen to receive.

 

favicon

The Spotify icon borrows from this concept; they are in fact an online audio streaming service that a user chooses to subscribe to. The three simple lines, reminiscent of the RSS icon, with friendly, rounded corners and a solid fill. The black lines fall behind the fun, yet balanced gradient green. I like that the designers rotated the lines upward, with Spotify broadcasting to the whole internet in a wide range.

A few years later and the flat icon fad hit Spotify hard. While keeping in line with current trends, the results are jarring. The new pick of green, while bright, fun and modern, clashes hardily with most toolbars, whether light or dark. In a dark background, like the application, the contrast is too great and displaces the user’s attention while using the application.

46qwP9AXWe can learn a lot about design from studying other designers work, especially in the context of the application itself. In this case, I wasn’t alone. The internet has spoken and it’s not good, dubbing the new background “Broccoli Green“.

But Spotify is one of the fastest churners of good UX out there and sure enough a more toolbar friendly icon has arrived. My Mac lets out a deep sigh of relief. I admire Spotify on their proven ability to listen to users and incorporate changes into their designs. We sometimes feel like our gripes and frustrations, no matter how small will go unnoticed but the good UX teams are always listening.

Screenshot 2016-04-24 21.21.30

 

Now, let’s talk Uber’s icon. Initially, I hated it. But then I started reading through the story behind the change, the rational behind it and how important rebranding was to the company. (Read Wired’s great article here.) Now, I only dislike it.

Why do I dislike it? The change was harsh. The message was harsh and obvious. Uber is no longer a luxury. Uber is for everyone. You may disagree with me but my first gut reaction is what stuck with me.

The questions is; what is it? Is it a slightly rotated and misshapen ‘U’? Is it a sideways ‘C’? If so, what does the ‘C’ stand for? My brain is still stuck on the elegant U that will forever embody the treat of a black sedan rolling up to where I stand and specifically asking for me, ME, to enter the car. Sweet luxury!

But the days of luxury are gone and we are all stuck with abstract lines and subtle colors that should somehow standout on our smartphones when we are making a split-second, possibly alcohol induced decision on which ride sharing app to select. Quiet an interesting comparison when you drop this icon next to the blazing hot pink gradient of Lyft or the bright green ‘e’ of Fasten.

Do you love it or hate it? What emotions or gut reactions do you experience when looking at this new icon?

logos-582x292

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>