普段の業務では、デザインを担当することはありませんが
簡単なワイヤーフレーム/デザインを作成することが増えてきたため
インターフェースデザインについて学んでいこうと思いました。
良いページにするためにはどうしたら良いだろうか？と考えたとき
誰もが使いやすく理解しやすい = 人に伝わるUIデザインにすることが良いのではないかと考えました。
インターフェースデザインの心理学の本を参考にしながら
心理学などの論文に基づいた、人にわかりやすく伝えるU Iデザインについて
４つのポイントを紹介しながら書いていこうと思います。
①パターンで伝える
この画像を見てください。
３つの▲が二組ある。
多くの人がこのように思ったのではないでしょうか。
次にこの画像を見てください。
色違いの▲が交互に並んでいる。
多くの人がこのように思ったのではないでしょうか。
人は、理解をするためにパターンを見つけようとします。
逆に考えると、素早く理解をさせるためには、「パターン」を利用するといいと言えます。
ワイヤーフレームを作成する前に、
関連がある内容を整理すると良いです。
関連がある内容とそれ以外を余白や色を使いパターンを作り出しましょう。
②素早く認識・識別させ伝える
次の画像を見てください。
三次元のものは、二次元の形に変換されてから脳に伝わります。
実際の物を見ている時よりも、２次元のピクチャの方が理解が早くなります。
また、実際のものを見ているより、それを想像しているときの方が理解が早くなります。
アイコンなどは、２次元のものを使用する方が
すぐに認識されます。
■ シンプルで使いやすいアイコンサイト
https://icooon-mono.com/
③ 過去の経験と予測を使って伝える
次のHPの画像を見てください。
このHPを開いたとき、一番最初に見るところはどこですか？
多くの人が記事の左上をみたかと思います。
人は過去の経験と予測に基づいて画面をみます。
両端の余白や、タイトル、画面左側のバナーエリアなどは
今関心があるものとは関係性が薄いことを知っているため
今知りたい情報が書かれているであろう場所を一番最初に注目します。
レイアウトを作成する際は、重要な項目を画面の端に置くのはやめ、中央に置くように意識しましょう。
注目してほしいことは、画面の上から１／3の場所または、中央に置くことでユーザーに読まれる可能性が高くなります。
しかしここで注意が必要です。
例えば、関係性が薄い場所に動くバナーや注目を引くような装飾がある場合は、邪魔になってしまうため避けるのがベストです。
どうしても掲載したいバナーがある場合は、画面の最下部に設置、または、ファーストビューに表示されないように設置すると良いでしょう。
④ メンタルモデルを使って伝える
特定の情報がどのあたりにあるのかを意識しながらみています。
これをメンタルモデルといいます。
ここをクリックしたら、どういう動きをするかをあらかじめ知っており、
知らない動きや、期待した物が表示されないと
人は、問題の場所に意識を集中させ、視野を狭めてしまいます。
画面では、普段読むときのパターンで移動や表示変えを行い、
大幅な移動が繰り返し行われないようにしましょう。
■まとめ
人に伝わるUIデザインのポイントを４つ紹介させていただきました。
UIやデザインを考える時には、見た目の楽しさや美しさだけではなく、
人の無意識な行動や心理的行動に着目することで、人に伝わりやすく、理解しやすいUIデザインができるのではないかと思いました。
自分が作ったUIやデザイン、実装がなんとなく使いにくい
周りからどう使っていいかわからないと言われたときは、
まず今回の４つのポイントを思い出したいと思いました。