When we consider the big picture of how our apps impact the world around us, we tend to pay less attention to the details. Attention to detail, however, is one of the most important aspects of designing a great user experience.
If you’ve ever been pleasantly surprised by a bonus perk, a bit of personalization, or an email from the company’s CEO, you understand how these minor details can have a big impact. App icons are the unsung heroes of mobile apps. These icons often have no text (or sometimes a single letter) and are often surrounded by other app icons competing for your thumb pad. In this article, we cover some of the best practices for designing app icons to fit into your mobile app strategy.
App Icons: A Brief History
In an interview with Ken Kocienda, a software engineer who worked with Steve Jobs on the first iPhone, Ken recalled how the app icon size was first chosen during the product development lifecycle. The first app icons were actually a result of the first iPhone game in history. A developer on Ken’s team created a game that flashed shapes of various sizes that the player was supposed to click as fast as possible. The result was a rather fun game but more important was the amount of A/B testing data the team received from understanding at what size the shapes became increasingly harder to click in various locations.
Today, there are specifications for many app icon sizes for many different devices. Apple’s emphasis on developing for the “Human Interface” is enlightening for us as designers, creators, and entrepreneurs. This way of thinking about product development — and app icon design specifically — supports our theory of the importance these icons play in the overall experience.
Mobile App Icon Design Tips
To read between the lines of Apple’s famous campaign to “Think Different,” we advocate you stand out from the crowded home screen by being different. At any given time a single iOS home screen can have upwards of 24 unique app icons (not to mention multiple pages or folders). How can you stand out from this crowded environment of apps all vying for the user’s attention?
The first piece of advice is more of a warning: Don’t use text.
Don’t Use Text
Considering the average number of apps on a user’s home screen, why would you add more clutter or cognitive load with small and difficult to read the text. The longer the text, the more difficult it becomes to fit within the app icon’s width and therefore the more difficult it is to read.
We said to be different, not difficult. It’s best to stick to bold colors and don’t be afraid to lean on white space, the subject of our next tip.
Use Bold Colors and Whitespace
When designing your app icons use colors that contrast each other and can stand out no matter what color the icon is overlayed on.
For the sake of an example, let’s assume a user has the default “earth rise on the moon” background wallpaper. Your app icon is black with subtle gray text (to even further drive home our argument against text) lives in the first position in the upper left-hand quadrant of the screen. Unfortunately, it blends right into the wallpaper and you still wonder why your monthly active users are on the decline.
This story, although hypothetical, should make it clear why bold colors and whitespace can be a great combination for app icon design.
Can you make out what letter is in that tiny blue box in the current tab of your browser? That’s right. You can see that it’s an “f,” and that’s because we’ve considered the scalability of our icons. The favicon is just one example of one extreme in which your app icon might be scaled down to an almost imperceptible level. It’s important to not only consider how your icon looks at this scale, but also when scaled-up on that billboard you pass on your commute home.
Think Big, Think Small, and Think Different.
Many people reference Daniel Kahneman’s groundbreaking book, Thinking, Fast and Slow, about the behavioral psychology of decision making. The two systems of thinking outlined in Kahneman’s work are truly impactful in decision-making. In business, we must think of solving problems in many ways. We must balance the short term wins with the long term mission.
These app icon tips scratch the surface of some finer grain details of your higher level mobile strategy. If you have an existing app, it’s never too late to consider how your app icon can be improved to reach your ultimate goals: engagement and retention. Consider how you can offer a unique experience for your users and understand how impactful the little things really are when building user interfaces that boost user experience.
Guest Author Bio: Drew Page is a content marketing specialist from San Diego, where he helps create epic content for companies like CleverTap. He loves learning, writing and playing music. When not surfing the web, you can find him actually surfing, in the kitchen or in a book.
In the midst of a world where so many are disengaged, cynical and apathetic, isn’t it time for some fresh air? Isn't it time to join together in building a refreshing, new community founded upon “real” relationships, “real” thought leadership, and “authentic” engagement? NO Clutter. NO Spam. NO NO Fees. NO Promotions. NO Kidding. SIMPLY Pure Engagement Unplugged. ☕️ CLICK TO GRAB YOUR SEAT IN OUR NEW ENGAGE CAFÉ ☕️