In today's digital age, the user experience is paramount. Mobile applications need to be intuitive and user-friendly so that users not only enjoy the app's main functionalities but also easily navigate through its features. There are instances where a little extra guidance can go a long way, whether it's introducing users to a fresh feature, showing them shortcuts to complete tasks more efficiently, or simply offering tips on getting the most out of an app. Many developers have traditionally crafted custom overlays or tooltips to bridge this gap, often requiring a considerable amount of effort. But the wait for a streamlined solution is over. After much anticipation, Apple has introduced the TipKit framework, a dedicated tool to simplify this endeavor, enhancing user experience with finesse.

TipKit

Introduced at WWDC 2023, TipKit emerges as a beacon for app developers aiming to enhance user engagement and experience. This framework is ingeniously crafted to present mini-tutorials, shining a spotlight on new, intriguing, or yet-to-be-discovered features within an application. Its utility isn’t just confined to a single platform—TipKit boasts integration with iCloud to ensure data synchronization across various devices.

At the heart of TipKit lies its two cornerstone components: the Tip Protocol and the TipView. These components serve as the foundation, enabling developers to craft intuitive and informative tips that resonate with their user base.

Tip Protocol

The essence of TipKit lies in its Tip Protocol, which acts as the blueprint for crafting and configuring content-driven tips. To create your tips tailored to your application's needs, it's imperative to conform to the Tip Protocol.

While every Tip demands a title for identification, the protocol offers flexibility by introducing a suite of properties that can be optionally integrated, allowing developers to craft a comprehensive and informative tip.

1. title(Text): The title of the Tip.
2. message(Text): A concise description further elaborates the essence of the Tip, providing users with a deeper understanding.
3. asset(Image): An image to display on the left side of the Tip view.
4. id(String): A unique identifier to your tip. Default will be the name of the type that conforms to the Tip protocol.
5. rules(Array of type Tips.Rule): This can be used to add rules to the Tip that can determine when the Tip needs to be displayed.
6. options(Array of type Tips.Option): Allows to add options for defining the behavior of the Tip.
7. actions(Array of type Tips.Action): This will provide primary and secondary buttons in the TipView that could help the user learn more about the Tip or execute a custom action when the user interacts with it.

Creating a Custom Tip

Let's create our first Tip. Here, we are going to show a Tip to help the user understand the functionality of the cart button.

CODE: https://gist.github.com/velotiotech/45c3959c4a6982997322003dbd55e027.js

TipView

As the name suggests, TipView is a user interface that represents the Inline Tip. The initializer of TipView requires an instance of the Tip protocol we discussed above, an Edge parameter, which is optional, for deciding the edge of the tip view that displays the arrow.

Displaying a Tip

Following are the two ways the Tip can be displayed.

• Inline

You can display the tip along with other views. An object of TipView requires a type conforming Tip protocol used to display the Inline tip. As a developer, handling multiple views on the screen could be a complex and time-consuming task. TipKit framework makes it easy for the developers as it automatically adjusts the layout and the position of the TipView to ensure other views are accessible to the user. 

CODE: https://gist.github.com/velotiotech/b0124a5af8a0b50d21c9b6dda38bc00e.js

• Popover

TipKit Frameworks allow you to show a popover Tip for any UI element, e.g., Button, Image, etc. The popover tip appears over the entire screen, thus blocking the other views from user interaction until the tip is dismissed. A popoverTip modifier displays a Popover Tip for any UI element. Consider an example below where a Popover tip is displayed for a cart image.

CODE: https://gist.github.com/velotiotech/ca1937aa4864689f8fdafb8fefdd2d23.js

Dismissing the Tip

A TipView can be dismissed in two ways.

1. The user needs to click on X icon.
2. Developers can dismiss the Tip programmatically using the invalidate(reason:) method.

There are 3 options to pass as a reason for dismissing the tip: 

actionPerformed, userClosedTip, maxDisplayCountExceeded

CODE: https://gist.github.com/velotiotech/3f88b0bfba7acab7b0ac28c315987856.js

Tips Center

We have discussed essential points to define and display a tip using Tip protocol and TipView, respectively. Still, there is one last and most important step—to configure and load the tip using the configure method as described in the below example. This is mandatory to display the tips within your application. Otherwise, you will not see tips.

CODE: https://gist.github.com/velotiotech/f2b1280077e0b3bb6c3dd474fe1c62a9.js

If you see the definition of configure method, it should be something like:

static func configure(@Tips.ConfigurationBuilder options: @escaping () -> some TipsConfiguration = { defaultConfiguration }) async throws

If you notice, the configure method accepts a list of types conforming to TipsConfiguration. There are two options available for TipsConfiguration, DisplayFrequency and DataStoreLocation. 

