Visual ASO: Graphic Composition and How You Can Use It

CRO
Sep 1, 2022

How do you find your way to the heart of the future user with the help of graphical optimization, and what are some typical mistakes to avoid? A specialist from RadASO agency shares their expertise in this article.

ASO is a set of measures used to optimize store application pages to increase traffic. We already know that ASO is divided into text and graphics and that it's the graphics that have a decisive influence on conversion. But why?

Many studies show that graphic images help us grasp the essence of things much faster and more efficiently than text. That's because graphics affect feelings and emotions — the deepest layers of the human psyche. Such is our nature — we perceive the world through pictures. For thousands of years, people have left messages to each other in the form of images on the walls of caves, and only relatively recently has text entered our lives. No wonder graphics are so important for effective app page optimization.

Graphic Composition in Visual ASO

Graphic composition in ASO is the use of images to convey salient information about the application. The user must understand that our application is exactly what they were searching for just by looking at the visuals provided. Below are two screenshots of applications for learning and practicing yoga. In the first, only the caption (title) speaks about the application's essence; the graphic doesn't share any relevant information. In the second, it's only the image that speaks about the application's purpose, but it speaks quite eloquently:

PortalYogi vs Yoga for Weight Loss & more

The visuals used should convey the most important functionality for our target audience. So how do we identify which features are paramount for the user?

There are two simple but effective tricks:

  • semantic core analysis;
  • analysis of competitors' graphics.

Semantic core analysis is the primary source of information on the target audience's needs. It provides a qualitative description of these needs: what users are looking for (search queries) and how much they need it (search frequency). When analyzing our competitors' graphics, we adopt someone else's experience. Another person did their research and applied that knowledge to their brand. But, there is one caveat: the competitors you choose for inspiration must be at the TOP of the charts. The logic is simple — if the application is TOP ranked, then it is getting a large number of installations. A high install rate, in turn, may indicate a high conversion rate and, therefore, the effectiveness of the app's graphics.

Let's look at the relationship between semantic core analysis and analysis of competitors' graphics using the example of childcare applications. Here's what the semantic core analysis for this niche looks like in the US:

* SAP (Search Ads Popularity) rates the search term's popularity on a scale from 5 to 99.

As you can see, the most popular search terms are breastfeeding, feeding, diaper changing, sleep, and pumping trackers. It's these functions that are displayed in the sets of screenshots below:

Breastfeeding Tracker*Baby app
Parent Love : Baby Care Tacker
Attribute
Value
Format
PNG
Color space
Display P3 (wide-gamut color), sRGB (color), or Gray Gamma 2.2 (grayscale).
See Color Management.
Layers
Flattened with no transparency
Resolution
Shape
Square with no rounded corners
Attribute
Value
Format
PNG
Color space
Display P3 (wide-gamut color), sRGB (color), or Gray Gamma 2.2 (grayscale).
See Color Management.
Layers
Flattened with no transparency
Resolution
Shape
Square with no rounded corners
Word
Frequency in service
Qimai(China)*
AppTweak
Mobileaction
Appfollow
课程 (course)
5387 (high)
56 (mid)
5 (low)
34 (mid)
外语 (foreign language)
5699 (high)
35 (mid)
5 (low)
34(mid)
播放 (play)
5496 (high)
35 (mid)
5 (low)
35 (mid)
*Search index in China provided by Qimai and based on multidimensional calculations such as search results, downloads and relatable keywords.
App Store
Google Play
1. Icon impact on user choice
Important, but not more than a video with screenshots, as they take up most of the screen
Icon is displayed with several other icons in search results, and therefore it has the greatest impact on the user's choice
2. Icon localization
1 icon for all locales
Can be localized for each country
3. Screenshots quantity, orientation
From 1 to 10, any orientation
From 2 to 8, any orientation
4. Screenshots the most important are the ones that are visible before you start scrolling
  • Vertical screenshots: 3 are visible
  • Horizontal screenshots: only the first one is visible
  • Vertical screenshots: 4 are visible
  • Horizontal screenshots: only the first one is visible
5. Screenshots size
Large — the content is legible
Much smaller — the captions are quite illegible
6. Video quantity
Up to 3
One video that must be uploaded to YouTube
7. Video orientation
Any orientation
Horizontal orientation prioritized
8. Video autoplay
Plays automatically for 30 seconds without sound
You need to click on it to play
9. Application cover
Displayed on the application and developer pages
There is no cover
10. Graphics update
After release only
Whenever

