App Store Screenshots » How to Design Screenshots for ASO

Posted in February 2017 by Elisa Mourão

App Store Optimization Guide
Also known as: Screenshots, App Store Page Visuals, App Screenshots

What would make you go inside a store? You check from the outside, the store looks pleasing, and it has the thing you need because you can spot it before entering it, right? App Screenshots are the same; they are going to invite the user inside. One can say that screenshots do not influence ASO, but this is wrong. It might not affect your app store ranking directly, but it carries a significant role in conversion optimization, which is a vital part of App Store Optimization.

The right screenshots can make your conversion rate 18% higher.

Why Screenshots Are Important for App Store Optimization

App preview videos and screenshots allow you to demonstrate the functionality and interface of your app. They were displayed on the app’s details page on Google Play and iTunes (Apple App Store). Moreover, they help potential customers making the decision, whether the app is a fit for their needs. Additionally, proper app screenshots avoid “test run”-traffic on your app page as users already have an idea of what the app looks like and how to use it.

Regardless how you bring potential on your app store product page, they all set eyes in a certain way on your screenshots. One of the most important and striking elements on your app page or search rank is your screenshots set.

App Screenshots - Where they drive conversions

Although visuals have no direct impact on your app’s store ranking, the screenshot set and video preview are powerful tools to convince users. They will be the main determinant for most of your users to download your app. In fact, 50% of users make their purchase decisions based on the first impression, so your screenshots must have the best appearance.

Every second user decides about purchasing an app based on the first impression only.

There are various ways to design screenshots. No matter if you choose feeling oriented, feature-oriented or art-oriented design, your users should be attracted by that images.

All in all, screenshots demonstrate the functionality, look & feel of your app. Well designed and pleasing previews give users a glimpse of the app. They are great tools to create an immersive story with and to humanize your app for users (visual storytelling). Commonly, screenshots describe the best features of an app. They are welcomed by users, as a majority will not read through the whole app description to find out, what your app is about.

App Store Screenshots for Apple App Store (App Store Connect (iTunes Connect))

Let’s remember that iOS 11 brought a whole new app store layout, which made app screenshots appear slightly different in App Store search and on the product page now.

  • In iOS 11 search, the screenshots appear on a smaller scale, which means that the resolution of the images must be perfect. Plus, the text font must be large enough, so the potential user can read straight from the app search page.

  • In addition, three screenshots are shown on the app search page, which is great. It makes easier to create a story sequence or create a whole image using three screenshots.

  • Thanks to the new layout, you can see more than one app for a scroll in iOS 11 search results. You can see one whole app with its three screenshots, plus a second one almost entirely.

App Store Screenshots on the App Store

Your screenshots should draw attention so that the potential user focuses on you and not on the other app that is sharing the page with you. Bear in mind that if you are using landscape screenshots, only one will be shown on the app search page. If you are using a video, it will be shown in the first screenshot and will autoplay straight on the search page.

The app store design has changed a lot, and it is crucial that your app fits the new store. Harmony is comfortable for the eye, it is an extra motivation for the user to go to your app page.

Requirements for Screenshots in Apple App Store (App Store Connect (iTunes Connect))

On Apple App Store one screenshot per localization is required and up to four more screenshots are optional to add.

App screenshots have to be flattened JPEG or PNG RGB image files with 72 dpi resolution, and without transparency. Additionally, screenshots on Apple App Store have to respectively fit the specific screen resolutions summarized below.

  • iPhone 3 (3.5 Inch): 920 x 640 px
  • iPhone 4 + 5 (4 Inch): 1136 x 640 px
  • iPhone 6 + 7 +8 (4.7 Inch): 1334 x 750 px
  • iPhone 6 Plus + 7 Plus + 8 Plus (5.5 Inch): 1242 x 2208 px
  • iPhone X (5.8 Inch): 1125 x 2436 – This isn’t required; Mind that the difference is that the screenshot in iPhone X will be shown with rounded corners,
  • iPad (12.9 Inch): 2048 x 1536 px

Apple Screenshots guidelines are very specific about showing your app in use. You can have a screenshot only made up of text, and use text on your screenshots. However, you must have at least one screenshot showing the app itself. You should always show data from a fictional person as you are responsible for all the rights of the material used on your app screenshots

App Store Screenshots for Google Play Store

In contrast to the Apple App Store, your screenshots published in Google Play will be merely available inside your app page (store listing). The screenshots will only be shown at the search page, if the user search specifically for that app.

Once you are inside your Goolge Play store listing (app page), the screenshots call less attention than than they do in the iOS version. While in iOS screenshots are the most important visual asset, on Google Play Store many visitors won’t look at them.

According to StoreMaven, 85% of visitors on Google Play store listings won’t even see your screenshot gallery.

Due to the layout, Android users rather focus on the feature graphic and short description.

App Store Screenshots on Google Play

Screenshot Requirements for Google Play Store

