More than 5 years have passed since last update.

トレタAdvent Calendar 2017

iPadアプリでのヘルプのあり方

Last updated at 2017-12-12Posted at 2017-12-12

トレタでiOSエンジニアをやっている @y_koh です。
今日はiPadアプリでいつも頭を悩ませる「ヘルプ」について書いてみます。

設定難しい問題

さて、これはトレタの設定画面なのですが、ぱっと見操作に迷うようなところは無いと思います。でもそれぞれの項目を設定することでどうなるのかってわからないですよね。

現状はカスタマーサクセス部門が導入説明会で丁寧に教えているので、特に問題にはなっていません。ただ、今後導入店舗数が増え続けていく状況で全てのお客様に対して手取り足取りやっていくことは現実的ではなくなってきました。

悩んだらまずはApple標準アプリを確認してみましょう。

付箋のようなものがオーバーレイで表示されます

disclosureタップした箇所によって表示するヘルプも変わります。
ここでは上の「コントロールバーの詳細情報」をタップしてます。

こちらは右下の「ギターの詳細情報」。

画面遷移が少なく、操作するものがだいたい同じ位置にとどまっているものはこのタイプのヘルプが採用されています。
iMovieも同様でした。

Keynoteでは画面上にコントローラが少ないので、先程のようにオーバーレイするものは無かったです。

Keynote、Pages、Numbersはこちらのパターンでした。
結構ちゃんとトーン揃えてるんだなぁという感じですよね。
実はこれHelpKitというprivateフレームワークでした。

何でこれに気づいたかというと、リンクを何気なーくドラッグしたら普通にフレームワーク名が見えました(^_^;)

Helpの内容はウェブベースになっていて、リアルタイムにメンテナンス可能になっています。

これすごくいいなと思いました。既にあるウェブベースのHelpをアプリ上ではSFSafariViewControllerを使ってモーダルで表示させるだけです。
（ちょっと下の方にプランとかへのリンクがあるのが大丈夫なのか気になりますが…）

これならメンテするときも、元のヘルプを更新するだけで良いですね。

※あくまでお試しで現状プロダクションに載せる予定は無いです

完全にジャストアイデアで、Issueではなくいきなり打ち手に飛んでますが、
こんな感じでそれぞれにヘルプボタンを置いて、該当するヘルプページを表示するのはどうでしょう。

ヘルプは既存のものを使っていますし、SFSafariViewControllerは全画面ではないので、後ろの画面も見えて何をしていたかを忘れずにすみます。（横長になっているのは現状のヘルプページの関係で狭いとかなり見づらかったためです）

ちなみに設定画面内の他の画面にも設置してみたのですが、共通化部分に追加することが出来たので全体で50行くらいで実装することが出来ました。これくらいのコスト感で出来るなら結構良いのでは？と思ったりしてます。