iPad
iOS
help
OriginalトレタDay 12

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

トレタ Advent Calendar 2017の12日目の記事です。

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

設定難しい問題

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

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

やっぱりヘルプが必要なのでは?

  • ヘルプ?そんなもんデザインの負けでしょ?
  • そうかもしれません。でも負けたとしてもちゃんと使えてなければ何の意味もないと思うんですよね
  • デザインで解決できることはもちろんするとして、それを補完するためにヘルプが必要なことはあるんじゃないかなぁと思います

ヘルプに必要なこと

  • 邪魔にならないこと
  • 必要な時に必要な情報を見つけられること
  • 今やっている作業を中断せずに確認できること
  • 継続的にメンテナンスできること
    • これ地味に大事なところです

みんなどうしてる?

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

Appleアプリ

GarageBand

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

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

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

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

Keynote

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

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

HelpKit

https://github.com/nst/iOS-Runtime-Headers/tree/master/PrivateFrameworks/HelpKit.framework

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

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

ベンダーアプリ

Dropbox

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

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

トレタアプリでやるとしたら…

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

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

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

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

まとめ

  • ヘルプは悪ではない
  • ただし、よく考えないとメンテされずに放置され負の遺産になる
  • SFSafariViewControllerで既存ヘルプを表示するのはコスト低めでおすすめ