onboarding

Onboarding screens are designed to introduce users to how the application works and what main functions it has, to help them understand how to use it. It can also be helpful for developers who intend to extend the current project.

When you enter in the SUSI iOS app for the first time, you see the onboarding screen displaying information about SUSI iOS features. SUSI iOS is using Material design so the UI of Onboarding screens are following the Material design.

There are four onboarding screens:

1. Login (Showing the login features of SUSI iOS) – Login to the app using SUSI.AI account or else signup to create a new account or just skip login.
2. Chat Interface (Showing the chat screen of SUSI iOS) – Interact with SUSI.AI asking queries. Use microphone button for voice interaction.
3. SUSI Skill (Showing SUSI Skills features) – Browse and try your favorite SUSI.AI Skill.
4. Chat Settings (SUSI iOS Chat Settings) – Personalize your chat settings for the better experience.

Onboarding Screens User Interface

There are three important components of every onboarding screen:

1. Title – Title of the screen (Login, Chat Interface etc).
2. Image – Showing the visual presentation of SUSI iOS features.
3. Description – Small descriptions of features.

Onboarding screen user control:

• Pagination – Give the ability to the user to go next and previous onboarding screen.
• Swiping – Left and Right swipe are implemented to enable the user to go to next and previous onboarding screen.
• Skip Button – Enable users to skip the onboarding instructions and go directly to the login screen.

Implementation of Onboarding Screens:

• Initializing PaperOnboarding:

override func viewDidLoad() {
super.viewDidLoad()

UIApplication.shared.statusBarStyle = .lightContent
view.accessibilityIdentifier = "onboardingView"

setupPaperOnboardingView()
skipButton.isHidden = false
bottomLoginSkipButton.isHidden = true
view.bringSubview(toFront: skipButton)
view.bringSubview(toFront: bottomLoginSkipButton)
}

private func setupPaperOnboardingView() {
let onboarding = PaperOnboarding()
onboarding.delegate = self
onboarding.dataSource = self
onboarding.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(onboarding)

// Add constraints
for attribute: NSLayoutAttribute in [.left, .right, .top, .bottom] {
let constraint = NSLayoutConstraint(item: onboarding,
attribute: attribute,
relatedBy: .equal,
toItem: view,
attribute: attribute,
multiplier: 1,
constant: 0)
view.addConstraint(constraint)
}
}

• Adding content using dataSource methods:
  

  let items = [
  OnboardingItemInfo(informationImage: Asset.login.image,
  title: ControllerConstants.Onboarding.login,
  description: ControllerConstants.Onboarding.loginDescription,
  pageIcon: Asset.pageIcon.image,
  color: UIColor.skillOnboardingColor(),
  titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.chat.image,
  title: ControllerConstants.Onboarding.chatInterface,
  description: ControllerConstants.Onboarding.chatInterfaceDescription,
  pageIcon: Asset.pageIcon.image,
  color: UIColor.chatOnboardingColor(),
  titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.skill.image,
  title: ControllerConstants.Onboarding.skillListing,
  description: ControllerConstants.Onboarding.skillListingDescription,
  pageIcon: Asset.pageIcon.image,
  color: UIColor.loginOnboardingColor(),
  titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont),OnboardingItemInfo(informationImage: Asset.skillSettings.image,
  title: ControllerConstants.Onboarding.chatSettings,
  description: ControllerConstants.Onboarding.chatSettingsDescription,
  pageIcon: Asset.pageIcon.image,
  color: UIColor.iOSBlue(),
  titleColor: UIColor.white, descriptionColor: UIColor.white, titleFont: titleFont, descriptionFont: descriptionFont)]
  extension OnboardingViewController: PaperOnboardingDelegate, PaperOnboardingDataSource {
  func onboardingItemsCount() -> Int {
  return items.count
  }
  
  func onboardingItem(at index: Int) -> OnboardingItemInfo {
  return items[index]
  }
  }
  

   

• Hiding/Showing Skip Buttons:

  func onboardingWillTransitonToIndex(_ index: Int) {
  skipButton.isHidden = index == 3 ? true : false
  bottomLoginSkipButton.isHidden = index == 3 ? false : true
  }
  

Resources:

• Usage of PaperOnboarding
• SUSI iOS Link: https://github.com/fossasia/susi_iOS