The 2nd part of our ASO guide reviews the aspect of graphics optimization. Discover how you can improve the visual metadata to promote your app efficiently!
In ASO Guide Part 2, we provide an in-depth look at how to ace the graphics metadata of your mobile iOS app or game on the App Store by Apple. Learn all you need to know about the best, most effective App Store Optimization of the visuals in your app icon and screenshot images as well as app preview videos. (See ASO Guide Part 1 for the guidelines on how to optimize texts and ASO Guide Part 3 for the guidelines on how to leverage the other available techniques and resources.)
App icon, or app logo, is the first element users see once they've found your app or game on the App Store, along with the app name. That is why an icon needs to be eye-catching and visually stand out, making a very strong impression already at first glance. Ideally, it should also communicate the (high) quality of your mobile app and hint at its core purpose.
In fact, iOS game and app developers are expected to provide a bunch of icons for their products, making sure they look great everywhere. A large app icon sized 1024x1024 px is used throughout Apple’s App Store — it’s your main app icon that appears on your app’s product page, in the search results, editorial featurings, and so on. Smaller ones are needed to make sure your app icon looks great on all supported iOS devices and are intended for the on-device home screen and in-system use. In addition, apps can have separate small icons for display in the the ‘Spotlight’ search results, ‘Settings’ app (for apps with settings), and notifications (for apps supporting notifications).
Good news for those developers whose mobile apps are supposed to create documents: You are not required to additionally supply document icons as the system will generate them for you automatically based on the main app icon.
1. Opt for a recognizable and memorable app icon design that is meaningful in conveying what your mobile app does. It should give a clear idea of the app’s purpose together with the app’s name (which is accompanying the icon all over the App Store) and differentiate your product from competitors. Getting a professional graphic designer involved to work with you on your app icon concept and implementation is usually a must. Before beginning to work on the app icon — and basically all other graphics — check Apple’s official Human Interface Guidelines and make sure to adhere to them at all times.
2. Keep your app icon simple and neat. Implement no more than one focus point to instantly capture the user's attention. Do not overload it with complicated forms, multiple colors, or unnecessary small elements. Avoid using screenshots, photos, sketches, or UI elements as part of the icon.
3. Design the app icon consistent with your iOS app's general visual style that you should keep in mind when choosing a color palette, shapes, etc.
4. Think twice before using any words and texts on your app icon. It is shown together with the app name. There are also many other text fields that you can make use of for copy, whereas the icon itself should remain a fully graphical, visual element not designed for reading.
5. Organize A/B tests to determine the best performing version that attracts the most attention of your target audience.
6. Remember to add your app icon in all the necessary sizes. In addition to a big one for the App Store, you are required to upload smaller icons for different devices to be shown on the Home screen and other places throughout the system when the user has already got your app. It is recommended to add separate app icons for use in the ‘Spotlight’ search, as well as in ‘Settings’ and notifications if these are supported in your iOS app.
7. Mind scalability as your app icon should be legible in all sizes. In particular, keep in mind that if you fail to provide smaller icons for ‘Spotlight,’ ‘Settings,’ and notifications, the system will automatically shrink the main app icon to fit the display specifications determined specifically for those locations. Also, for example, document icons are automatically created from your main app icon.
8. Developers are allowed to make an App Store icon look different from smaller icons. However, be careful as you certainly do not want to confuse users showing them too different-looking icons for your app on their devices on the one hand and on the App Store on the other hand. According to Apple’s guidelines, the App Store icon “should generally match the smaller version in appearance, although it can be subtly richer and more detailed since there are no visual effects applied to it.”
9. To add beauty and contrast, consider using gradients, borders, shadows, and some other graphical features as you see fit. However, no border or overlay should be used on the ‘Settings’ icon because it is automatically provided with a 1-px stroke to make sure they look fine on the Settings' background.
10. Test your app icon intended for display on users’ iOS devices when your app is already installed against diverse backgrounds, differently colored and structured, making sure it is finely visible and recognizable on any kind of wallpaper that users might have.
11. You may build alternate app icons and allow your app users to choose from them. If that's your choice, make sure you provide the same whole bunch of app icons of different sizes.
12. Double-check that your app icon image is perceived the way you want in all your target languages, countries, and cultures.
Icon size specifications:
App Store icon size
In-system icon size
‘Spotlight’ icon size
‘Settings’ icon size
Notifications icon size
See the official App Icon Guidelines from Apple to learn more.
Make sure your iOS app icon is:
Screenshots play a very important role in capturing the attention of users on the App Store and making them want to download your mobile app or game. Shown right next to (just after) your app video preview(s), screenshots are intended to visually communicate what your app does along with demonstrating its user experience, supplying extra information about it, and highlighting its key features in the form of beautiful visual samples.
As a graphical element, app screenshots have no direct influence on how high an iOS app appears in search all over Apple’s App Store as they are not among the ranking factors at all. However, screenshots are visible both on an app page, where they are among the very first elements seen, and in the search results. So they actually mean a lot for conversion rates when it comes to the App Store optimization.
While uploading video app previews is totally optional and up to developers, Apple requires at least one screenshot to be added.
1. Use screenshots to visually communicate the user experience of your mobile app by using images from its user interface. Utilize matching colors and visual forms whose harmony does the best job of representing the essence, spirit, and objective of the app.
2. Focus every screenshot to highlight a certain feature or value in a way that, taken altogether, they provide a complete understanding of the greatness of your app. Consider designing and arranging the screenshots in a way that makes them logically connected and telling a story.
3. Think of making up a cool 'panoramic' view across two or more subsequent (usually portrait-oriented) screenshots for another test as sometimes, when implemented properly, this practice can bring amazing results. When doing so, make sure the screenshots actually match and fit together with no shifts. Do not split text between the screenshots to keep all this enjoyably legible.
4. When an iOS app supports the dark mode, make sure to add at least one screenshot that shows it in action.
5. Make effort to work on the content. In fact, it is a very good practice to put a short and compelling copy on the screenshots, voicing a feature, or value, or action displayed on the image. Such content can be very helpful in making the whole gallery look like an exciting visual story that truly engages. Make sure the content and the resulting complex screenshot image follow the 'AIDA' copywriting formula — captures Attention, arouses Interest, creates a Desire, and makes users take an Action.
6. Consider the orientation of your app screenshots as it actually matters.
Note that videos (app previews) have a higher priority than screenshots, which means previews are always shown before screenshots, on the same place and according to the same logic. For example, if you've added one landscape preview, it will be the only descriptive visual asset shown about your mobile app in the search results and it will occupy the whole width of the first impression frame on the product page. If you've added one portrait preview, it will be shown at the first place plus the first two (portrait) screenshots in the search results, and it will be shown first on the product page (before the screenshots). And so on.
7. Given the above, make sure to concentrate the biggest impressions in the very first screenshots, starting from the more important features and benefits, in order to make sure what is seen on the first screen (without any scroll) is most meaningful and attractive to ensure the best conversion rates. According to studies, you have just a few seconds to convince the user (when they are on your product page) to learn more about your app and install it — in fact, seven seconds is the average time they stay on an app's product page.
8. Try different ways of screenshot design (including both layout and content), orientation, arrangement, and so on to identify the best forms and options. A/B testing indeed is a must when it comes to the visual part of your app description and promotion on the App Store.
9. Localize your app screenshots for every local market. Keep in mind that the most effective localization is not translation alone. Make sure the look and content are finely adapted and will be perceived well in each target country and culture.
10. Different devices need different sizes, so make sure to submit your app screenshots for each type of device on which your app is supposed to be opened and used (for size details, see the next section below dedicated to requirements and specifications for screenshots).
If your app indeed looks the same on all iOS devices and in all sizes, you are explicitly allowed by Apple to upload the highest resolution images for each device type, iPad or iPhone. In this case, the system will scale your app screenshots automatically for all other (smaller) device sizes. For example, it is sufficient to provide iPhone screenshots required for 5.5'' (iPhone 6s Plus, iPhone 7 Plus, and iPhone 8 Plus) and 6.5'' (iPhone Xs Max) devices, and iPad screenshots required for 12.9'' iPad Pro of the second and third generations.
11. Think ahead as you are only allowed to upload screenshots when you release a new version of your app or when its status is editable.
Screenshot size specifications:
iPhone screenshot size
iPad screenshot size
Learn more and stay updated on Apple’s app screenshot specifications for the App Store here. Note: In case an app uses the Messages framework or WatchKit, you must add additional screenshots.
Make sure your iOS app screenshots are:
App previews are short videos demonstrating what a mobile app or game does and how it looks inside, in a streamlined manner. Intended as the key multimedia format to present its user interface, features and functionality, (animated) previews have a higher priority than (static) screenshots and play a crucial part in the conversion optimization on the App Store.
In the search results, only the first preview is displayed. It is followed by the first and second screenshots in case of portrait orientation. If the orientation is landscape, only app preview #1 is shown. A product page may list all the videos, and they always precede the screenshots. The first video always autoplays on mute, both in the search results and on product pages.
Apple allows publishers to add up to three app preview videos overall. It also imposes strict requirements on their format, quality, as well as exactly what and how they may (and may not) display. In particular, every iOS app preview video uploaded for listing on Apple’s App Store must be short, straight to the point, and only use footage based on in-app screen captures showing the real use experience. It is allowed to add minor graphical overlays, text, and audio with a narration or in-app sound effects to enhance the visual demonstration.
1. Keep in mind that you only have 15 to 30 seconds to excite users by showing what kind of experience they should expect to get while using your mobile app. So each video preview should be simple, yet really fascinating and engaging, sparking interest, unveiling what makes your app unique, and persuading the user to learn more about it and eventually install it on their devices.
2. Focus on the first preview if you plan to make two or three. That is because it will appear first everywhere, both in the search results and on the product page. Moreover, the first video will begin to play automatically in both locations. Use it to overview your app experience, bringing the key features and content to the spotlight with a clear visual explanation. Consider telling a visual story to provide the user with a sense of the journey to be experienced while using the app. There is a good practice to highlight some more specific or additional features in the second and third videos
3. While only in-app user experience is allowed in the app preview footage, Apple generally agrees to accept videos with overlaid minor graphic elements if necessary for the purpose of providing more clarity on how interaction and navigation works inside the app. With that said, consider adding touch hotspots but do not show, for instance, hands simulating gestures.
4. Avoid overproducing the videos. Do not add too many extra graphical assets and effects that could be potentially implying a look or functionality your iOS app does not actually have.
5. Depending on what your app is all about, choose the best orientation — portrait or landscape. Keep in mind that a portrait-oriented first video will appear in the search results followed by the two first screenshots. A landscape-oriented first video is shown alone, with no screenshots, but in this way a promotional text fits the first frame, located right below the video.
6. Do your best to make the first five seconds especially compelling to spark users' interest and convince them to continue watching the video. Don't forget that previews autoplay with no sound, on mute.
7. Capture your iOS app's UI in the native resolution rather than zooming in on the views.
8. Implement straightforward transitions from one scene to another, such as fades and dissolves.
9. Add a text overlay to facilitate understanding and drive interest, because videos autoplay on mute and you can add context in this way. Make sure the text is legible, simple, and does not disappear too soon so users can finish reading it in due time.
10. Include an audio overlay. For example, you can use your app's soundtrack accompanied by the sound effects used in the app — this will provide musical consistency between the video and the UI of your app. You are also allowed to use a voiceover, and if that's what you want, consider hiring a professional to be sure about a high technical quality.
11. Add a compelling still poster frame (thumbnail) for each video, which will be shown whenever a video is not playing (e.g. because the internet connection is too slow or another video is playing). By default, a poster frame is made up automatically from footage displayed after 5 seconds of playback.
12. Make use of sample accounts to avoid any real personal information disclosed in the footage.
13. Translate and localize previews for all your target languages, countries, and cultures to ensure they look and feel appropriate and exciting for different audiences.
14. Ensure your mobile app’s previews to look awesome on every single device by producing a separate set of device-specific video assets according to Apple's specifications of resolution (size), especially if your app looks different on different devices.
However, if the views and actions are pretty much the same across all devices, you may opt for submitting the highest resolution videos and the system will scale them down for smaller screens. For instance, when it comes to iPhones, it is fine to upload app previews for iPhones 5.5'' (iPhone 6s Plus, iPhone 7 Plus, and iPhone 8 Plus) and 6.5'' (iPhone Xs Max). For iPads, you may add videos according to the requirements for iPads 12.9'' of the 2nd and 3rd generations. Note that your choice of the option — either different assets for every device or only the highest resolution assets to be resized automatically — applies for both your app screenshots and previews per localization.
15. Be careful as you may only change previews and submit new videos when adding a new version of your iOS app or when its status is specified as editable. The same applies to app preview poster frames.
Preview file specifications:
Learn more and stay updated on Apple’s app preview specifications for the App Store here.
Make sure your iOS app previews are:
Want to (have us) add, correct, or clarify anything? Got a cool insight or example from practice? Get in touch!
Let’s join the forces of the community to build the best App Store Optimization guide together!