You can set these values as per your requirement. 

DisplayFrequency

DisplayFrequnecy allows you to control the frequency of your tips and has multiple options. 

• Use the immediate option when you do not want to set any restrictions.
• Use the hourly, daily, weekly, and monthly values to display no more than one tip hourly, weekly, and so on, respectively. 
• For some situations, you need to set the custom display frequency as TimeInterval, when all the available options could not serve the purpose. In the below example, we have set a custom display frequency that restricts the tips to be displayed once per two days.

CODE: https://gist.github.com/velotiotech/630851556ced9bbf654568dbf1c9edce.js

DatastoreLocation

This will be used for persisting tips and associated data. 

You can use the following initializers to decide how to persist tips and data.

public init(url: URL, shouldReset: Bool = false)

url: A specific URL location where you want to persist the data.

shouldReset: If set to true, it will erase all data from the datastore. Resetting all tips present in the application.

public init(_ location: DatastoreLocation, shouldReset: Bool = false)

location: A predefined datastore location. Setting a default value ‘applicationDefault’ would persist the datastore in the app’s support directory. 

public init(groupIdentifier: String, directoryName: String? = nil, shouldReset: Bool = false) throws

groupIdentifier: The name of the group whose shared directory is used by the group of your team's applications. Use the optional directoryName to specify a directory within this group.

directoryName: The optional directoryName to specify a directory within the group.

Max Display Count

As discussed earlier, we can set options to define tip behavior. One such option is MaxDisplayCount. Consider that you want to show CartItemsTip whenever the user is on the Home screen. Showing the tip every time a user comes to the Home screen can be annoying or frustrating. To prevent this, one of the solutions, perhaps the easiest, is using MaxDisplayCount. The other solution could be defining a Rule that determines when the tip needs to be displayed. Below is an example showcasing the use of the MaxDisplayCount option for defining CartItemsTip.

CODE: https://gist.github.com/velotiotech/283d35e9c25a91d37bc9944b1f606070.js

Rule Based Tips

Let's understand how Rules can help you gain more control over displaying your tips. There are two types of Rules: parameter-based rules and event-based rules.

Parameter Rules

These are persistent and more useful for State and Boolean comparisons. There are Macros (#Rule, @Parameter) available to define a rule. 

In the below example, we define a rule that checks if the value stored in static itemsInCart property is greater than or equal to 3. 

Defining rules ensures displaying tips only when all the conditions are satisfied.

CODE: https://gist.github.com/velotiotech/72ac5e450368deb76b2cac51da0fa394.js

Event Rules

Event-based rules are useful when we want to track occurrences of certain actions in the app. Each event has a unique identifier id of type string, with which we can differentiate between various events. Whenever the action occurs, we need to use the denote() method to increment the counter. 

Let's consider the below example where we want to show a Tip to the user when the user selects the iPhone 14 Pro (256 GB) - Purple product more than 2 times.

The example below creates a didViewProductDetail event with an associated donation value and donates it anytime the ProductDetailsView appears:

CODE: https://gist.github.com/velotiotech/4e0f21813f8234359f6d7bc0f31b0328.js

The example below creates a display rule for ProductDetailsTip based on the didViewProductDetail event.

CODE: https://gist.github.com/velotiotech/4814904e09287edb200fbb52998b771d.js

Customization for Tip

Customization is the key feature as every app has its own theme throughout the application. Customizing tips to gale along with application themes surely enhances the user experience. Although, as of now, there is not much customization offered by the TipKit framework, but we expect it to get upgraded in the future. Below are the available methods for customization of tips.

CODE: https://gist.github.com/velotiotech/993a558b3864b243212c18f9d51776ba.js

Testing

Testing tips is very important as a small issue in the implementation of this framework can ruin your app’s user experience. We can construct UI test cases for various scenarios, and tthe following methods can be helpful to test tips.

• showAllTips
• hideAllTips
• showTips([<instance-of-your-tip>])
• hideTips([<instance-of-your-tip>])

Pros

• Compatibility: TipKit is compatible across all the Apple platforms, including iOS, macOs, watchOs, visionOS.
• Supports both SwiftUI and UIKit
• Easy implementation and testing
• Avoiding dependency on third-party libraries

Cons 

• Availability: Only available from iOS 17.0, iPadOS 17.0, macOS 14.0, Mac Catalyst 17.0, tvOS 17.0, watchOS 10.0 and visionOS 1.0 Beta. So no backwards compatibility as of now.
• It might frustrate the user if the application incorrectly implements this framework

Conclusion

The TipKit framework is a great way to introduce new features in our application to the user. It is easy to implement, and it enhances the user experience. Having said that, we should avoid extensive use of it as it may frustrate the user. We should always avoid displaying promotional and error messages in the form of tips.