Johannes is the co-founder of If you haven’t read the first article on App Store Optimization, I recommend it to you. Still, this article can give you valuable information on its own.
Parts of this series on App Store Optimization are:
1. Keywords
2. Description
3. Icons
4. Screenshots
5. Videos
6. Ratings
7. Installs
8. Users
While the last article covered parts that where important for the Android Market search engine as well as humans, this article treats a topic that is only necessary when your app is already visible to the potential user: the app’s icons.
3. Icons
Icons are undoubtedly one of the most important factors when a user found your app on the Android Market. He typed in the right keywords and received a list of apps showing only two things: The app’s name and its icon. While some users might read the text first, others only see the icons, most of them both.
The problem
When I was on the ADCS2 this month, I have been in a room with about 30 developers talking about advertising. I asked who of them was also skilled in designs. Guess how many of them raised their hands? Exactly: Zero.
So if you are not comfortable with arts, you should spend some money on someone who is and can work out a design and icon for your app. If you are not able to pay someone, you still have to do it on your own. This will probably need a lot of try-and-error and communication with other people (“Do you like it?”, “Do you like it now”, “And now?”, …).
How?
Here are some tipps that might be helpfull to you (or your designer):
The very first tipp is: Never ever use the auto-generated icon for your app! This gives your app the appeal of a construction site which is definitely not what most of your users are looking for.
Never use this icon!
Second: If you are absolutely not familiar with android Icons, read the Android Icon Design Guidelines. You can see the difference between pre and post Android 2.0-icons there. What you can learn on this site is:
- Your icons should be front facing, not in a 3D angle.
- Your icons should have a save margin (6 pixels for each site for a hdpi icon)
- You should start to work with an at least 512 x 512 pixels artboard, 864×864 is recommended. This gives you the ability to work more on the details. Later you will need icons in four sizes (512 x 512, 96 x 96, 72 x 72, 48 x 48, 36 x 36) for the Android Market website and the four different screen densities (xhdpi, hdpi, mdpi, ldpi). An icon that has been scaled up looks frayed, especially on the edges, whereas HD graphics on a HD device look just great and polished. You can also use vector graphics using programs like Inkscape.
- Your icons should be simple. This is a really important point. Your icon needs to be visible in 36 x 36 pixels, so it should focus on the key message: Display what your app is all about in one simple image.
Third: You can use the Android Asset Studio. It can give you a help on designing your apps. It can not take the burdon of making a good design from your shoulders. What you should not do with this program is:
- Use the glossy-option, it will make the half of your icon close to invisble
- Use the text-option
That brings me to my next point: Don’t use text. First of all it is unlikely that a user can read it, especially on small devices. Second, there is enough space for text in the app’s description. The icon is your chance to bring a message to your users eye memory, don’t waste it on letters! Use simple images that are carrying positive emotions to the user. There are exceptions when your brand is already well known and connected to a certain string like ‘Y!’ for Yahoo!
Another point is consistency. Your app shouldn’t be a chess game and have a tank on its icon. The design of your icon needs to be in the same color scheme and style as your app is.
Next, you should be carefull with the emotions connected to colors. For example red is usually a color of warning for most people, while green is connected to life and growth. Some male people are not able to see the difference of red and green colors, that’s also a point you might want to consider. At ANDLABS, we have a fixed color scheme we use for our apps. In our games we try to adapt the colors to the topic. Our app color scheme consists out of all the colors of the ANDLABS logo:
The ANDLABS color scheme
You might want to consider creating such a scheme too, also for your apps screendesign itself. This gives them a consistent look and strengthens your corporate design (CD).
Finally, and that’s the most difficult thing to achieve: Make your icon be outstanding! Don’t accept that it is one of many, make it the only icon in the list that immediately arouses the user’s interest (in a positive way). That’s really difficult and can take a lot of time. But, if your app in itself is good, it will be worth it.
Negative example
Here is an example of an icon I just made. It’s been done in one minut using the asset studio.
The don't icon
How are your feelings?
What do you think is the app doing? Maybe it is about learning the ABC? Maybe it’s a dictionary? Or a puzzle game based on letters?
How do you feel about the red color? Do you like it or feel positive about it?
How are your feelings about the quality of the app? Polished? Or done-in-a-day?
Before-After
Now here’s another example. I know it’s still far from perfect, but I think you agree it has already improved.
This is how the AL Voice Recorder’s icon looked on its initial release:
AL Voice Recorder 1.x
I admit, this is a crime I commited. There are worse icons out there, but this one is definitely in the lower third.
After i visited a designer and we agreed on the ANDLABS color scheme, it now looks like this:
AL Voice Recorder 2.x
Here, the main feature of the app, the ability to make voice records, is even more in the foreground. The slightly thicker microphone looks more significant and due to the margin and the rounded corners, it is more highlighted. Furthermore, it fits the application’s design. But that’s part of the next post.
I hope you liked this one. I’m not a designer, hence your tipps and experiences are very welcome in the comments.