Working With Graphics in ASO

Graphics in ASO have one significant feature that we need to keep in mind: the user looks through them very quickly. On average, it takes no more than a few seconds to view an image on an app's page. Communicating an application's value in this limited time is a difficult task. Images should be seen by the user immediately, and be clear and understandable.

Our RadASO Team employs several practical techniques to make graphics more understandable to the target audience. Keep in mind that successful graphics have your audience's needs at their core. Even the coolest designs will not yield results without understanding your target audience.

Exclusion of minor details from images

In working with graphics in ASO, we face another obstacle besides time limitations. The user's attention span and ability to concentrate are also limited. This means you need to get rid of irrelevant details in your graphics. The user's attention should be directed to the essential information you want to convey.

Let's illustrate this principle with the example of a face transformation app:

FaceApp: Perfect Face Editor

The emphasis is on the people's faces, showing a direct connection to the app's purpose and capabilities. The faces are shown in close-up, and there are no unnecessary details that would distract the viewer. The images are easy to read and understand for the target audience.

Now let's look at screenshots of other apps from the same niche:

Face & Body Editor- Perfect me / Sweet Selfie: Photo Editor&Cam / Selfie Beauty Photo Editor / Make Me Thin

Here we see an abundance of detail, but is it justified? The first image shows the top half of a woman's body, shifting attention away from her face to her torso. In this case, the graphic should keep the viewer's focus on the face. In the second image, attention is taken away from the face by the plethora of accessories and overly colorful background. The third and fourth images contain many details that add nothing to the graphics and distract attention from the faces, which are not big enough. There is a risk of missing the essence of the function being demonstrated — face transformation.

By the way, did you pay attention to the simple backgrounds, styles, and color schemes used in the first set of images?

Using Miller's Law

Here we continue with the topic of limited user attention. Well-known in design, Miller's Law states that human memory can hold 7 (+/-2) objects at a time. For us, this means the number of elements shown in the graphic should not exceed this number. Let's show this with the example of graphics used by apps from different niches (the elements are numbered):

FaceApp: Perfect Face Editor
Baby Tracker
GoHenry Youth Debit Card & App

The last image shows that the number seven should not be taken as infallible truth. The main thing to remember is the graphic should not be overloaded with information, otherwise, it will become chaotic and incomprehensible to the user:

PiyoLog: Newborn Baby Tracker / Rainbow — Ethereum Wallet / Nordnet

Emphasizing important information with a frame

This technique has proven itself in painting and photography, as well as in modern design and graphics for ASO. It can be implemented in several ways:

  • emphasize an important part of the image with a curly frame;
  • enlarge the selected fragment in the frame;
  • emphasize important text with an oblique mockup;
  • highlight key information with colors.

Using frames in the form of various geometric shapes does an excellent job of focusing the target audience's attention on important information:

Zoopla property search UK / Bumble: Dating, Friends & Bizz / Spotify — Music and Podcasts

It's worth noting that graphics don't always contain information about the app's functionality and features. Screenshots often work to evoke an emotional response in the audience, as illustrated in the above examples.

Highlighting key pieces of information is a common technique in ASO charts:

TED / Venmo / Cuvva

An inclined mockup is often used in panoramic compositions that visually combine two screenshots into a single semantic block. At the same time, the mockup focuses the user's attention on textual information (captions) using two triangular frames:

Waze Navigation & Live Traffic
TodayTix — Broadway Tickets

This technique of arranging screenshots is often used and has become a kind of «classic» of visual ASO.

With the help of spot colors, the focus is mostly on captions and, slightly less often, on interface elements:

Fiverr — Freelance Services / maybe: Interactive Stories / Instacart Shopper: Earn money

Placing information inside a mockup is a different way of highlighting important information using a frame. This often-used technique helps to visualize how the app will look on a mobile device's screen:

IKEA Place / Halide Mark II — Pro Camera / Eventbrite

The following set of screenshots features different frame options:

Bumble — Dating. Friends. Bizz

Dividing the set into information blocks

The division into blocks helps to structure information and facilitate its perception by the user. A set of screenshots already has a natural arrangement of information: each screenshot is a separate information block. However, additional methods for creating a structure are sometimes used:

  • highlighting screenshots with background color;
  • grouping several screenshots into an information block;
  • contrasting arrangement of captions and mockups.

