ここからメインコンテンツ

ユーザビリティ・コラム

ここからメインコンテンツ

第11回 手がかり・ガイダンス (Cue and User guidance)

ユーザーが操作を始めようとした場合や途中で何か困ったことが起きたときなどに、その解決につながるヒントとなる情報を提供し、次にすべき行動を誘導する。ユーザーがどういうことをするのかを考えて、その時その場面で手がかりを用意し、次にすべきことを知らせる。

1. 入力選択の手がかり

何かを行う入口となる手がかりは、光や点滅表示などの視覚的な表現、あるいは音による聴覚的な表現でユーザーの行動を誘導することができる。ATMや券売機などは挿入口が複数あるために迷いやすいが、それぞれ必要な場面において光の点滅と音でその場所を知らせてくれている(図1,図2)

図-1 券売機1

図-1 券売機1

図-2 券売機2

図-2 券売機2


図3は入力カーソルが点滅していることによって文字入力が要求されていることが分かる。またその点滅がこの箇所から入力し始めるという手がかりとなっている。図4は飲み物が買えるのか買えないのかを“売切れ”表示だけではなくボタンが光っているかどうかで判別できる。もし目当てのものが買えない場合、次にその他の飲み物の中から改めて選択する行為をとる。

図-3 券売機1

図-3 入力カーソルの点滅

図-4 券売機2

図-4 自動販売機のボタン


2. 入力方法・ルールの手がかり

入力や設定を要求する場面では、どのように行えばよいか、その作業を支援する手がかりが必要である。

入力例

ユーザーの入力操作が要求されるときに、どのように入力すれば良いのかという記入例を表示している。ふり仮名は「ひらがな」か「カタカナ」か、数字は「全角」か「半角」かなど、迷いやすく間違えやすい。記入例が具体的に示されていれば、それにならって入力操作ができる(図5)。

図-5 入力例の表示(ECサイトの例)

図-5 入力例の表示(ECサイトの例)

検索方法

図6)はユーザーの目的に合わせてシステムがその先の選択条件を提示し、検索結果を表示している。上位にある項目を選択すると、それに対して次に選択できる項目だけが自動的に表示される。「step2」以降も同様の操作を繰り返していくことが予測でき、またその検索項目に該当する結果が絞り込まれていくことがわかる。最終的にユーザーは「step1」から「step3」まで順に選択を行っていくことで、目的に一番近い検索結果を見ることができる。

図-6 検索方法の例

図-6 検索方法の例

3. 判断の手がかり

ユーザーが自由に数値などを設定する操作の場合に目安となる手がかりが必要である。およそどの程度の設定をすればよいのか、標準的な値を表示し仕上りの判断となるものを示す。

デフォルト値

ある機能を設定しようとするとき、そのダイアログ画面にはアプリケーションが推奨する設定値が表示されている。ユーザーはそれに近い前後の数値を入れることで自分がイメージしている設定ができるのだろうと予測して操作ができる。設定についてよくわからない場合は、そのまま使用すればよい(図7)。

図-7 デフォルト値の例

図-7 デフォルト値の例

シミュレーション

図8)は写真や画像の色調補正の例である。この場合は色相と明度の設定値が反映された状態で、複数の補正の候補が表示されている。ユーザーはその中から自分のイメージに近いものを判断して選ぶことで設定が出来る。

図-8  シミュレーションの例

図-8 シミュレーションの例

以下にガイドラインを記載する。

デザイン・設計ガイドライン

  • (1)入力選択の手がかり

    • 光や点滅表示などの視覚的な表現、あるいは音による聴覚的な表現でユーザーの行動を誘導する。
  • (2)入力方法・ルールの手がかり

    • ユーザーに入力を要求する場面では、どのように入力したらよいかの例が表示されていること。
  • (3)判断の手がかり

    • 自由に数値などを設定する操作の場合に、標準的な値を表示し仕上りの判断となるものを示す。