第三章 UINo.018
情報の優先度
Information Hierarchy別名 情報の優先順位、視覚的階層、ビジュアルヒエラルキー、メリハリ
概要
画面に出す情報のうちどれを先に目に入れるかの順。いまの判断に要る情報ほど大きく、目の行く位置に、濃い色や太い字で出す。そうでない情報は小さく控えめにして、この順を画面に表す。差がないと、どこを見ればいいかわからず、体力が減っていることのような大事な変化を見落とす。
使われる場面
- 戦う場面の HUD
- 体力と弾数を大きく、目の行く位置に出し、スコアや所持金は隅に小さく出す。敵から目を離す時間が短くても、残りの体力と弾を読み取れる。
- 体力が残り少ないとき
- 体力の表示を最も強め、色に加えて印やゆっくりした動きでも知らせる。ほかの所を見ていても、危ない状態に気づける。
- 制限時間のある面
- 時間に余裕があるうちは控えめに出し、残りが少なくなったら大きく、目立つ色にする。時間切れが近いことに気づける。
- 探索や移動の場面
- 戦っていないあいだは、次の目標や行き先を強める。どこへ向かえばよいかを迷わずに済む。
- 買い物や装備の画面
- 値段と所持金、装備したときの能力の変化のように選ぶ判断に使う値を強め、説明文は控えめにする。
- 結果の画面
- 遊んでいるあいだは控えめにしたスコアや獲得した物を、ここでは大きく出す。同じ情報でも場面によって優先度が変わる。
判断基準
| こういうとき | こうする |
|---|---|
| 画面の情報が多すぎて、どこを見ればいいかわからない、という感想が出る | 場面ごとにプレイヤーがその場の判断に使う情報を選ぶ。最も強める情報を一つ、次に強める情報を一つか二つにする。強める情報は大きく、目の行く位置に、濃い色で出す。ほかの情報は小さくし、色を控えめにする。 |
| 体力が減っていることに気づかなかった、という感想が出る | 体力が残り少ないと判断する線を決め、下回ったら体力の表示を最も強める。色を変えるだけでなく大きさ、印、ゆっくりした動きも変える。 |
| どの表示も大きく派手で、かえって何も目立たない | 強める情報を場面ごとに絞り、残りを控えめにする。目立つかどうかは周りの表示との差で決まる。 |
| 大きさの差を付けたのに、強めた情報が目に入りにくい | 最も強める値を控えめな値の 1.5〜2 倍ほどの大きさから試す。大きさで足りなければ、色と太さ、位置も合わせて変える。 |
| 表示が点滅したり揺れたりし続けて、落ち着かない | 動きは危険を知らせるときだけにし、状態が戻ったら止める。点滅させるなら、1 秒に 3 回を超えないようにする。 |
| 大事な表示の違いが色でしか見分けられない | 色の見え方によっては区別できない。大きさ、印、文字も一緒に変える。 |
| 場面が変わるたびに表示の位置が動き、探し直すことになる | 情報ごとの置き場所は固定する。場面で変えるのは大きさ、色、形、動きにする。 |
| スコアや所持金のような、いまの判断に使わない値が目立っている | 画面の隅に寄せ、小さく控えめな色にする。大きく出すのは結果の画面や買い物の画面にする。 |
| 控えめにした情報が、読もうとしても読めない | 背景との明るさの差を残し、文字を小さくしすぎない。控えめにするのは目を引く強さで、読みやすさは保つ。 |
遊んでこう感じたら
指示の例
画面の表示がどれも同じ大きさと色で、どこを見ればいいかわからない。情報の優先度を付けて、戦闘中は体力と弾数をほかの 2 倍くらいの大きさにし、スコアと所持金は右上の隅に小さく灰色で出して
体力が残り少ないことに気づかずにやられた。体力が 3 割を切ったら、情報の優先度で体力を一番上にして赤く大きくし、感嘆符の印も付けて
制限時間が迫っているのに気づかない。残り 10 秒を切ったら、時間の表示の優先度を上げて画面の上の中央で今の 2 倍くらいの大きさにし、目立つ色にして
表示がどれも派手で、かえって何が大事かわからない。情報の優先度を見直して、強める表示は場面ごとに一つか二つに絞り、ほかの表示は小さく灰色にして点滅も止めて
敵を倒した後、次にどこへ行けばいいかわからない。戦っていないあいだは、情報の優先度で次の目標を一番上にして、画面の上の中央に大きく出して
詳細
差がないと何が起きるか
ゲームの画面には体力、弾数、残り時間、次の目標、スコア、所持金のようにいくつもの情報を重ねて出す。どれも同じ大きさと色で並べると、プレイヤーは欲しい情報を探して一つずつ読むことになる。戦っているあいだは目がキャラクターや敵に向いていて、表示を読みに行く時間は短い。そのため、体力が減っていることのような、いま知るべき変化を見落とす。
そこで、いまの判断に要る情報から先に目に入るよう、情報ごとに見た目の差を付ける。どの情報を先に目に入れるかの順を情報の優先度と呼ぶ。優先度は大きさ、位置、色などの差で画面に表す。デモの上の段は差を付けない画面、下の段は優先度に合わせて差を付けた画面である。載せている情報もゲームの進み方も同じである。「一瞬だけ見せる」を押すと、両方の画面をいったん隠し、0.5 秒だけ見せてからまた隠す。短い時間で何を読み取れるかを二つの画面で比べられる。
優先度の決め方
優先度は情報そのものの大事さでは決まらず、その場面でプレイヤーが何を決めるかで決まる。戦っているあいだ、体力は撃ち続けるか退くかを決めるのに使うが、敵のいない道では次にどこへ向かうかのほうが要る。
決めるときは次の順に考える。
- 遊びの場面を分ける。デモでは探索中、戦闘中、体力が残り少ないとき、時間が迫っているときの四つにした。
- 場面ごとにプレイヤーがその場で決めること（進む向き、撃ち続けるか退くか、急ぐかどうか）を書き出す。
- その決めごとに使う情報を選ぶ。最も強める情報を一つ、次に強める情報を一つか二つにする。
- 残りの情報は控えめにする。画面に出し続けるか要るときだけ出すかは、「HUD」と「段階的な開示」の考え方で決める。
デモの下の段は場面ごとに次のように強める。体力は最大 100 である。
- 探索中：目標を最も強める。
- 戦闘中：体力を最も強め、弾数を次に強める。
- 体力が 30 以下のとき：体力を最も強め、戦闘中なら弾数を、そうでなければ目標を次に強める。
- 残り時間が 10 秒以下のとき：時間を最も強め、戦闘中なら体力と弾数を、そうでなければ目標を次に強める。
場面が重なったときは、体力が残り少ない、時間が迫っている、戦闘中の順に最も強める情報を決める。体力が残り少なく時間も迫っているときは、時間を次に強める側に加える。スコアと所持金は遊んでいるあいだの判断には使わないので、どの場面でも控えめにしている。面を終えた後の結果の画面では、反対にスコアを最も強める。
優先度を一度だけ決めて固定すると、場面が変わっても強める情報は変わらない。デモの「下の段の優先度」を「いつも同じ」にすると、下の段は戦闘に合わせて決めた優先度のままになる。探索中も目標は控えめなままで、時間が迫っても時間は体力より弱いままになる。
目立たせる手段
差を付ける手段には次のものがある。
- 大きさ：大きい文字や表示ほど先に目に入る。デモの下の段は既定で、最も強める値を控えめな値の 2 倍、次に強める値を 1.4 倍の大きさにしている。
- 位置：強める情報は読み始める左上や、画面の中央に近い所に置く。戦っているあいだはキャラクターの近くに出すと、目を大きく動かさずに読める。控えめにする情報は隅に寄せる。
- 色と太さ：背景との明るさの差が大きいほど、色が鮮やかなほど、字が太いほど目を引く。控えめにする情報は灰色に近づけ、細い字にする。
- 形：数字に棒を添えると、値を読まなくても残りの量が長さでわかる。危ない状態には印を付ける。
- 動き：動くものは見ている所から離れていても目に入る。目を引く力が強いので、危険を知らせるときだけに使う。
- 余白：周りを空けた情報や、関係のある情報どうしをまとめた塊は、ほかの情報と混ざらずに目に入る。
大きさの差は最も強める値を控えめな値の 1.5〜2 倍ほどから試す。デモの「最も強める値の大きさ」は 1〜2.5 倍の範囲で変えられ、1 倍（差なし）にすると大きさでは差が付かない。さらに「位置」「色と太さ」「形と印」「動き」をすべて切ると、下の段は上の段と同じ画面になる。そこから手段を一つずつ入れていくと、それぞれでどれだけ目に入りやすくなるかを比べられる。
場面が変わるときの置き場所
場面が変わるたびに情報の置き場所を動かすと、プレイヤーは表示を探し直すことになる。同じ情報がいつも同じ所にあれば、何度か遊ぶうちに探さずにそこへ目を向けられるようになる。そこで、置き場所は情報ごとに一度決めて固定する。場面で変えるのは大きさ、色、形、動きにする。デモの下の段も体力と弾数を左上、時間と目標を上の中央、スコアと所持金を右上に置いたままで、場面ごとに大きさや色を変えている。
全部を目立たせたとき
目立つかどうかはその情報だけでは決まらず、周りの情報との差で決まる。全部の情報を大きく、鮮やかな色で出すと差がなくなり、上の段と同じく一つずつ読むことになる。デモの「下の段の優先度」を「全部を強める」にすると、下の段はどの情報も同じように強められ、どれが大事かを見分けられなくなる。強める情報を増やしたくなったら、代わりにほかの情報を控えめにする。
点滅や揺れで強めすぎたとき
点滅や揺れ、脈打つ動きは目を引く力が強い。いつも動かしていると、注意がそこに取られ続ける。ほかの表示やゲームの画面そのものを見る妨げになり、目も疲れる。動きは危険を知らせるときだけに使い、状態が戻ったら止める。デモの下の段は体力が残り少ないときと時間が迫っているときだけ、その表示を 1 秒に 1 回、1 割ほど大きくしてから戻す。
点滅は光に敏感な人の発作を引き起こすおそれがある。点滅させるときは 1 秒に 3 回を超えないようにし、画面の広い範囲を明滅させない。デモの動きは大きさだけを変え、明るさは変えていない。端末で動きを減らす設定が有効なときは、動きを切るか弱めて始める。デモもその設定が有効なときは「動き」を切って始める。
色の見え方の違いへの配慮
色の見え方は人によって違い、赤と緑、赤と橙のように区別しにくい組み合わせがある。強めることや危ないことを色だけで示すと、そうした人には違いが伝わらない。色を変えるときは、色のほかにも大きさ、印、文字などの違いを付ける。デモの下の段は体力が残り少ないとき、体力の表示を赤くするのに加えて最も大きくし、感嘆符の印を付けている。「色と太さ」を切っても、体力が危ないことは大きさと印で見分けられる。
控えめにする情報も背景との明るさの差は残す。控えめにするのは目を引く強さで、読めなくしてよいわけではない。デモの下の段も控えめにした文字は灰色にしているが、幅 360px の画面でも 11px より小さくしていない。