Using colors to separate a set is a common technique: each subsequent screenshot differs from the previous one in its background color and creates a contrast.

Shazam: Music Discovery

Blocks can contain both individual screenshots and groups of screenshots. The set below is divided into two blocks using color: the first two screenshots aim to attract attention, and the rest reveal the functionality.

Alan Mind Daily Journal

Several screenshots can be combined into one block using panoramic composition when an object (usually a mockup) starts in one screenshot and ends in another. Such a combination is quite common in the first two screenshots, forming a block that attracts the audience's attention.

Ecwid Ecommerce
Zeely — Grow Your Business

To create more contrast between screenshots, you can change the location of mockups and captions. Typically, the location of the title alternates between the top and bottom:

Mimo: Learn Coding/Programming

We will consider the disadvantages of this approach in more detail in the section on working with lines and arrows.

Working with color and contrast

We won't dwell on working with color combinations — designers are concerned with these issues. But we, as marketers, should pay attention to the following features of the graphic color scheme:

  • contrast and «readability» of images;
  • highlighting important information with color;
  • compliance of the color scheme with the niche;
  • suitability of color schemes for specific countries and cultures.

That the images and captions in graphics should be contrasting is fairly obvious. Let's look at examples of insufficiently contrasting captions:

DICE: Live Shows / PortalYogi

We've already talked about using color to highlight important information. But color can also be used to show image details. For example, finance applications often color-code the bank card and make it one of their main attributes:

PointCard™ Neon / Current: The Future of Banking / Coinbase Card / Monzo Bank — Mobile Banking

Below are examples of unsuccessful finance apps where the emphasis is shifted to minor, unimportant details:

Revolut Business / Privat24 — open to everyone

When choosing a color scheme for your graphics, you need to pay attention to the traditional colors of your niche. If your color scheme is wildly different from what users are used to, they may find the app irrelevant. For example, finance apps often use blue, green, and gray in their graphics:

monobank — mobile bank online
UKRSIB online

The meaning and symbolism of colors can differ greatly in diverse cultures. When choosing a color scheme for your visuals, be guided by local competitors and do some reading on local cultural characteristics. It should be noted that the localization of graphics for different countries is a vast topic, which we don't touch on in this article. The choice of color scheme is only a small part of it. Let's look at two sets of screenshots of the same app, one for the US and another for Korea, where the color symbolism, as in other Eastern countries, is entirely different:

Reface: Face Swap Videos (США)
Reface: 페이스 스왑, 얼굴 합치기 (Корея)

Lines and arrows in visual ASO

Competent work with lines in ASO can help create a scenario of the user's journey with screenshots. Lines guide the user's gaze, show them important pieces of information and encourage smooth movement along the entire set of screenshots.

Usually, arrows are used to focus the user's attention on the app's key features:

Pandora: Music & Podcasts / Monzo Bank — Mobile Banking / Acorns: Invest Spare Change / Shake Shack

Another popular use of lines and arrows is to demonstrate various transformations, whether it's the transformation of a character in a game or the transformation of a photo in an editing app:

Love Story® Romance Episodes / My Fantasy: Choose Your Story
Reface: Face Swap Videos / Facelab — Face Editor, Beauty

One of the main tasks is to keep the viewer's attention: the more screenshots the user sees, the more information they will receive about your app. Using arrows, we can stimulate the user to move on to subsequent screenshots in the set, as their gaze subconsciously follows the direction of the arrow. This principle is illustrated in the screenshots below:

iface : AI Face Swap app / Zalando — fashion & clothing

The screenshots below show an example of using an arrow unsuccessfully: after switching to the second screenshot, the arrow brings the user back to the first one. There is a risk they will never get to the third screenshot.

Reface: Face Swap Videos

Lines work the same way. The human eye «clings» to the line and follows it. In the two sets of screenshots below, a smooth line guides the user along the entire set of screenshots. Notice how harmoniously the lines reflect the application's essence: the running route in the first case and the sound waves in the second:

Strava: Run, Ride, Hike
Endel: Focus, Sleep, Relax

The lines also clearly demonstrate connection. In the first two screenshots below, they connect the steps of working with the application and the sleep cycle. In the third image, the line shows the connection between people, evoking an emotional response in the viewer.

