How to record and show screen taps gestures in App Previews videos for iOS

Published in

Whisper Arts

4 min readAug 21, 2019

App Previews is a great opportunity to tell about your application in 30 seconds and attract the attention of users in the Apple App Store. Sometimes, to demonstrate the interaction in the application, it is necessary to show places of taps and gestures in the video.

There is no definite one simple solution on how to quickly include tap gestures on the screen in your video preview. In this article, we show how you can add in your video preview this tap and move gestures.

All other requirements for video previews for your application and recommendations from Apple you can find in the guides from Apple https://developer.apple.com/app-store/app-previews/

So before start lets see the requirements for the taps and gestures move from Apple guides

“Add graphic elements, such as touch hotspots, when necessary to demonstrate how navigation or interaction works within the app. Don’t overlay animated hands simulating gestures. ”

So you cannot use images of hand as an element of clicks. You can simply use the tap element on the screen. For example, here is a picture (you can take this picture and use it in your videos, we made it for you):

1. Imitate click and motion simulations in the video editor

Take the picture of the tap and the source video. Import all of it to video editor and animate clicks and moves. The result in the pictures below.

Animation of movement and clicks from the Breastfeeding app for iOS

And this is how the process looks like

Advantages: you completely control the area of taps and moves, you can accurately position the taps and make any animations.

Disadvantages: complex and take a lot of time to prepare video with right taps and animations.

2. Add in your app code that shows taps

You can write that code by yourself or integrate third-party library in your app. Here are the most interesting solutions with GitHub:

The result will be something like this:

Example of displaying screen taps using the Fingertips library
Mr.Pillster — pill reminder app and demonstration of the work of Fingertips

Advantages: simple and convenient, especially when you need to show a lot of interactions with the screen (taps, moves, gestures, multitaps).

Disadvantages: do not forget to turn off the display of taps in the release version of the application :)

3. Enable displaying of taps in the iOS emulator

For this you need to open a terminal and run a command and then restart emulator:

defaults write com.apple.iphonesimulator ShowSingleTouches 1

Example of displaying clicks in the iOS emulator

Advantages: fast and easy.

Disadvantages: the video can only be recorded on the emulator, and not on a real device.

4. Enable clicks on the device by creating accessibility gesture

Go on your device to Settings > General > Accessibility > AssistiveTouch > CreateNewGesture. This video explains in detail how to do that:

Advantages: quick and fast and you do that on your device.
Disadvantages: need to turn custom cursor gesture for each app and float button will be always presented on the screen.

Conclusion

Now you know how to tap gestures into your video preview for Apple AppStore videos. You can use any methods to show screen taps and various gestures by using different methods.

Whisper Arts — we create useful applications that help users every day