TipKitによって機能を見つけやすくする方法

TipKitによって機能を見つけやすくする方法

TipKitを使ってアプリの使い方について伝えるようにしましょう！ヒントを通じて効果的かつ教育的な瞬間をどのように作ることができるかについてご確認ください。理想的なオーディエンスに到達するための適格性ルールを構築する方法、ヒントの頻度をコントロールする方法、成功するインタラクションを確実にするためのテスト戦略について解説します

関連する章
- 0:00 - Intro
- 1:27 - Create a tip
- 5:23 - Eligibility rules
- 9:19 - Display and dismissal
- 12:35 - Test tips
- 13:56 - Wrap-up
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC24
- TipKitによる機能検索のカスタマイズ
ダウンロード

♪ ♪
こんにちは Instructional Design マネージャーのEllieです TipKitを使って機能を見つけやすくすることについてお話します最初のヒントを作成する方法ヒントが表示される人を指定するためのルールアプリ内での教育に役立つメッセージの表示や非表示のタイミングや頻度などを制御しヒントをテストする方法を確認しますその前にTipKitの背景について
人々が気に入るとわかっている機能に取り組まれているかと思いますですがまずはその機能を発見してもらう必要があります TipKitはアプリにヒントを簡単に表示できる新しいフレームワークです
Appleのすべてのユーザー教育に携わるInstructional Products Teamとして特に教育に役立つことを念頭に置いて TipKitをデザインしました TipKitは他の人に新しい機能について教えたり隠れた機能の発見を手伝ったりすることができますあるいはより速くタスクを達成するやり方を教えてあげることもできます iPhone iPad Mac Apple Watch Apple TVで利用可能ですそれではヒントの作成に取りかかります裏庭をお気に入り登録する機能がありますお気に入りに登録するとその人が最も気になる裏庭に簡単にアクセスできますそのためヒントの候補として最適です一旦機能を特定したら Xcodeにアクセスする準備ができましたまず「裏庭をお気に入り登録」に関する新しいヒントを定義しますヒントはタイトルとメッセージで構成されています役に立つヒントにはその機能が何であるかを示すタイトルとしての直接的なアクションフレーズと覚えやすい利益となる情報や説明のメッセージがありユーザーはなぜその機能を使いたいのかを知ることができます
効果的なヒントの例をいくつか紹介してみましょうこれらはすべて実践可能であり指導的で覚えやすいものになっていますこちらはTipKitを使用すべきでない場合のいくつかの例です 1つ目はプロモーションでもうひとつはエラーメッセージでどちらも教育に役立つものではありません 3つ目は機能が向上するのは素晴らしいことですがそれを利用する人は何もする必要がありません最後のは便利だが複雑すぎてその場で読んで覚えるには
あまりに複雑ですヒントに戻りましょうタイトルとメッセージはすでに用意しました次にヒントのビューの基本構造にそれらを加え TipsCenter を設定します TipsCenter はTipKit の主要な機能を実現しヒントと関連イベントをアプリの起動を跨いで持続させテストを容易にします TipsCenterのデフォルトの共有インスタンスが提供されているので
それを追加しTipsCenterが構成されたのでヒントが見れるようになりましたいい感じだけどもっとよく見えるはずですテキストの色をアプリに合うように藍色に変更しアイコンを入れて注意を引きやすくしてみます星マークを選んだのはお気に入り登録についてのヒントだからです機能に対してカスタマイズ可能な設定がある場合はアクションボタンを追加してくださいアクションボタンは人々が素早く調整できるようにそれらの設定に直接移動することができますあるいは特に役に立つと思われる情報があればオンボーディングフローなどの追加リソースにリンクもできます OK　うまくいったようです次に最適な配置を見極めてみますヒントのビューには2種類あります： 1つ目はポップオーバービューですアプリのUIの上にヒントを表示できます現在のアプリ画面を変更することなくボタンやその他の要素を直接指すことができます tvOSでは主にポップオーバービューが使われますもうひとつはインラインビューでこれはアプリの UIを一時的に調整する形になりますそのためUIがブロックされることはありませんどちらのビューを使用する場合でも呼び出す関連ボタンや要素の近くにヒントが表示されるようにすると便利です裏庭をお気に入りに入れるにはポップオーバービューを使い右上に配置されているスターボタンをポイントするように配置しますこれが私のアプリの最初のヒントになりました素晴らしい出来栄えで文脈にも合っていますしかしベストなタイミングで理想的なオーディエンスにリーチするというTipKitのパワーを本当に活用するためにはいくつかのルールを追加したいと思います Charlieに次のレベルへのヒントについて話してもらいましょう Charlie: ありがとう Ellie Instructional Products teamのソフトウェアエンジニアリングマネージャーの Charlie Parksです新しい機能を発見することは驚きと喜びを呼び起こしますがその機能がその人にとって興味深いものでありそれに関して伝えることがスパム的ではなく無関係ではない場合に限られます裏庭のお気に入り登録についてのヒントは役に立つでしょうが特にその機能を知っている人には向かないかもしれませんアプリをあまり使用しない人の関心も低いかもしれません Appleではアプリ内での教育はその恩恵を受ける人に焦点を当てるべきだと考えていてアプリ内で何かを達成しようとしている人の邪魔にならないようにすることを目標にしています最も適切なオーディエンスに最も適したタイミングで確実にヒントを表示します TipKitは単独または組み合わせて使用することができる適格性に関する多くのルールが用意されていますルールには主に2つのタイプがあり 1つ目はパラメータベースのルールでパラメータベースのルールは永続的でSwiftの値型に基づいたヒントを表示するのに適していますもうひとつはイベントベースのルールですイベントベースのルールではある人がヒントの対象となる前に実行しなければならないアクションを定義することができます
裏庭のお気に入り登録のヒントのためにまず最初にしたいことはアカウントにログインしていることを確実にすることですパラメータベースのルールを実装しますまずパラメーターの初期値を falseに設定しますそしてヒントのルールにこれを付け加えますいいですねヒントをもらう人を絞れましたがさらに絞ってみたいです人々がアプリを使い当たり前のようにその機能を見つけられるようにしたいですその方法とは次のようなものでイベントベースのルールを作成することです詳細ビューに3回以上アクセスした後だけに表示されるよう
まずイベントを作成しますこのルールがtrueと評価されるまでにイベントを誘発させたい回数をカウントします今回ヒントを提示する前に裏庭の詳細ビューに3回アクセスしてもらいたいです最後に必要なのはイベントを報告することです裏庭詳細ビューではビューが表示されるたびにイベントを報告しますルールがまとまりつつありますがもう少し強化したいとしたらどうでしょう？裏庭の詳細ビューを頻繁に見にくる人にも関わらずお気に入り登録していない人たちに焦点を絞ってきましたねさらにアプリを定期的に使用している人だけに表示したいと考えました
イベントベースのルールに日付クエリモディファイアを追加して過去5日間に3回裏庭の詳細ビューにアクセスした場合のみ trueと評価されるようにします TipKitのもう一つの強力な機能は各イベントに関連するタイプを追加してカスタムドネーションを作成する機能です関連タイプを使用するとイベントベースのルールをさらに絞り込むことができ誰かが特定の裏庭詳細ビューに移動した
場合にのみマッチしますまずDetailViewDonationを作成し特定の裏庭ビューのIDを指定しますそして私のドネーションで裏庭ビューのIDを記載しますこの2つが確立したら固有の裏庭IDに基づいてイベントを照会するルールに更新しますこれらのカスタムドネーションを定義する際には保存されるデータのサイズに留意してくださいサイズが大きいほどクエリの実行速度は遅くなりクエリの実行速度が低下します TipKitのルールでは簡単に強力なものを作成できますヒントを最も恩恵を受ける人たちに表示するための強力でシンプルな方法を提供しルールは一般的なものから具体的なものまで必要に応じて組み合わせることができますアプリにヒントが表示されたらいつまでも画面に表示させたくないですしその人がヒントに書かれている機能を使った場合にヒントを長引かせたままにしたくありません複数のヒントがある場合圧倒されかねないですしやろうとすることの邪魔になりかねないので一度に全部を表示させないようにしたいものです TipKit はいくつかの表示および非表示ビヘイビアを提供しますヒントは適切な間隔で表示され有益である限り表示されます例えばさらにいくつかのヒントをアプリに追加したとしましょう Backyard Birdsアプリに 5つのヒントを加えましたヒントはどれも役に立つものですが一度にすべて表示された場合は効果的ではなくなってしまいます TipKitではヒントの表示頻度を設定できより理想的なケイデンスで表示できます
TipCenterでは別のヒントが表示されるまでの時間を指定することができます 24時間ごとに表示させたい場合は .dailyを 60分ごとに表示させたい場合は .hourlyを使うことができます有効な時間間隔の値を指定することでカスタム期間を指定することもできますまた本当に即座に教育が必要ならば .immediateモディファイアを使うこともできますこのようにすると最近別のヒントが表示されたとしてもその瞬間に自分が対象となるヒントが表示されます表示頻度を無視する代わりに TipsCenterレベルで 1回限りのヒント単位で無視する方が便利かもしれませんそのために .ignoresDisplayFrequencyオプションを追加しますこれでその特定のヒントだけが誰かが対象となる瞬間に表示され一方でアプリの残りのヒントは TipsCenterレベルで設定した表示ケーデンスに従いますヒントが表示されたら有益な限り画面上に表示されるようにしたいですですからもし誰かがヒントに書かれている機能を使用しアクションを実行した場合またはヒントの対象ではあるがまだそのヒントに興味がない場合そのヒントは非表示にするべきですアプリを使う人がヒントを表示させるためのルールをすべて満たしているとしましょうログインしており過去5日間に3回裏庭の詳細ビューを開いているがどの裏庭でもお気に入りボタンをタップしたことがなかったとしますその人がヒントを見てお気に入りボタンをタップしたら「.userPerformedAction 」という理由で無効化メソッドを呼び出しますもう一つの非表示方法は定義された.maxDisplayCountより多く表示された場合ですこの場合ヒントが5回表示され何もアクションを起こさなければ次に裏庭詳細ビューに入ったときに表示されることはありませんこれらはTipKitが提供する組み込み機能を使用してヒントを非表示にする方法の一部ですしかしアプリのことを一番よく知っているのはみなさんですので .invalidate()メソッドを使うことでどんなインタラクションや基準にもとづいてもヒントを非表示にすることができます TipKitはiCloud経由でヒントのステータスを同期することもできます例えばそのアプリをiPadとiPhoneの両方にインストールして使っている人がいてその機能性がどちらのデバイスでも同じである場合おそらく両方のデバイスで機能について教育しない方がよいでしょうそれではEllieに TipKitが提供するAPIのテストと次のステップについて話てもらいます Ellie: テストを簡単にするために TipKit には必要に応じてヒントを表示したり非表示にしたり適格性ルールを回避するために使用できる便利な API が付いていますアプリ内のすべてのヒントを設定されたルールを満たしていなくても検査することができますそのためにはTipsCenterの設定に .showAllTips を追加しますテスト時に特定のヒントだけを表示したい場合は.showTips を使用し特定のヒントのIDを渡すか .hideTipsを使用して特定のヒントを表示しないようにしますアプリの別の機能に集中するためにヒントを表示しないようにしたい場合は .hideAllTipsを使用します .resetDatastoreを使用してアプリをビルドするごとに元の状態を設定し TipKitデータストア内のすべての情報を消去することもできます API経由で呼び出すことができるテストオプションはすべて起動時の引数としても利用できますこれらのいずれかを使用して簡単なスポットチェックや全機能のテストに利用できますこれで準備完了ですヒントを作成しルールを追加しましたアプリでヒントの頻度を設定し現在テストをしていますまとめるとヒントはアプリの機能を発見してもらうのに最適ですヒントは短くまとめること理想的なオーディエンスに届けるために簡単に定義できる強力なルールのもとにターゲットしましょう TipKitのサンプルコードは developer.apple.comで公開されますさらなる詳細については TipKitのヒューマンインターフェイスガイドラインをご確認ください TipKitを念頭に置いてアプリを見直して新機能の開発に取り組んでいただければと思います Instructional Products Teamを代表してご視聴ありがとうございました

