vineri, 28 decembrie 2012

Android Icon Improvements


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.  
How?
Here are some tips that might be helpful to you (or your designer):
The very first tip 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!
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 art board  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 StudioIt can give you a help on designing your apps. It can nottake 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 invisible
  • 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 careful 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.
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 button
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 Septica icon looked like in one of the first versions after the initial release:
After some minor research and some involvement of the engaged Septica facebook fans we decided to use this icon for our Macao application.
Here, the main feature of the app, the ability to play card games, is even more in the foreground. 
I hope you liked this one. I’m not a designer, hence your tipps and experiences are very welcome in the comments.

Personally I like the Android Asset Studio icons, even with the gloss option. But it’s certainly not a replacement for good design principles. And it really needs some tweaking to get beyond the default red & black, border less layout.