Updated: January 27, 2022

Info View

FUIInfoViewController

Intro

The Info View pattern is generally used in onboarding scenarios. It provides the application with the ability to show customizable information in a transitionary state that locks regular navigation methods. This pattern is closely related to the What’s New component as well as the Feedback Screens (used in Multi-user Onboarding Pattern)

Info View on iPhone and iPad
Info View on iPhone and iPad

Usage

Do
  • Use Info View when you want the user to perform an action or remain in some sort of transitionary screen state.
  • Alter button styling if prioritization/hierarchy is required – no need to stick with default link/ghost buttons.
Don't
  • Don’t use Info View interchangeably with the What’s New component, if you just need to briefly/temporarily inform the user while still allowing them to navigate away or back then stick with What’s New.

Anatomy

A. Navigation Bar

A default contrast navigation bar without any actions— doesn’t use a stacked modal to highlight the difference between the What’s New component.

B. Title

Use a clear and concise title to provide users the information you are trying to communicate.

C. Description

Explain your information in a summarized form.

D. Progress Indicator

• Spinner: The spinner is used to show the progress of the state of the screen.
• 
Label: Optional, be concise when describing the action to be done – limit to maximum 3 words.

E. Button Stack

Uses button form cells, the top button is designated as primary and the bottom as secondary.

 

Anatomy of the Info View
Anatomy of the Info View

Behavior and Interaction

Progress Indicator (Spinner)

This indicates that the state of the screen is in progress, the spinner continues to rotate until the system or application is ready to transition.

Action Buttons

The actions in the button stack are emphasized and should allow the user to navigate from or alter the application state.

Rotating progress indicator on the Info View
Rotating progress indicator on the Info View

Specifications

Specifications of info view in regular and compact size.

Specification of the Info View
Specification of the Info View

Resources

Related Components: What’s New, Multi-user Onboarding

Development: FUIInfoViewController