All Apps are not Created Equal

We have all heard that you shouldn’t judge a book by its cover. But what about apps?

Unlike books, an app needs to be quickly found while swiping through pages and also stand out amongst its peers in the App Store/Marketplace. The icon of an app should give a visual indication of quality and contents — therefore, apps can and should be judged by their icon.

So what should you look for? What does an app icon really need to do? Here are a few things worth noting about icons in regards to content, simplicity and technology.

SAY IT UP FRONT:

What does the app do? You should be able to immediately gather basic information about the app, just by glancing at it. With an existing brand, sometimes the logo is enough to know exactly what to expect. There is probably little to no confusion about what these apps do:

What about apps for lesser known brands? Using objects, or an icon representative of your service/genre is key. This way, the user can automatically understand the purpose of the app without having to read the description before downloading.

KEEP IT SIMPLE!

Whatever you do, DO NOT MAKE IT MORE COMPLICATED THAN IT NEEDS TO BE! App icons are small — even with the best resolution and perfect eyesight, these icons can get complicated and messy very fast. There is only so much space — remember that your app will be on a page with other applications (without or without a background) and the more cluttered the space, the more necessary simplicity becomes.

The GOOD

Keeping it simple is one of the most useful ways to make an app stand out. Bright colors and simple details (if any) will always stand out brilliantly. Looking at the Nike+GPS app, there is no confusion that 1. it’s a Nike app and 2. that it involves some sort of GPS or mapping technology.

WebMD Baby uses a wooden toy block with a large B to indicate that this is an app dealing with children-related issues, while the Amtrak app adds a personal touch with a stylized train conductor — ready to assist you with all of your train traveling needs.

The newly re-designed aol instant messenger (aim) icon is the model of simplicity, with enough interest in the typography and coloring to keep it from being boring.

When shown with their full name located below (as they almost always are displayed on your actual device), they present a clear, simple and informative peak into what’s inside, without junking up your screen. Smarter, better, faster, stronger.

The BAD

With as much history and impact as the NFL and NBA logos have, you would think that they would both be strong enough to stand on their own. Unfortunately, the NBA icon forces the title of the app into the icon — did they not realize that it will also appear directly below the icon on the device?

The NBA-DL logo tries to cram in even more words — not to mention how illegible they are due to sizing, color choices and stroke weights.

The NFL logo says NFL 2011 or FANTASY below it. Why bother when the two colors already separate the apps visually? Also, does the icon really need to say NFL twice? Three times if you don’t forget the title below, which all of these app designers seem to have done.

And the UGLY

The Call of Duty Zombie app relies too heavily on the brand and would benefit from some thoughtful editing. Seven words may not seem like a lot, but on a phone screen, it’s a lot to read and the “of” between Call and Duty starts to look like a bullet point, even at the larger size shown above.

The Kindle App starts with a fairly recognizable logotype, but begins to get overly complicated when coupled with a fairly detailed illustration of a person reading by a tree. Keep it simple Amazon, from A to Z.

By trying to cram too much information into a limited space, you may end up with an unnecessarily complicated and ugly icon. Slapping the word “Pro” on the 1password icon, or using the peel effect (like textfree), dilutes the initial impact and negatively effects comprehension.

ADVANCE THE MEDIUM

The glossy, shiny app look is an Apple classic by now. With high resolution screens and new tablet sizes, however, icons can begin to take on a different look — there is more opportunity for variation and indication of depth than ever before.

This is a hands on device, why not create a visual effect that represents a physical aspect of the app? Apps that have a matte finish, or a very subtle texture to them begin to stand out — like the Find My Friend and Project Noah apps. When seen on Apple’s Retina Display, the “stitched” badges have a dimensionality and realistic texture to them that is quite nice.

Similarly, the newly updated Instagram app is instantly recognizable as a vintage, Polaroid camera and iTunes U takes on a formal look when “branded” into “wood”.

As a result, the glossy button apps (like, NASA’s Earth Now, Waze and Trapster) begin to look cheap and uninteresting, especially when compared side-by-side with a textural icon. Even the simple icon for the ESPN Winter X Games begins to feel a little too safe and boring.

Advance the medium by trying new things — with new apps entering the marketplace every day, it becomes that much more important to create a stand out icon. It is oftentimes necessary to judge an app by its icon and and in most cases your first impression won’t fail you.

A well-designed icon must stand out from the crowd and in seconds, convince users to purchase and download your app. As with any design project, apps take time and effort — don’t sell your work short by misrepresenting it or cutting corners. The icon design should be considered from the beginning of the design process, and should never be an afterthought. When you put quality first, you will never be disappointed in the results.

Do you agree? What are your favorite apps and/or icons? Any successful, unsuccessful, memorable or innovative icons that we’ve missed?  Let us know on Facebook or Twitter what you think.