目の仕組みを理解してダメなUIから脱却する方法(前編)

中心窩(ちゅうしんか)を知っていますか？

中心窩とは目の一部であり、網膜の黄斑部の中心に位置する「最も物がよく見える」部位です。

中心窩は網膜全体のうちたった1%未満の面積しかありませんが、視覚を司る視神経は中心窩由来の神経が50%を占め、最も視力に影響がある部位です。

ではなぜこのような体の仕組みが、私たちUIデザイナーの知識として必要なのか。

それは私たちが見ている映像のうち、中心窩で見ている範囲が全体のごく一部だからです。

少し長くなりますが、UIデザイナーにとって大切な事なので、詳しく説明していきます。

中心窩で見ている範囲

親指を立てた片腕を顔の前にまっすぐ伸ばして指先を見てください。その爪が中心窩で見ている範囲です。

参照：芝浦工業大学

グラフからも中心窩を0°とした場合、はっきりと見えている範囲は角度にしてたったの2°という事が分かります。

参照：コニカミノルタ

信じられない事ですが、私たちが見ている映像のうちはっきり見えている範囲はたったの1〜2cmであり、全体のうちその殆どがぼやけた世界です。

これはカートは右上に配置しないと、探すのが難しくなると書いた前回の記事にも繋がります。

では人はなぜ、液晶やカメラのように目に映る範囲すべてが高解像度のように勘違いしているのでしょうか。

それは中心窩が常に動いて焦点を合わせているのに加え、脳が経験と予測から大雑把に映像を補完しているからです。

参照：心理学の教科書・基礎からの心理学

例えば中心の文字から視線を外さずに、1番外側の文字を同じレベルで読めるようにしたい場合、そのサイズは10倍必要です。

UIデザインに活かす

人がそもそも全体をはっきり見ることができないと理解することは、UIデザインを行う上でとても重要です。

例えばお問い合わせフォームで入力ミスがあったとします。

こうした目の仕組みを理解していれば、エラーメッセージは必ずそのエラー項目の側に書く必要がある事が分かります。

なぜなら遠く離れた位置では、その存在自体に気付かない可能性が高いからです。

だとすれば、エラーチェックのタイミングも重要です。

送信ボタンを押したタイミングでは、送信ボタンの周辺しかはっきりと見えていないため、離れた場所にある項目の側にエラーメッセージを表示しても気付かない可能性があるからです。

これは人間の視力だけでなく、記憶力にも配慮しているのですが、エラーチェックは項目ごと入力完了したタイミングで行うべきです。

操作に気づかないアストラルチェイン

参照：ASTRAL CHAIN

これはアストラルチェインというNINTENDO Switch独占タイトルの人気アクションゲームにある操作チュートリアルです。

参照：ASTRAL CHAIN

ユーザーは右枠のチュートリアルを見て操作し、左枠の武器を切替えますが、モード切替というテキストから武器をイメージするのは難しく、さらに2つの距離が遠すぎるため武器の変化に気づく事ができません。

実際に攻撃をすれば武器の変化に気づく可能性はありますが、ユーザーはチュートリアルに専念しているため、そのような自由な行動は何が起きたか理解するまで行わない可能性があります。

そしてこれは、ゲームにかなり慣れている私自身が困惑した体験なのです。

人間の中心視野が驚くほど狭い事を理解していれば以下のような対応ができたはずです。
・チュートリアルの位置を変える
・操作時に左側に視線移動するきっかけを作る

周辺視野の役割

はっきりと見える中心視野がとても狭い事は分かりましたが、全てのコンテンツをそのような狭い範囲にレイアウトするのは現実的ではありません。

ではこうした目の仕組みを理解した上で、どのようにUIデザインを行えば良いのか考えていきましょう。

その鍵は周辺視野にあります。

たった0.1程度の視力しかない周辺視野ですが、実は視線誘導という大きな役割が存在します。

これはUIデザイナーである私たちが「周辺視野が認識しやすいもの」を理解し、それをわざと見せる事ができれば、視線を自由に誘導できるという事でもあります。

ここからは周辺視野のお話をしたいのですが、既に中心窩と中心視野の話だけでお腹がいっぱいの方もいるかと思いますので、周辺視野については次回続きを書きたいと思います。

フォローよろしくお願いします！

後編はこちら↓