App Store Optimization (ASO): How To Design the Best Screenshots

App Annie
App Insights
Published in
5 min readSep 25, 2015

App Store Optimization (ASO) is a tricky science. At its core, it’s about increasing your organic installs by showcasing (or teasing) your app’s features quickly and succinctly. We made this guide to offer tips, backed up by top-ranking apps and industry professionals, so you end up with the best screenshots.

In this post, we’ll go over what screenshots to place on your store page to convert views into installs.

Making Screenshots That Scream “Install Me!”

Whereas an icon might hint at your app’s quality and general utility, screenshots and videos paint a clear picture of what your app actually does. The best screenshots clarify your app’s unique value proposition and key selling points. How you demonstrate this, however, differs by app type.

Optimizing For: Games

Angry Birds 2 on iPhone shows off both gameplay and graphics. It doesn’t waste space showing how to launch a bird.

Games need screenshots that impress potential users with context about how fun the gameplay is as well as high-quality visual design. Angry Birds 2 is a great example that leads with its lively characters and physics-based gameplay, as established in the original Angry Birds. Adding key benefits at the top-left or bottom-right (e.g., “Multi-Stage Levels!”) is another best practice put in motion by Rovio’s designers.

Optimizing For: Apps

Shopkick on iOS tells a story to engage audiences.

For apps that aren’t games, we suggest showcasing screenshots that inform users how the app works. Shopkick is a perfect example. First, it hooks shoppers with the lead screenshot (beyond using Target’s well-known brand, it also showcases a “free” gift card — shoppers are known to love free things). Then it proceeds to explain how to get said reward.

Optimizing For: Markets

Be mindful of which screenshots you use in which markets. Shopkick’s approach may work well in the US, but that may not be the case in Japan.

Ticket Camp uses screenshots with anime-style characters that appeal to Japanese users.

Countries in Asia respond well to using comic- and anime-style characters. Ticket Camp is an example of an app leveraging those design principles. A great example of screenshot culturalization could be seen below for Jelly Splash from Wooga.

Enticing Users: Best Practices

Users are selective. You only have one to three seconds to get them to pay attention (industry experts call this the “three-second rule”). There are several fundamentals to practice to convert the most installs.

Clumsy Ninja on Google Play leads with an entertaining video to engage Android users.

You’ll want to lead with a least one clear high-definition video. Keep it short and simple — ideally 15 to 30 seconds long. As a rule of thumb, your trailer’s duration should be less than half the time it takes to download the app itself on a 4G connection.

It’s even more important to leverage an app trailer on Android, as your lead video appears at the top of the Google Play store page. Clumsy Ninja does an excellent job of utilizing this video top space with its engaging video.

For screenshots, always lead with the highest-converting image based on non-incentivized traffic. This may require some A/B testing, we will cover a testing methodology in our next post.

How to Design a Great Screenshot

It’s very important to have concise and scalable (size-wise) screenshots as users will be browsing on a range of devices including desktops, laptops, phones and tablets. File format is also a consideration — to get your screenshots onto Google Play and iOS App Store, save your screenshots as either JPEGs or PNGs.

If it’s your first time making app store screenshots or you need assistance with your next project, you can use AppIconTemplate.com’s awesome iOS and Android screenshot PSD templates.

Tinder on iPhone uses some text, while having a visual sense of hierarchy to explain the app’s core values.

In general, text should be light and used to help frame the visuals. This translates to a font size around 65pts for the body and 100pts for the header. Overall, you’ll want to communicate visually and be supported by — not reliant on — text. Tinder employs our recommended strategies by using text to enhance the visual message.

Screenshots should have a sense of hierarchy, displaying the app’s core features and unique selling points first. This way, the consumer can quickly grasp why your app is better than or different from the competition’s. In our Tinder example above, users quickly learn that the app shows local people, the ability to quickly like or pass and what happens when a match occurs. This helps it stand out against other dating apps.

Lastly, always make sure screenshots are consistent with the look and feel of the app UI/UX. Otherwise, users will become confused when they open your app and you’re likely to run into user retention problems.

The Wrap-Up

Screenshot design doesn’t have to be confusing. If you keep our guide handy, it’ll help you through the process. Just remember that:

  • Design principles differ for games and apps (and markets, too)
  • You have up to three seconds to catch users’ attention with your screenshots
  • Don’t downplay the importance of an app trailer
  • Designers and non-designers alike can use templates to speed up the process while adhering to design spec constraints and best practices

Originally published at blog.appannie.com on September 25, 2015.

--

--

App Annie
App Insights

App Annie is the industry’s most trusted mobile data and analytics platform. App Annie’s mission is to help customers create winning mobile experiences.