App store screenshots are among the main factors that drive app downloads. If you can draw attention to your app with five images, then you have a greater chance of seeing your app in the top charts.
Let’s investigate techniques that will help you create winning app screenshots.
Use Screenshots to Tell a Story About Your App
Screenshots must tell a coherent story about your app. They should visualize a workflow and unveil the most important features. There are two basic rules about how to organize screenshots to make them tell a story:
The first screenshot must tell about the app’s core feature.
The screenshot flow must present the most important functions of the app sequentially.
[Spark, an email client for iPhone, presents an unconventional screenshot flow highlighting the app’s features.]
The more ingenious and unconventional your app’s screenshots are, and the more interesting your story is, the more downloads you are likely to get.
[IF by IFTTT automation tool’s App Store page tells a story about the app starting with the main function and rolling out the credits in the end.]
But to simply present the story is not enough. The success will also depend on your approach to presentation.
Design Visual Communication
All screenshots you can find both in Apple’s App Store and in the Google Play store can be divided into three types: 1) plain screenshots, 2) screenshots on a device with textual descriptions, and 3) photos showing a user’s hands interacting with the app. You can use different types for different scenarios.
The most basic type of screenshots doesn't include additional text or elements. Some apps on the app stores use this approach, but only a few do it subtly enough to make it valuable.
For example, take a look at the screenshots for the Fitbit fitness tracking app on the App Store. The functions of each screen are clear from their content, so any additional text would be redundant.
[Fitbit’s App Store screenshots don’t need captions (except this one).]
In other cases, either app publishers are too lazy to make informative screenshots, or the app itself doesn't need any introduction simply because everyone knows it.
[Instagram has the same set of screenshots on both the App Store and the Google Play store, with no additional text. Note the smart alteration of black and white as dominant colors.]
However, while your app isn’t yet as popular as Instagram, we recommend using the next type of screenshot design for your app store page.
Screenshots with textual descriptions
You’ve probably seen these types of images where the app is shown on a device. These screenshots can be created using graphical editors like Photoshop, or with the help of app screenshot generation tools like App Screenshot, DaVinci Apps, Launch Kit’s Screenshot Builder and Sketch to App Store (for Sketch users).
To be effective, textual descriptions on screenshots must: 1) be narrowed down to one or two lines of readable text (otherwise most users won’t ever read them), and 2) emphasise the functions of the app using verbs.
Note that all elements of images (screenshot, device mockup, and background) must be visually integral and maintain the app’s design style. To illustrate, here’s the set of screenshots we created for one of the apps we developed at Yalantis, Brilliant Move.
[The Brilliant Move app screenshots on the App Store.]
Brilliant Move is a delivery service that helps people move things from one place to another and track their belongings on the map. We used each screenshot to describe the idea and main features of the app. Note that descriptions consist of two lines of text and start with a verb. Also, the background colors complement the app’s color palette and contrast with the device mockup, pulling the content of the screenshots to the fore.
These screenshots were the result of our design team’s trials and errors. Before they came up with this final roll, there was a rejected version that is worth exploring:
[The rejected set of Brilliant Move app screenshots.]
Almost everything is wrong with this set of screenshots. The main mistake here is that the first screenshot shows a Sign Up/Sign In screen instead of highlighting the app’s main features. Many important features of the app were just ignored.
Next, look at the descriptions. The texts are inconsistent: some use verbs, some don’t. The first two descriptions are so long that you’ll probably get lost trying to read them. And yes, orange on orange makes it even harder to read. The background picture is an extended theme on the Sign Up/Sign In screen. Since we decided to remove that screenshot from the improved version, the background image lost its original context and seemed out of place.
Luckily, these screenshots never made it to the App Store, and can now serve as a graphic example of how not to do design app screenshots.
Textual descriptions are the best way to tell a story in an unusual, unexpected way. By playing with words and building a narrative properly, you can convert potential users into actual customers.
[The BuzzFeed News app uses a series of screenshots with a repetitive phrase, putting the conclusion of the story to the very end of the row.]
Screenshots with Hands
Screenshots that visualize use cases show a user’s hands holding and interacting with a device. There used to be a lot of screenshots that used this approach, but now the idea is largely dying out. That said, there are still some notable apps that use it.
[Facebook’s Paper really manages to make some use of user’s hands. Note that text is also being used.]
A great example that involves user’s hands is the main screenshot of a drawing app for kids, DRAWNIMAL:
[A kid’s hand with a pen is shown only on the first screenshot, and it perfectly describes the app’s core concept.]
If you really believe that using screenshots with hands will dramatically enhance the presentation of your app, make sure the photos are visually attractive (the hands must be well kempt!) and meaningful. If you can illustrate what happens on the screen without hands, why clog the photo? Have some respect for the white space. You can always explain your app features with text.
[Only one screenshot on Peek Calendar’s App Store page clearly illustrates how users can interact with the app. Might using a text be more appropriate here?]
Keep Optimizing Your App Store Screenshots
You may think your screenshots are perfect, but there’s always room for improvement. Use these tips if you want to make your app’s store page even better.
Test screenshot combinations
Google lets you run A/B tests on your Google Play store page, so go ahead and test which set of screenshots attracts more users. To test your App Store page, however, you will need some paid services like Storemaven and SplitMetrics (if you don’t like Google, you can use these services for Google Play as well.).
If your app is targeted at a global audience, you ought to localize it for the major markets. Aside from the app itself, localize the app store page along with the screenshots on it. Again, use A/B testing to see which set of screenshots is most effective for a specific region.
Use video previews
Other than screenshots, you can use video previews to tell about your app and show it in action. In case you add a video to the Apple App Store page, it will appear first in the screenshots section (on Apple devices only). The web version of the Google Play store displays videos in the same fashion.
However, the Google Play app for Android separates videos from screenshots, putting video in place of the page’s head image, so users can always see the first two screenshots.
[The Google Play store page of a popular productivity app, Trello: the Android Google Play app (left) has both video and screenshots visible, while the web version of the app store puts video in front of screenshots roll.]
Finally, even if you are 100 percent sure your app store screenshots are perfect and are boosting the app’s downloads, you should keep monitoring the market. Trends die out and new trends emerge all the time.
App store screenshots are key to app marketing. As with any marketing campaign, you need to optimize over time and respond to emerging trends to stay attractive to your target audience. So go ahead - look at your app's screenshots, optimize and try different approaches. Then, do it all over again, because app store optimization is not a one-time endeavor, but rather a continuous duty for those who want their app to succeed.