Tally: Pay Off Debt Faster / Sleep Cycle — Sleep Tracker / Google Duo

In addition to the clearly shown lines, there are some that are not visible — for example, the line of the human eye. Screenshot graphics should be designed in a way that allows the eye to move smoothly and predictably along the screenshot. Remember, in the section on dividing a set into information blocks, we covered the disadvantages of placing captions alternately on the top and bottom. The movement of the eyes is shown below in two sets of graphics. In the first case, the movement is smooth. In the second, the gaze moves in jumps, which is uncomfortable for the user and complicates the absorption of information.

Flipkart Seller Hub
NTWRK — Live Video Shopping

The human brain strives to find and organize patterns. That's why designers build layouts according to modular grids — the graphics are ordered and easy to read. In ASO graphics, it's vital to pay attention to the alignment of elements. A chaotic-looking design is difficult to understand, but at the same time, can be easily corrected. Let's take as an example two sets of screenshots, the first of which is well structured, and the second has flaws. Lines of a modular grid are plotted on the images.

Coinbase Card
DreamApp: Dream Interpretation

In the second set, the horizontal alignment of the captions constantly changes, as does the alignment of the text. In the first two screenshots, the text is on the left; in the third and fourth, it's in the center. At the same time, note that the text on the mockups is aligned to the left. The result is a chaotic set of screenshots, making it difficult to perceive the information.

Now, let's touch on the issue of ascending and descending lines. It's believed that slanted lines make images more dynamic. As an example, here are some screenshots of a ticket seller and a scooter-sharing app.

TodayTix — Broadway Tickets / Lime — #RideGreen

And, here's how italic font is used to convey dynamics in racing games:

Street Racing HD / CSR 2 — Drag Racing

In our view, this rule shouldn't be taken too literally. The main thing to remember is that creating the right atmosphere in graphics is sometimes no less important than the ability to convey information correctly. After all, marketing works with human psychology, and feelings and emotions are integral to it.

Device or context
Icon size
iPhone
60x60 pt (180x180 px @3x)
60x60 pt (120x120 px @2x)
iPad Pro
83.5x83.5 pt (167x167 px @2x)
iPad, iPad mini
76x76 pt (152x152 px @2x)
App Store
1024x1024 pt (1024x1024 px @1x)
Source language
Target language
How much longer (+) or shorter (–) the text in the target language is
English
French
21.18%
English
Spanish
19.52%
English
Italian
17.91%
English
Deutsch
16.67%
English
Dutch
13.80%
English
Portuguese (Portugal)
14.29%
English
Portuguese (Brazil)
12.96%
English
Polish
9.33%
English
Russian
9.11%
English
Czech
3.70%
English
Arab
–6.25%
English
Japanese
–39.68%
English
Korean
–44.04%
English
Chinese (Simplified)
–61.97%
English
Chinese (Traditional)
–63.80%
*Search Ads Popularity (SAP)shows the popularity of the search term from 5 to 99.
Device
Spotlight icon size
Settings icon size
Notification icon size
iPhone
40x40 pt (120x120 px @3x)
29x29 pt (87x87 px @3x)
38x38 pt (114x114 px @3x)
40x40 pt (80x80 px @2x)
29x29 pt (58x58 px @2x)
38x38 pt (76x76 px @2x)
iPad Pro, iPad, iPad mini
40x40 pt (80x80 px @2x)
29x29 pt (58x58 px @2x)
38x38 pt (76x76 px @2x)
Search term
Translation
SAP* English (U.S.)
SAP* English (U.K.)
truck games
games with trucks
62
39
lorry games
games with trucks
32
jail games
prison games
29
8
prison games
prison games
32
24
*Search Ads Popularity (SAP)shows the popularity of the search term from 5 to 99.
App Store
Google Play
What can be tested?
  • Short description
  • Long description
  • Icon
  • Feature graphics
  • Screenshots
  • Videos
  • Screenshots
  • Videos
  • Icon (has to be uploaded to the build*)
