What should your app icon look like?

Posted by Marius Mårnes Mathiesen on 27. August 2019
Marius Mårnes Mathiesen

One of the most important, but often overlooked details of building a mobile app is choosing which icon to use for the app. Lots of teams choose the easy way out, just using the company logo as the icon. But that usually isn't the right thing to do.

Back in 2008, nobody outside of Apple had any real experience in designing and developing apps for the iPhone. So when we started out doing so, we started out trying to understand the thoughts behind the apps developed by Apple. We saw that Apple used lots of visual cues from the real world: textured surfaces, drop shadows and visual elements mimicking the appearance of physical objects. They did this to train iPhone users into touching the screen, reducing the amount of guesswork involved in trying to figure out what the visual elements on the screen were meant for. This part of app design was easy, since these elements obviously carried some kind of meaning since they were consciously used in a digital context.

Some less obvious, but perhaps even more important, design elements were more difficult to spot. Like the fact that there were separate apps (and thereby app icons) for browsing your contacts, sending text messages, making a phone call and sending email. These apps were used to perform a single function, and their icons communicated this intention clearly to the user from the home screen of the iPhone.

people-icons

The speech bubble is for sending messages, the envelope is for sending email, the phone is for calling and the contact list is for your contacts. For most designers and developers the obvious solution would be to merge all these single-use functions into a common app, and call this app something like "Communication". One problem in doing so would be which icon to use for this app.

communications-app

The problem with this icon is that it forces me as a user to think. Where the simple phone icon lets me immediately associate what is going to happen once I click it, this icon forces me to start reasoning, analyzing what's in the picture. This process triggers other parts of my brain and adds an additional mental strain to the process of calling someone. Not just do I need to remember who I'm going to call and what I'm going to talk to them about. We just made the process of placing a phone call with a phone more complicated than it used to be before we had smartphones. We can do better than that.

The very first app we built at Shortcut was the app for public transportation in the Oslo region. Our customer at the time – Trafikanten – was a company named after an office where you could get help in finding your way around the city. And Trafikanten had a logo featuring a centipede. And the good people at Trafikanten were really fond of their logo.

So at the time in the project when it was time to start thinking about the app icon for the Trafikanten app, the obvious solution was to use the centipede as the app logo. While the app team had spent a lot of time finding visual elements from the physical world in the user interface, like color schemes from bus and tram stops and an old-school LED type font for the realtime information, we were instructed to use a centipede as the app icon.

trafikanten-as

Since the requirements for app icons demand that they have a square size, the first thing we needed to do was to remove the text from the app icon, and use it as the app title instead. But faced with just a colorful centipede, our first reaction would be that this is something intended for children. For those of us who are familiar with the Trafikanten brand, will after a short while recognize the figure from the logo and then be able to reason that this app has something to do with public transportation. Over time we can expect that this process becomes automated, so a connection is made in the brain between the centipede and the time of the next bus departure. But as app designers this still feels like a failure. We shouldn't require our users to active all parts of their brain in order to find the next bus departure.

So if the thing on the top of the user's mind when looking for the app is the next bus departure, what would be the most obvious icon to help in this intention?

trafikanten-buss

We suggested using the same symbol which was already being used on thousands of bus stops all around the city. If the thing on the app user's mind is a bus, then wouldn't that be icon requiring the least amount of mental effort when she is running down the stairs from work trying to determine whether she needs to run or not?

trafikanten-splash

After rounds of negotiations we managed to agree to use the bus symbol as the app icon, and made a compromise by including the centipede on the splash screen of the app. Along with our own logo, as artists are proud to sign their work.

If you take a look at the app icons on the home screen of your phone, I think you will find that many of the apps you use most often don't carry a company logo. These days there are many brands which are just an app (Twitter, AirBnB, Booking,com, Telegram, Vipps and Instagram are examples), but in those cases the brand logo is a result of the app icon – not the other way around.

Have a look at all the apps from Apple and Google. Not a single one of them use the company logo as their app icon. Neither should you.

Side note: Trafikanten was folded into Ruter a few years after the Trafikanten app was launched, about the same time as Ruter introduced a ticket app. Since then Ruter has had two apps in the market: RuterBillett for tickets and RuterReise for information. In that process the bus icon was replaced with Ruter's logo.

ruter-apps

Although most of us have learned the difference between the red app and the grey app by now, possibly even helping us understand the differences in how these colours are used other places throughout the city in the process, we still haven't completely given up our dream that some day these wonderful apps will get icons that put less strain on our brains.

Topics: icons