ユーザーを補助するための「見せる」コンテンツ

トラックパッドの操作方法

語るより見せたほうが早い

スマートフォンをはじめとしたタッチデバイスが世の出回って 5 年以上経つわけですが、タッチ & ジェスチャーをどうすれば良いのか分からないことがあります。アプリによって右スワイプというシンプルな動作のフィードバックが異なりますし、特殊なジェスチャーで機能へアクセスできるものもあります。分断化するジェスチャー操作は随分昔からの課題ですが、最近ではユーザーのオンボーディング体験を通じて、操作を学習してもらうといった対策がなされているところもあります。

特殊な操作をユーザーに学習してもらうには、どのような表現が適しているのでしょうか。
従来は明確なテキストや、スクリーンショットを通して説明することが多かったですが、最近では動画が使われる機会が増えています。OS X で関心したのが「システム環境設定」のなかにあるトラックパッドの設定画面です。通知センターや、辞書で調べるといった操作をジェスチャーで実行することができますが、それらをすべて動画で説明しています。テキストや図だけでは理解しにくい操作も、動画であればどのように動かせばよいのか分かるだけでなく、実際画面でどのような表示になるのかも把握できます。もちろん、動画に合わせて自分で操作(練習)することもできます。

動画がないと理解が難しくなる例として、おなじ Apple が出している Watch 用のヘルプコンテンツがあります。以下の図は、Apple Watch の機能とジェスチャに記載されている図を抜粋したものです。

Apple Watch のヘルプに掲載されている図

製品ページには、動画をつかったガイドページが用意されていますが、困ったときにいくヘルプはヘルプになっていない状態です。フォースタッチのような新しい操作も、「単にタップするのではなく、画面を強く押す」と説明より、動画のほうが分かりやすいはず。特に小さな画面で複雑な操作を要するスマートウォッチでは、動画による操作ガイドは必須といえるでしょう。

手軽に動画をつくる方法

ひとむかしであれば動画をつくるのも一苦労でしたが、Mac であれば OS X にあらかじめ組み込まれている QuickTime を使えば動画で画面を記録することができます(全画面、部分切り取り両方できます)。録画した画面は、GIF アニメにして公開・共有するようにしています。GIF アニメはプラグインを要せず、どのデバイスからでも見れるのが利点です。Web サイトのヘルプコンテンツとして使うこともありますし、「こうやって操作してください」と指示するときに使うこともあります。たくさん作れば、GIF アニメのヘルプアーカイブが完成。文章でいちいち説明することなく、ループする GIF アニメを何度か見て学習してもらえます。このサイトでもたまに GIF アニメを使って解説することがあります。

GIF Brewery スクリーンショット

GIF アニメの制作は Gif Brewery がおすすめ。GIF アニメをどのように書き出すのか細かい設定ができるだけでなく、切り抜き、リサイズ、フレームの抜き出しなど、簡易編集機能があります。これひとつあれば、高価な動画編集ソフトを購入することなく、ヘルプコンテンツが作れるといっても良いでしょう。現在開発中のバージョン 3 では、iOS デバイスの録画もできるようになるらしいので、今から楽しみです。

ジェスチャーに頼り過ぎず、別の方法(GUI や音声など)でもアクセスする手段を提供するべきですが、それでも万人が完全に理解できる UI をつくるのは困難です。また、新しく入ってくるユーザーは、私たち設計者が考える「当たり前、ベストプラクティス」が通用しないことがあります。そんなときにオンボーディングのデザインや、動画をつかった『見せる』解説で補助するのはひとつの手段です。動画を作るための敷居は下がってきているので、ぜひ試してみてください。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。