19

May

2016

Creating Effective iOS New User Experiences

By: May 19, 2016

While it is crucial that your iOS app is well designed, relying on a well-designed app is not enough to set your users up for success in using the app. So what exactly does set them up for success? A new user onboarding experience.

An onboarding experience in a mobile application is something that helps your users become oriented with the application. By encouraging users to start interacting with the app the moment its downloaded, it can help boost engagement and reduce drop off rates for new users – which is especially important, considering one study found that 26 percent of all apps downloaded were only opened once and never used again.

In most cases, the onboarding experience is shown the first time the app is launched. A new or updated onboarding experience may also be presented after an app is updated to help users discover and learn about new features. Here at AWeber, we believe that it's helpful to place the onboarding experience inside the app's navigation permanently so that users can view it any time – but this preference will depend on your own goals and the needs of your audience.

An onboarding experience can also take many forms. Some are in-app experiences, where the user’s first few taps trigger tips and tricks. Others focus on sending the user through a wizard-like sequence of screens where an overview of the app is provided. Some onboarding experiences are interactive, and some are read-only. And then there are those that provide multimedia to enhance the learning.

While there are many ways to create an onboarding experience, there are certain elements you should focus on in order to make it effective.

Three Keys to an Effective iOS Onboarding Experience

An effective iOS onboarding experience combines three things: multimedia, interactivity and a walkthrough of the application. The onboarding experience we crafted for our new content curation app, Curate, combines the best of all these factors.

Upon the first launch of Curate, the onboarding experience is presented full screen. In this view, users are presented with a short video that automatically plays embedded in the page, visually conveying the value of Curate to the customer.

The user then proceeds through a series of screens that convey important points about using Curate. Halfway through the flow, the user is prompted to turn on the “share sheet action” for Curate and actually curate their first piece of content (which is coincidentally a webpage that instructs users how to further use Curate). It’s this combination of multimedia, interactivity and a walkthrough that have enabled our users to have immediate success using Curate.

visit2

Now, let's take a closer look at how you can incorporate each of these three elements into your own app's onboarding.

Implementing a Walkthrough in Your iOS Onboarding Experience

The first step in implementing an effective iOS onboarding experience is to add the structure for the views. We did this through a modal presentation of a navigation controller stack. We also encapsulated the scenes for onboarding in a separate storyboard. Here’s what it looked like:

Screen Shot 2016-05-18 at 1.15.16 PM

We controlled the conditional presentation of this modal flow with a NSUserDefaults flag that indicates whether the user has “seen” onboarding yet. Then, we added the conditional logic for showing the onboarding flow to viewDidAppear in the initial view controller of our main storyboard.

This code leverages a method showOnboardingFromOnboardingManager to make the determination whether onboarding should be shown or not. First, a check whether onboarding should be shown or not happens. If it happens, onboarding is shown.

Encapsulating this logic in OnboardingManager helps insulate this view controller from changes down the road if we change the implementation behind how or why onboarding is shown.

OnboardingManager is simply:

shouldShowOnboarding() checks for the presence of a flag in NSUserDefaults. If no flag is present, onboarding hasn’t been shown, so indicate it should be shown. showOnboardingFrom contains the logic to present onboarding via a storyboard segue.

Using those simple building blocks, we were able to construct the conditional onboarding flow.

Adding Multimedia to Your iOS Onboarding Experience

We used video in the Curate iOS onboarding to help users understand the value of the app: an easy way to convert curated content into a beautiful newsletter. There were several key requirements we had for the video, including that it should:

  • Be short and to the point. We didn’t want to waste users’ time
  • Have automatic play. The video should immediately start playing when the app launches
  • Fill the width of the screen. The video should fill the width of the view, while maintaining the correct aspect ratio
  • Have no audio. For this particular experience, we didn't want there to be sound.
  • Have no player chrome. There shouldn’t be a progress bar, volume control or a pause/play button – just pure video.
  • Include no requirement to swap the video after deployment of the app.

These were fairly straightforward requirements, so I was fairly confident I could stick with a higher level API for media playback. My initial thought was to investigate MPMoviePlayerController. Upon inspection, I noticed that MPMoviePlayerController was deprecated with iOS9!

From there, I went to AVPlayer, and bingo, it worked as needed right out of the box. By default, AVPlayer didn't include chrome and would play as soon as it was added to a layer and onto the screen.

For sizing, we wanted the video to fill the full width of the main view on the screen. The trick here was coming up with the right dimensions for all devices, especially the various iPhones supported (iPhone 4 and later). AVPlayer would scale the video to a provided frame. It was just a matter of trial and error, and some math based on the different device resolutions to figure out the right resolution of the video file that would have the correct appearance on all devices.

Since there was no requirement to swap the video at a later date, we were able to bundle the video file with the app binary. There was a trivial increase in binary size, but the performance of not needing to download it over the network enabled the video to start playing the instant someone opened the application.

Regarding length, conciseness of video and lack of audio, I left that to our awesome media team to craft the perfect video.

Prompting the User to Share in Your iOS Onboarding Experience

For the purpose of our app, it is crucial that our end-users activate Curate into their set of shareable apps. Until it’s activated, users cannot access the Curate share extension from other apps. In order to do this on iOS, they must know to turn on the app in order to see Curate as an option for sharing. If users didn’t grasp this, Curate was rendered useless.

Unfortunately, there is no way to programmatically turn on iOS share extensions in iOS. But there is a way to programmatically trigger the share sheet. This enabled us to guide the user through sharing a piece of content into Curate during the onboarding experience. In addition, we added code to explicitly listen for this “first time share” to happen, at which point the onboarding flow auto-advancesto the next screen. Here’s how you can programmatically show the share sheet:

To programmatically show a share sheet, use UIActivityViewController:

First, that code creates a UIActivityViewController, using the url of the item to share. Next, a check is made to determine whether the presentation is going to happen on iPad or not. That’s specifically done by checking whether popoverPresentationController has a value or not. This is crucially important because if the barButtonItem is not provided as a source for the popover, presenting the UIActivityViewController will crash on iPad (this is poorly documented). Finally, the popover is presented.

Tell Us What You Think!

At the end of the day, our team is really proud of the onboarding experience we developed. I’d love for you to try Curate and provide feedback about the onboarding experience. Does it achieve the goal of introducing you to the app, how it works and its value?

I’m also interested to hear about how you've implemented onboarding experiences in mobile applications, so feel free to share it in the comments! Or, reach out to me directly on Twitter @obusek.

For more in-depth thoughts on writing high quality Swift code, you can also check out my personal blog cleanswifter.com.

Note: This is a post in the AWeber Engineering Blog series "Behind the App," which reveals important pieces of the behind-the-scenes story of our latest mobile app, Curate. You can find the other posts in the series here.

It's available for download on both the Apple App Store and the Google Play Store.