Why Onboarding is Important

A user has installed your app. But chances are, she will open it and then delete it. This gives you a short window of opportunity to convince her to keep your app around. This is where onboarding comes in.

Onboarding is typically a short slideshow that covers a combination of the following:

  • Vision: Convey the value proposition of your app.
  • Training: Show how to use your innovative UI.
  • Engagement: Walk the user through the sign up process.

Check out UX Archive to see what others have done:

ux archive example

This tutorial will show you how to use a Page View Controller to create an engaging onboarding process.

How to use Page View Controller

Page View Controller is a common tool of choice for onboarding. It’s like a slideshow that pages through View Controllers. You can also use it to create a book or magazine app.

This piece of UI can take a while to get used to. It’s not something you use all the time, except for situations like onboarding. I find myself referring to previous projects every time I implement one of these.

Page View Controller has a DataSource which figures out what pages come before and after the current page. One page is cached in either direction. This means the DataSource only needs to ask about the direction in which you swipe, since it already knows about the trailing direction.

To get a sense of the flow, here’s a sequence of three View Controllers. Pay attention to the blue one in particular:

  1. You programmatically set the blue View Controller as the starting page.
  2. The DataSource takes over and stages the green page off screen.
  3. Swipe to green, and the blue page is cached off screen.
  4. Swipe again to red, and the blue page is discarded.

concept of page view controller

1. Download the Starter Project

This tutorial covers a three page onboarding flow. A starter project contains three View Controllers floating around on the Storyboard. Your job is to turn these pages into a slide show using UIPageViewController. You’ll end up with this:

tofu onboarding animated gif

Let’s get started.

2. Set Up the Storyboard

Page View Controller does not use segues. This means you need to add Storyboard IDs to instantiate View Controllers programmatically.

1. Open up the Storyboard. You should see three yellow View Controllers.

2. Drag in a Page View Controller from the Object library onto the Storyboard.  It doesn’t matter where.

object library

3. On the Attributes Inspector, change the Transition Style to Scroll.

4. Also check the box for Is Initial View Controller

set scroll and initial view controller

5. Select the yellow “How to prepare tofu” Scene. On the Identity Inspector, set the Storyboard ID to match the Class name.

set storyboard ID

6. Likewise, set the Storyboard ID on the other two Scenes.

7. Build and run. You should see a blank screen.

3. Set the Starting Page

The first order of business is to get something into the Page View Controller.

1. Create a new Swift file. Under FileNewFile…, choose iOSSourceSwift File and name it OnboardingPager

2. In the class declaration, subclass UIPageViewController

3. Instantiate StepZero from the Storyboard and set it as the starting page. Your code OnboardingPager.swift file should look like this:

instantiateViewControllerWithIdentifier hydrates StepZero from the Storyboard using to the Storyboard ID you set earlier. setViewControllers assigns StepZero as the starting page.

Note: Although setViewControllers accepts an array, you only provide a single View Controller. Only include a second one if you’re creating a page flipping app like iBooks.

4. Back on the StoryBoard, don’t forget to set the Page View Controller class on the Identity Inspector

set onboarding pager class

5. Build and run. You should see the “How to prepare tofu” page.

start screen

4. Implement the DataSource

The next step is to incorporate the missing pages.

1. Within viewDidLoad, set the DataSource to self.

You’ll get a compiler error until you conform to the DataSource protocol.

2. Implement the DataSource protocol:

This boilerplate code suppresses the compiler error, but doesn’t do anything yet.

3. Make helper methods to instantiate the other two pages from the Storyboard

These are similar to the getStepZero method you implemented earlier.

4. In the DataSource, return the correct page as the user swipes forward.

The logic is fairly straightforward.  If the user is on:

  • StepZero: return StepOne
  • StepOne: return StepTwo
  • StepTwo: return nil to prevent further scrolling

Feel free to refactor this into something more functional and elegant.

5. Do the same for when the user swipes backward.

The code in viewControllerBeforeViewController is similar to viewControllerAfterViewController, except you count down instead of up.

Your OnboardingPager.swift file should look like this:

6. Build and run. You should see all three pages as you scroll forward and backward, similar to the end result (but without the paging dots).

5. Add a Page Control

Got dots? Page View Controller comes with a built-in Page Control. You just need to tell it the number of dots, and which dot is your starting point.  

1. Within the DataSource, implement presentationCountForPageViewController.

Three pages means three dots.

2. Also implement presentationIndexForPageViewController.

This starts you at the first dot when you call setViewControllers.

Note: presentationIndexForPageViewController does not get called each time you swipe. It only comes into play when you call setViewControllers.

3. In viewDidLoad, set the color behind the page dots

Note: You’re not setting the background color on the dots, but on the Page View Controller.  With the built-in implementation, pages no longer take up the full height of the screen — rather, Page View Controller exposes a region of itself on the bottom dedicated to the Page Control.

The final version of OnboardingPager.swift should look like this:

4. Build and run. It should look like the animated GIF at the top of the page.

More Information

You can download the completed project here.

To learn more about Page View Controller, here’s a good discussion on StackOverflow.

A lot of thought goes into onboarding. At a recent meetup in DC, Levent Gurses presented this handy slide deck on the subject. Also, the WWDC 2014 video Making a Great First Impression With Strong Onboarding Design is a good resource.

Although it’s out of the scope of this tutorial, animations are often used with onboarding to get the message across with fewer words. If you have a subscription at Ray Wenderlich, Marin Todorov made a great video series on iOS Animation with Swift.

Have any suggestions for future tutorial topics? Feel free to add your thoughts to the comments.

Like this post? Please share it below! Then follow us on Twitter @thorntech or join our mailing list for future updates.