A picture paints a thousand words: Choosing screenshots for your iOS app

This blog was originally posted on Localize Direct's blog on Oct the 29th 2014 and is the second post in a series of articles about improving your app's meta data.

Making a wonderful app or game is only part of your journey towards success as an app developer. You also need to make sure that people find it and download it. That means you have to learn how to sell your app to the discerning App Store shopper.

We’ve already discussed the importance of choosing an app name, today we’re going to take a look at how to create good display screenshots, and we’ll briefly discuss the new preview video option.

What should display screenshots do?

When a potential customer is sifting through the search results and they take a look at your app the first thing they are going to see is your screenshots.  This is your chance to impress them. If they don’t like your screenshots, or they don’t understand your app, then there’s a chance you’ve lost them forever. Good display screenshots will:

Ideally your screenshots will pique their interest and they’ll go on to read your description and download. Let’s take a look at some of the specifics.

How many screenshots do you need?

You must upload at least one screenshot for each app or game and you can add up to another four, for a total of five screenshots. You should always upload the full contingent. It’s a great chance to show off different aspects of your app.

Think of the first screenshot as your first impression. It is the most important screenshot by far because it is always visible on your app page on the desktop or device App Store. It has to show the primary purpose of your app, and it has to look really good.

When you prepare to upload your five screenshots you should take a look at them side by side and order them in terms of importance. This should be based primarily on the feature they show off and how important that is in terms of defining your app, but take aesthetics into account as well.

Getting the size right

If you’re targeting the iPhone and you’ve configured your app to support the four screen sizes available then you’ll need four sets of screenshots. Apple insists that you remove the status bar from your screenshots, so you have the following options:

If you’re releasing on the iPad then the sizes are as follows:

When it comes to choosing your orientation you need to weigh up how you intend your app to be used and what the device is. If your app rotates with the orientation of the device then choose the orientation it looks best in. Obviously if your app or game forces landscape, then that’s the orientation your display screenshots will be in.

Generally you’d expect portrait for iPhone and landscape for iPad because of the screen sizes, but on the iPhone 6 Plus apps can work well in landscape. Remember that most people using an iPhone will be searching the App Store in portrait, so screenshots in portrait will be more convenient for them.

If you want a handy tool for the Mac to remove the status bar from your iOS screenshots then try Status Barred, it’s free.

Should you overlay text?

It has become fairly common for display screenshots in the App Store to include text overlays. If the screenshot alone does not convey the meaning you want, then you should consider adding text. Don’t rely on the app description because some people may not make it that far. You don’t need to add a lot of text to your screenshot, sometimes two words is enough.

Text in your display screenshots can serve a few different purposes:

Sometimes you can hit multiple points with one line of concise text. For example a music streaming app might say “Stream from 15 million tracks, swipe to skip”, which would hit the first three purposes on our list.

If you do decide to add text then you must ensure that it is clear and readable. You don’t want to cover up anything important in your app screenshot. There are a couple of different ways to go here:

Overlay text directly on the screenshot. Make sure it is a contrasting color that’s easy to read. You might need to outline it in a different color, or place a clear block of color down for it to sit on.
Create some space to place the text on by putting the screenshot on a device or on a separate background.

Before we look at using screenshots on devices or backgrounds we should mention that the App Store Marketing Guidelines on images unequivocally state in section 2.10 Product images within the App Store, “Screenshots should display only the actual screen content from your app that a user will see when the app is running. Do not incorporate Apple product images into your screenshots on the App Store.”

Lots of apps and games ignore this and we haven’t heard of anyone being rejected for doing for it, but it’s worth bearing in mind.

Screenshots on devices or backgrounds

The most popular technique is to show your screenshot on the iPhone or iPad. A lifestyle shot allows you to illustrate the app in use and it can be a really good way of showing off what the app is for and how to use it. The fact that you’ll create some background space makes it easier to overlay some text without covering anything important in the screenshot.

You could also superimpose your screenshot on a background image. Once again this creates a space for text, but it also allows you to accentuate the theme of your app or game and create other visual clues that enable people to understand it at-a-glance.

Placing the device or screenshot at an angle can help make it stand out and introduce a sense of dynamism, especially if the screenshot itself is less than exciting. Just be wary of eating into your space too much, you still want the screenshot to be clear.

Localize your screenshots

You can include a different set of screenshots for each language your app supports, and you definitely should. Your main language screenshots will be included by default, but it’s worth the effort of localizing your display screenshots for different countries. It could significantly boost your downloads.

If there’s no text then you can get away with a single set of screenshots. If you plan to overlay text then create a master version of each screenshot and save it in your photo editor in a format that can be edited later. This way you can add new languages.

Always get your text translated by a professional service to avoid damaging blunders. Localization isn’t about directly translating the words, but conveying the same meaning and it’s very important when space is limited. If a direct translation is too long then a professional translator can suggest another phrase that has the same meaning and fits better aesthetically.

Creating your screenshots

If you’re going to overlay text, put your screenshot on a background, use a photograph, or manipulate the image in any way then you’ll need decent image editing software. Adobe Photoshop is probably the best known name, and you’ll find a variety of different products to try, but they can be expensive to buy or subscribe to.

A great free alternative that we recommend is the GNU Image Manipulation Program (GIMP). It’s not quite as full-featured, but it doesn’t cost a penny and it is capable of creating great screenshots. Check out the tutorials to get started.

Apple stipulates that screenshots must be in JPEG or PNG file format and they should be 72 dpi, RGB, and flattened with no transparency.

Previewing your display screenshots

Your screenshots may look fantastic in isolation, but how are they going to look on an iPhone or iPad screen? You have to make sure that they work well together in the order you’ve chosen and that the final effect is enticing.

Using the free AddLingo StoreFront web app you can create your app’s entire display page and see exactly what it will look like on an iPhone or iPad screen.

You’ll be able to see if there are any color clashes or unintentional blends different screenshots. Just like your UI design, it’s best to keep a common color palette across your five screenshots.

You might even consider using a diptych effect where two screenshots side-by-side can appear as though they are one big picture and possibly better convey the purpose of your app. It really depends on what your app does.

What to avoid

There are some common mistakes you see over and over in the App Store, but they’re very easy to avoid. Here are a few things to watch out for with your app display screenshots:

A quick word on preview videos

A full exploration of preview videos is beyond the scope of this article, but the opportunity to include a 15 to 30 second video of your app or game is not to be missed. If you’ve got an iOS 8 device and a Mac running OS X Yosemite then you can plug it in via the Lightning connector and capture a video using QuickTime.

Shoot in your primary language as you’re currently only allowed to upload one app preview video for each screen size. You can find the technical specifications for App Previews at the iOS Developer Library.

This can be a great way to show off the features of your app or the gameplay in your game. You can use the same text overlay techniques we discussed with screenshots, and you also have the option to add audio narration, but keep in mind that there’s no option to localize app previews right now.

One very important thing to do is to carefully choose your preview picture because it is going to be prominently displayed on your app page in the App Store. You can do this in QuickTime by going to the frame you want, pause it there, then open the View menu and select “Set Poster Frame”. Once you’ve done that, return the cursor to the start and save the movie file.

Painting a picture

When you are creating screenshots or a preview video for your app make sure that you show off all the key features and help prospective customers to understand what you are offering. The right picture, or set of screenshots, is worth a thousand words.