Visual ASO: Graphic Composition and How You Can Use It

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:

semantic core analysis
* 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

Breastfeeding Tracker*Baby app

Parent Love  Baby Care Tacker

Parent Love : Baby Care Tacker

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

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 (2)

FaceApp: Perfect Face Editor

Baby Tracker

Baby Tracker

GoHenry Youth Debit Card & App

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:

23 EN

Waze Navigation & Live Traffic

24 EN 2

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

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

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

Ecwid Ecommerce

Zeely – Grow Your Business

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 CodingProgramming

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

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: Face Swap Videos (США)

Reface  (Корея)

Reface: 페이스 스왑, 얼굴 합치기 (Корея)

Read also Three myths about graphics for ASO in Asia.

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

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

Strava: Run, Ride, Hike

Endel Focus, Sleep, Relax

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:

гонки (2)

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.

Conclusion

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.

Text localization: Kateryna Kalnova, Netpeak RadASO.



7
1
Found a mistake? Select it and press Ctrl + Enter