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 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:
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 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:
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.
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:
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:
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?
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):
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:
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:
Using frames in the form of various geometric shapes does an excellent job of focusing the target audience's attention on important information:
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:
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:
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:
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:
The following set of screenshots features different frame options:
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:
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.
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.
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.
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:
We will consider the disadvantages of this approach in more detail in the section on working with lines and arrows.
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:
That the images and captions in graphics should be contrasting is fairly obvious. Let's look at examples of insufficiently contrasting captions:
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:
Below are examples of unsuccessful finance apps where the emphasis is shifted to minor, unimportant details:
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:
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:
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:
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:
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:
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.
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:
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.
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.
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.
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.
And, here's how italic font is used to convey dynamics in racing games:
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.
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.
But the most important thing to remember is that only A/B testing will help determine which graphics are truly effective.
.png)