On Google Play Store up to 8 screenshots for each supported device type can be added onto an app page. This means it is possible to add app screenshots for Smartphones, Tablets (7 inch &amP; 10 inch), Android TV and Android Wear. To publish a store listing for your app, there have to be at least 2 screenshots provided.

Screenshot requirements for Android apps are not as strictly as they are for iOS Apps. Google Play Store demands the following requirements for Screenshots:

  • JPEG or 24-bit PNG (no alpha)
  • Minimum dimension: 320 px
  • Maximum dimension: 3840 px
  • The maximum dimension of a screenshot can’t be more than twice as long as the minimum dimension

Good to know: Some sections of Google Play Store shows recommend games by using their screenshots, but the game must have at least 3 screenshots uploaded on landscape mode (16:9 aspect ratio).

How to Optimize Your App Store Screenshots for ASO + Best-Practice Examples

Here are some tips on how to optimize app store screenshots including several best-practice examples.

1) Show them how your app looks and behaves

The main purpose of app screenshots on an app page is to show what the app looks like. Users visiting your app details page want a quick visual preview of your app and its features. That’s why you must use all the screenshots available, show the most that you can. If your app is more functional, use a screenshot to highlight in text your main features.

Best-Practice Screenshots Example Instagram

Screenshots like those of Instagram, are the easiest form of providing this impression. They use standalone screenshots without any additional text, background or images. However, with these screenshots, it quickly gets clear, what the app is about. Although such classical screenshots do not work for every kind of app. Nevertheless, they do not need huge effort to be created.

2) Describe your app’s main features

Besides showing visitors how your app looks like, also make sure to highlight its main features. Users should quickly know what your app’s main purpose is. Remember when you started your ASO process? You can describe the screenshots with some of the chosen keywords.

Best-Practice Screenshots Example WhatsApp

WhatsApp follows this rule. As the app’s purpose mainly is about real-time messaging, they put the screenshot describing this feature at first place. Additionally, they follow a specific screenshot trend, slowly establishing in all app stores: They added some text to clearly describe the visualized feature on the particular screenshot. As some of the most successful apps also use some additional text to describe the app screenshot, this approach got very popular.

Your main feature should be shown within the first screenshot!

3) Tell a story

Screenshots are a very powerful tool to keep potential users on your app page. In fact, the term “screenshot” by now is a bit misleading. The most successful app pages do not only upload random screens but use rich imagery to visually tell a story. This means you should try to reach your visitors with powerful screenshots so that you can engage them to download your app. The story that you should tell is how your app is going to solve the potential user issue.

Best-Practice Screenshots Example Lottoland

Lottoland did some great job designing their screenshot gallery. They not only provide well-designed app visualizations, but use them to tell a story. All images form a set together. Moreover, they address human emotions with imagery and text. Users are automatically led to scroll through all screenshots. Additionally, the last Screenshot indirectly asks the user to download the app, however positively completes the visual story.

4) Localize your images

On App Store and Google Play, one screenshot per localization is required and up to four (App Store) / seven (Google Play) more screenshots are optional to add. This means if you offer your app for different localization with different languages, you should make sure to offer your screenshots in the correct language. If you don’t want to take screenshots in different languages, you should at least adjust the additional text if added to the screenshot images.

Remember that localizing is more than translating. Check which feature of yours is more important for a certain country. Apart from that, Asian countries have more interest for images with animes or cartoons, so, how your screenshot should be design for each audience.

Best-Practice Screenshots Example 1Password

A good example for this is 1Password. They really put effort into their screenshots and provide different screenshots adjusted to different countries. So they not only translated the additional text fields, but took different screenshots of amazon in particular languages.

5) Use the right dimensions

Different mobile devices mean different screen resolutions. While Google Play only demands a minimum and maximum dimension for screenshots, Apple makes this whole story a lot more complicated. Offering your app within Apple App Store, you have to add your screenshots for every possible iOS screen size. This might get very time consuming if you want to take a screenshot of your app on every available iOS device. A possible workaround could be seen in the following example.

Best-Practice Screenshots Example Snapchat

Snapchat for example, uses a very efficient approach of providing app screenshots for different screen dimensions. They put simple app screenshots into matching devices surrounded by an abstract, colored frame. This classic frame delivers a high recognition value and keeps you flexible designing your screenshots for different screen dimensions. Of course, this imagery especially works excellent, because Snapchat already established it’s branding.


Looking for some iPhone Mockups for your screenshots? We’ve prepared some high-end iPhone X Mockups for you!


See also

The Ultimate Guide for App Store Screenshots
Free iPhone X Mockup & Screenshot Exporter App Store Connect (iTunes Connect) Screenshot Sizes for iPhone and iPad
App Preview Guidelines- Apple Developer Space
Google Play Design Guidelines - Best Practices Imagery

Author
Elisa Mourão
Elisa graduated in Communication at PUC-Rio (Brazil) and has a Master Degree in Screen Culture by University of Roehampton (UK). Even though she is the Brazilian cliché born and raised in Rio de Janeiro, she loves visiting cold places.