Number of simultaneously running tests
5 tests (each test is valid within a single country.

You can choose a default country test (details below): then it will run in all countries where there are no localized graphical or textual materials.
1 test (the test can be immediately extended to all countries where the application is available or opt for specific countries as needed)
The number of test variants that can be tested with the current version in the store
Compared with a maximum of 3 new variants
Can a test be launched while another item is under review?
Yes
No
Mandatory formats for screenshots uploaded to the store
6.5
  • 6.5
  • 5.5
  • 12.9 (if there is an iPad version)
*Build – is a new version of the application. Updating the icon is only possible when updating the application version in the store. In other words, the term "build" refers to a specific version or variant of the application that is ready to be downloaded and installed on the users' devices. It contains all the necessary files and data for users to install and use the application.
More about optimizing graphic elements in the App Store and Google Play can be found in the article 'Graphics in Mobile App Promotion in the App Store and Google Play (ASO) – How to Optimize Graphic Elements.'
Device size or platform
Screenshot size
Requirement
Screenshot source
6.5 inch (iPhone 13 Pro Max, iPhone 12 Pro Max, iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR)
1284 x 2778 pixels (portrait)2778 x 1284 pixels (landscape)1242 x 2688 pixels (portrait)2688 x 1242 pixels (landscape)
Required if app runs on iPhone
Upload 6.5-inch screenshots
5.8 inch (iPhone 13 Pro, iPhone 13, iPhone 13 mini, iPhone 12 Pro, iPhone 12, iPhone 12 mini, iPhone 11 Pro, iPhone XS, iPhone X)
1170 x 2532 pixels (portrait)2532 x 1170 pixels (landscape)1125 x 2436 pixels (portrait)2436 x 1125 pixels (landscape)1080 x 2340 (portrait)2340 x 1080 (landscape)
Required if app runs on iPhone and 6.5 inch screenshots are not provided
Default: scaled 6.5-inch screenshotsAlternative: upload 5.8-inch screenshots
5.5 inch (iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus)
1242 x 2208 pixels (portrait)2208 x 1242 pixels (landscape)
Required if app runs on iPhone
Upload 5.5-inch screenshots
5.5 inch (iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus)
2048 x 2732 pixels (portrait)2732 x 2048 pixels (landscape)
Required if app runs on iPad
Upload 12.9-inch iPad Pro (3rd generation) screenshots
5.5 inch (iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus)
2048 x 2732 pixels (portrait)2732 x 2048 pixels (landscape)
Required if app runs on iPad
Upload 12.9-inch iPad Pro (2nd generation) screenshots
Price
Traffic Source (Self Reporting Networks)
Facebook
Google
X (Twitter)
Apple Search Ads
Cohort reports
Impression tracking
Audience segmentation
At extra charge
Custom Dashboards
Custom Reports
At extra charge
Advertisement Cost
DAU/MAU (Stickiness)
Raw Data Export
At extra charge
At extra charge
At extra charge
API Reporting
Search term
Translation
SAP* French
SAP* French (Canada)
soldes
sale
25
5
aubainerie
sale
14
*Search Ads Popularity (SAP)shows the popularity of the search term from 5 to 99.
Device
Icon size
iPhone
180px × 180px (60pt × 60pt @3x)
120px × 120px (60pt × 60pt @2x)
iPad Pro
167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini
152px × 152px (76pt × 76pt @2x)
App Store
1024px × 1024px (1024pt × 1024pt @1x)
Icon format
PNG
Color models
sRGB or P3 (see "Color Management")
Layouts
Aligned without transparency
Sizes
Shape
Square without rounded corners
All the current requirements for icons are specified in the specification.
Icon format
32-bit PNG (with alpha channel)
Color models
512 х 512 pixels
Layouts
1024 КБ
Sizes
square, without rounding and shadows (Google automatically rounds the corners and adds shadows)
All the current requirements are specified in the specification.

We've covered many different examples of good and bad graphics. To conclude, let's highlight a few key points about working with graphics based on Netpeak RadASO's experience. These tips can definitely help make a set of screenshots more attractive to the user and visual optimization more effective.

  1. Make sure the set shows the most important information to the user. Conduct semantic core analysis and explore your competitors' graphics.
  2. Don't overload the user with information — get rid of minor and insignificant details.
  3. Focus on the essentials — use color, contrast, and different graphical elements to emphasize your application's key features.
  4. Structure your set — well-organized information is easier to digest.
  5. Don't forget the emotional component — the graphics should be logical and attractive to the user.

But the most important thing to remember is that only A/B testing will help determine which graphics are truly effective.

Home
Up