struct FavoriteBackyardTip: Tip {

    var title: Text {
        Text("Save as a Favorite")
    }
    
    var message: Text {
        Text("Your favorite backyards always appear at the top of the list.")
    }
}

2:48 - Configure TipsCenter

@main
struct BackyardBirdsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }

    // ...

    init() {
        TipsCenter.shared.configure()
    }
}

3:18 - Add actions and an asset to a tip

struct FavoriteBackyardTip: Tip {

    var title: Text {
        Text("Save as a Favorite").foregroundColor(.indigo)
    }
    
    var message: Text {
        Text("Your favorite backyards always appear at the top of the list.")
    }
    
    var asset: Image {
        Image(systemName: "star")
    }
    
    var actions: [Action] {
        [
            Tip.Action(
                id: "learn-more", 
                title: "Learn More"
            )
        ]
    }
}

4:53 - Create a popover view

private let favoriteBackyardTip = FavoriteBackyardTip()

// ...

.toolbar {
    ToolbarItem {
        Button {
            backyard.isFavorite.toggle()
        } label: {
            Label("Favorite", systemImage: "star")
                .symbolVariant(
                    backyard.isFavorite ? .fill : .none
                )
        }
        .popoverMiniTip(tip: favoriteBackyardTip)
    }
}

6:38 - Add a parameter based rule

