The App Store Icon provides users with a first impression of an app before they even click on its page. Whether the app appears as a featured app, in searches or in a category list, users will see the icon. 

This makes the icon an important creative asset for every app, and an understanding of App Store Optimization best practices for App Store Icons critical to conversion.

In App Store, products are often shown to users in the form of "title + icon + screenshot preview", so an attractive title, icon and screenshot are the most direct means to attract users. Therefore, an attractive title, icon and screenshot are the most direct means to attract users. So how should developers choose the right icons and screenshots?



Click "Learn More" to drive your apps & games business with ASO World app promotion service now.

App icon and screenshots: represent of the app

The App Store Icon is essentially the face of the app, so it should represent the most important elements, such as features or functionality. For apps with recognizable brands, like Facebook or eBay, it’s easy to use the brand iconography for the icon. Not all apps have that luxury, so their developers should use imagery that represents the biggest values of the app.

For instance, a search for "guitar" shows that most of the top apps for that term feature a guitar prominently on their icons. These create visual cues that represent the app’s functionality. At the same time, each one presents a different identity in the way the icon uses the guitar and other visual elements.

These varieties include acoustic or electric guitars, using bright or dark colors, featuring a detailed guitar or an outline of one and so forth. Each image establishes the branding and theme for its respective app. For instance, the darker shades and electric guitars typically indicate more rock-and-roll focused music options.

Mobile games often use their brand logo or characters to represent their apps. This is particularly common with games or apps based on specific shows or movies. As an example, a search for “dinosaur games” comes back with several apps featuring similar design styles, each presented differently. They typically feature  a single dinosaur (usually a tyrannosaurus rex) in the art style of the game.

The specific stylistic choices for the icon, such as with a smiling cartoon character or a roaring and more detailed dinosaur, indicate where the app fits in the variety of dinosaur games. They set the tone and indicate the age range.  Some of these also include the game’s logo, while others use the logo as the entire icon.

Why are app icons important in ASO?

 

Why are app icons important in app store optimization? The app icon is your app’s first impression. A quick glimpse of a mere second at your app can tell so much: What the app used for? What’s the purpose of the app? Do I want any relationship with this app?

In the case of the app stores, there’s a lot you can do to change and affect that first impression. In this article, we’ll teach you about what is inarguably one of the most crucial parts of your app store optimization (ASO): the app icon. It will explore how significant the icon is to your ASO strategy, the impact it holds over your conversion rates, and the components needed to benefit from a great icon.

 

 

Why are app screenshots important for ASO?

 

In both the Apple App Store and Google Play Store, all of your app store visitors are exposed to your First Impression Frame (everything above the fold). A majority of these visitors will make a decision based on the creative assets they see there, and they will only spend about 3-6 seconds looking at your First Impression before either dropping from the page, installing, or continuing to explore before making a final decision. That’s why it’s really important in ASO that screenshots are optimized!

Based on our data, gathered from more than sampling user behavior from over 500M users, we can clearly see the screenshots that appear in the first impression (the above the fold area of your app store page) are the most important as 100% of users are exposed to them.

 

App icon

An app icon is a visual representation of your brand or product. It is the first element that users see when they visit the iOS app store or the Google Play store. 

An app icon is the only creative element that appears throughout the user journey in the app stores. For organic users that find an app or game through top charts, search, or featuring placements, it appears in every listing. For paid users that land directly on an app store page from an ad, the app icon is one of the main visual assets they see on the first impression.

We have selected the top 200 product icons in the photography and video list and found that they can be grouped into the following 8 main categories.

"Gradient rainbow color" the most powerful

 

Camera

 

Letters

 

 

Symbols

 

Geometric shapes

 

 

Video Symbols

 

 

Cartoon/Animation/Emoticon

 

 

Physical abstraction, lines

 

 

Other/failure counterexamples: no obvious features, not easy to identify and remember

 

 

