Wednesday, 1 August 2012

App Icons - A Study in Best Practice

For the upcoming Amp, Watts & Circuit mobile game, I have had to do a lot of research into app icons, and I began to look for best practice rules, common threads between the top selling app icons. Your app icon could well be the first thing a potential customer ever sees of your app, so alongside a great app name, it's hugely important. I'm going to take a look at some icons from top selling iOS games to see what they have in common and what we can learn, then in tomorrow's post I will upload the icon that I make for AWC, attempting to put into action the 'best practice' that will hopefully become clear.

These are 9 of the most popular games on iPad and iPhone, so they should give some indication of what to go for when creating an app icon. A more thorough study could be done over hundreds of icons and all categories, but for the starting point this should be plenty.

The games included in the list are -
World of Goo
Infinity Blade
Cut the Rope
Whale Trail
Plants vs Zombies
Angry Birds
Dungeon Village
Fruit Ninja
Temple Run

This may be the key point in icon making; keeping it simple. None of these icons focus on more than one or two features, except for Dungeon Village, but even on this icon the elements are arranged in a circular way so as to not make one stand out more than the other, so it still doesn't feel too busy.

Despite the simplicity, there is still a lot going on in the icons so they aren't so simple as to be boring. Background effects like the lights in Angry Birds or the rainbow in Whale Trail help to draw peoples eye to the icon but without overloading you with information. A different way to look at this might be focus. Focus in on one core element for the icon, even if it is made up of multiple cleverly arranged components as in Dungeon Village.

One thing that stands out straight away is the lack of words on the icons, with the exception of World of Goo. This can be put down to the fact the app will most likely never be seen away from the name of the app, so there is no real reason to fill up any of the limited space of the icon with the app name.

This one is tougher to call, as 4 out of the 9 apps use borders on their icons, although it's easy to see how this could be useful, especially for icons with strong colours. Here is an example!

Whale Trail and Infinity Blade on potential backgrounds
During your app's life, the icon could appear in many different places, websites, users' devices, so could end up sitting on any colour background, each one of these could be a new impression for a potential customer, so you want your game looking its best! You can see here that the Whale Trail icon has a clean white border, so it remains easy to read on any colour background, whereas the Infinity Blade icon gets difficult on certain colours, such as the pink. Its an extreme example to use such bright colours, but colour blind people (myself included) might have difficult on certain background colours anyway, so separating your app from that background might get them to check out your app over others that aren't so appealing to look at.

Even when you get over the barrier of getting a player to install your game, if you decide to go free-to-play, in itself definitely a discussion for another day, you will need to make sure that they choose to play your game over the others on their device.

Default Bubble
When you create an app, you get the choice to add on the default bubble. This is the glossy bit that you can see on Infinity Blade and Plants vs Zombies. The idea is that using this brings all app icons together into one style, so they look better together. The problem is that it's optional, so in practice this doesn't work, even some of the built in Apple apps don't use the bubble.

The gloss can still look great on icons though, there is no reason not to use it. In my opinion though, if you want a gloss on your icon then just make it yourself, that way you get full control over it so you can make it look exactly how you want it to!

One almost 100% constant rule in the icons is including characters, unless you have no characters like Fruit Ninja (Except for that sensei guy). It's important to try and get a connection with the audience as fast as you can, and cute characters are a great way to do it. Even the zombies are cute!

Best Practice 
From studying these apps there are a few clear trends amongst the icons. These may well change over time, and there might be an even better way to design your icon that will get way more people clicking on it than any of these, but we have a good starting point here.

  • Don't put words on your icon. You are very limited on space and the name will almost always accompany the icon, so why waste precious pixels telling users what they already know?
  • Keep it simple. Don't focus on too many elements at once, or make sure that they are arranged in a way that is easy to read.
  • Clean, simple borders can help to stop the background clashing with the icon, which could put off some users, though make sure to use a neutral colour for the border if you choose to use one.
  • Don't use the default bubble. You want your games to stand out from the crowd, not blend in, and if you want the gloss then make it yourself for maximum control!
  • Include characters if you have them, they will help to build a connection between your icon and your potential users.