struct FavoriteBackyardTip: Tip {

    @Parameter
    static var isLoggedIn: Bool = false

    // ...

    var rules: Predicate<RuleInput...> {

        // User is logged in
        #Rule(Self.$isLoggedIn) { $0 == true }
    }
}

7:16 - Add an event based rule

struct FavoriteBackyardTip: Tip {

    @Parameter
    static var isLoggedIn: Bool = false
  
    static let enteredBackyardDetailView: Event = Event<DetailViewDonation>(
        id: "entered-backyard-detail-view"
    )

    // ...
    
    var rules: Predicate<RuleInput...> {
        // User is logged in
        #Rule(Self.$isLoggedIn) { $0 == true }
            
        // User has entered any backyard detail view at least 3 times
        #Rule(Self.enteredBackyardDetailView) { $0.count >= 3 }
    }
}

7:34 - Donate the event when a view appears

.onAppear {
     FavoriteBackyardTip.enteredBackyardDetailView.donate()
}

7:59 - Filter event donations in an event based rule

// User has entered any backyard detail view at least 3 times in the past 5 days
#Rule(Self.enteredBackyardDetailView) { 
    $0.donations.filter { 
        $0.date > Date.now.addingTimeInterval(-5 * 60 * 60 * 24)
    }
    .count >= 3
}