Success references

From the vast amount of iconographic material we have selected, we have summarized their general characteristics.

Gradient rainbow color

Viewfinder, camera lens

Flattened processing, obvious lines, easy to identify

So, what kind of icons are more popular among users? After the questionnaire and voting, we found that our favorite icons look surprisingly similar! Color, gradient and lines are the main features.

On this basis, we can summarize the design principles of icons.

Choose things familiar to people's perception, easy to recognize and low cost of recognition.

Use product attributes as icon elements. For example, the camera can be used as the design element for the photo app.

App color selection should be combined with audience attributes. The age and gender of the user group need to be considered, and developers can choose the appropriate product color for their own App user attributes.

Color matching as far as possible not more than 3 colors, at present in the photography and video App, users prefer "gradient rainbow color".

Dynamic symbols, impactful patterns are easy for users to remember, this kind of icon is easier to grab the user's attention, the following icons are very good examples.

Screenshot

 

App Store screenshots are the best way to tell your app’s story and convince users to download your app. In fact, neglecting this aspect of your ASO strategy is one of the biggest mistakes you can make.

 

Female + life scenes most popular

 

We selected screenshots of the top 60 products in the photography and video list, and in the face of a large number of image materials, we summarized the following characteristics.

Central elements

 

The central elements are classified by usage scenarios, including "selfie beauty scene", "life and leisure scene", "landscape shooting scene" and "function display".

The background style and color

 

Life use scene; white/transparent

People, a variety of solid color background with

Single color background

Design style

 

Native interface. This style is not recommended for developers because it lacks textual function descriptions and does not allow users to clearly understand the functions of the app at a glance.

Screenshot + text description. This style has a text description, which highlights the function description of the App, but from the visual effect, the first thing users pay attention to is the picture part, followed by the text.

Screenshot+Mobile Phone Frame+Description. By adding the cell phone frame, all elements of the screenshot are in a balanced state, and users can clearly see the text description at a glance, while the background image becomes a secondary element, and the visual effect is not impactful enough.

Cross-screen interface. This form is now more and more popular, and many products are happy to use cross-screen interface. It can attract users' attention and guide them to slide the screenshot to the right (up to 3 pictures on one screen)

The details of the design principles

 

Next, through some counter-examples developers can learn from experience.

Highlight the focus elements: Use zoom elements or interface focus to emphasize the visual theme center.

The principle of contrast: text and screenshot background, elements and background more obvious contrast, more attractive to users.

We found some commonalities (for reference only).

Screenshot style: natural. Close to daily life, partly containing vacation.

Characteristics of the first two screenshots: full screen zooming/ highlighting important contents.

Characters: all are female characters.

Screenshot design principles

 

Theme selection, Close to the user's scenario

 

App screenshots should be selected as close to the user's usage scenarios as possible. For example, shopping apps can choose street photography; lifestyle apps can choose food, etc. The central element should be close to the user's usage scenario, which is conducive to making the user associate with the app and thus increasing the download rate.

 

Background style, color selection

 

The color scheme should not be single, the background tones into a series, easy for users to read coherently, not easy to produce visual fatigue.

 

Design style: be interesting and have ornamental value

Currently, screenshots exist in four forms: screenshot + description; screenshot + phone frame + description; cross-screen interface and native interface. Among these four types, it is recommended that developers take a more innovative approach, such as cross-screen interface and multi-element presentation of App introduction.
Detailed design

Detail design

 

Highlight the focus elements and enhance the contrast between the App interface and the background.

Developers can use zoom elements or interface focus to emphasize the visual theme center, which is more conducive to highlighting the key elements of the product, and users can also understand it at a glance.

To sum up, the use of product icons and screenshots is summarized. As a visual representation, the basic shape and aesthetic tendency of icons and screenshots are crucial to the attractiveness of the product. These small elements need to be carefully considered by developers because they are the first step to encourage users to use the app.