Movatterモバイル変換


[0]ホーム

URL:


コンテンツ

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

Yasuhisa Hasegawa

3 min read

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

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

スマートフォンをはじめとしたタッチデバイスが世の出回って 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 やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。

コンテンツの関連記事

デザイン

デザインプロセスに共通する4つの段階と必要とされる能力

出すことを前提としたプロセス製品のデザイン戦略を定義し、それを基に調査を実施。そこからプロトタイプを作成、分析・検証というサイクルを繰り返すといったデザインプロセスがあります。こうしたプロセスを早く効率的に行う手法としてリーンやアジャイルがありますが、それがすべての答えではありません。基本を知ることは重要ですが、「プロセスに沿って正しくやろう」「こうするべきだ」と固持しても結果に繋がらないことがあります。手法と同じくらい重要なのが、組織の文化。どのようなスキルセットをもっているのかはもちろん、働き方、コミュニケーションの仕方が手法の取り入れ方に大きく影響します。「銀の弾丸」とも呼べる無敵の手法はありませんし、組織に合う手法を見つけ出すことが『ひとつの旅』と言えるかもしれません。それぞれ自分たちに合うプロセスを探すことになるものの、どの場合でも共通していることは幾つかあります。今私が考える共通していることをまとめると上図のようになります。図には大きく4 つの段階が含まれています。アウトプット手描きのスケッチからコードで書かれた動作するものまで、まず何かを作り出す段階

コーディングWebアクセシビリティ
アクセシビリティ

コーディングWebアクセシビリティ

実践的な入門書Webアクセシビリティの関連書籍は元々数が少ないですが、どれもお堅いイメージが漂うものばかり。そうしたなか、表紙から入りやすそうな「コーディングWebアクセシビリティ[https://www.amazon.co.jp/dp/4862462669?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=4862462669&adid=0SW8PF9DM90BZV60E9YZ&]」は、ひとつ特異な存在ですし、今までの Webアクセシビリティ書籍のイメージを払拭しています。恐らくジャケ買い、またはジャケ立ち読みした人もいるのではないでしょうか。圧迫感のない文字の扱い、豊富にある図やイラストも、表紙の雰囲気を裏切っていません。やさしく基本から書かれていますが、フォームやモーダルウィンドウといった、実装に悩む UIのアクセシビリティ向上のヒントが紹介されており、現場ですぐ使えるノウハウも盛り込まれています。章ごとに大きく「インターフェイスの概念」「実装のためのルール」


[8]ページ先頭

©2009-2025 Movatter.jp