8:34 - Create a custom donation

// Create the associated type
extension BackyardDetailTip {
    struct DetailViewDonation: DonationValue {
        let backyardID: Int
    }
}

// Donate the unique id of the backyard detail being viewed
.onAppear {
     BackyardFavoriteTip.enteredBackyardDetailView.donate(
         with: .init(backyardID: backyard.id)
     )
}


struct FavoriteBackyardTip: Tip {

    // ...

    var rules: Predicate<RuleInput...> {
        // Update the rule to specify a backyardID
        #Rule(Self.enteredBackyardDetailView) {
            $0.donations.filter {
                $0.date > Date.now.addingTimeInterval(-5 * 60 * 60 * 24) 
            }
            .largestSubset(by: \.backyardID)
            .count >= 3
        }
    }
}

9:57 - Configure display frequency

// One tip per day.
TipsCenter.shared.configure {
    DisplayFrequency(.daily)
}

// One tip per hour.
TipsCenter.shared.configure {
    DisplayFrequency(.hourly)
}

// Custom configuration. Only show one tip every five days.
let fiveDays: TimeInterval = 5 * 24 * 60 * 60
TipsCenter.shared.configure {
    DisplayFrequency(fiveDays)
}

// No frequency control. Show all tips as soon as eligible.
TipsCenter.shared.configure {
    DisplayFrequency(.immediate)
}

10:34 - Turn off display frequency controls for a tip

struct FavoriteBackyardTip: Tip {

    // ...
  
    var options: [Option] {
        [.ignoresDisplayFrequency(true)]
    }
}

11:27 - Invalidate a tip

Button {
    backyard.isFavorite.toggle()

    // When user taps the favorite button, dismiss the tip
    favoriteBackyardTip.invalidate(reason: .userPerformedAction)
} label: {
    Label("Favorite", systemImage: "star")
        .symbolVariant(backyard.isFavorite ? .fill : .none)
}
.popoverMiniTip(tip: favoriteBackyardTip)

11:41 - Configure max display count on a tip

struct FavoriteBackyardTip: Tip {

    // ...

    var options: [Option] {
        [.maxDisplayCount(5)]
    }
}

12:46 - Programmatically call testing API

// Show all defined tips in the app
TipsCenter.showAllTips()

// Show some tips, but not all
TipsCenter.showTips([tip1, tip2, tip3])

// Hide some tips, but not all
TipsCenter.hideTips([tip1, tip2, tip3])

// Hide all tips defined in the app
TipsCenter.hideAllTips()

// Purge all TipKit related data
TipsCenter.resetDatastore()

13:31 - Configure launch arguments in your scheme

// Show all defined tips in the app
com.apple.TipKit.ShowAllTips 1

// Show some tips, but not all
com.apple.TipKit.ShowTips tipID,otherTipID

// Hide some tips, but not all
com.apple.TipKit.HideAllTips 1

// Hide all tips defined in the app
com.apple.TipKit.HideTips tipID,otherTipID

// Purge all TipKit related data
com.apple.TipKit.ResetDatastore 1

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC24