UIデザインで気を付けること

最近UIについて学ぶことが多かったので、

備忘録として書いていこうかなと思います＾＾

UIとは？

そもそもUIとはなんぞや？

と知らない方もいるかと思います。

UIとは『ユーザーインターフェース』頭文字をとった言葉です。

ユーザーインターフェースとは、デバイスとそれを使用する人間(ユーザー)を結びつける役割のことです。

操作手順が複雑だったりすると、“UIが使いづらい”などと表現します。

UIデザインを考える上でのポイント

最近学んだ、UIデザインを考える上でのポイントを上げていきたいと思います。

サイト画面の中央ではなく、周辺に配置するものでそのページやサイト自体の狙いを明確に伝えられるようにする。

これはなぜかというと、人は中心視野と周辺視野という二つの視野を使っています。

基本は中心視野で注目してページを見ていますが、

その間もずっと周辺視野は無意識に使われていて、ページの概要をつかもうとしているのだそうです。

なので、注目して見てもらいたい所だけではなく、

ページの周り部分もしっかり考えることが大切になってきます。

ページの特定部分に注目してもらいたい場合、その周りに点滅するものや動画を置かない

人は点滅するものや動くものに引かれます。

なので、注目してもらいたい部分の周りには点滅する広告や動画などは置かないようにするべきです。

ページにある画像の人物の目線をユーザーは見る

サイトページの中で、人物画像を使用することってよくあると思います。

これを有効的に使用する方法として、

見てもらいたいもの(例えばボタン)があった時に、そのもの(ボタン)に目線を送っている人物画像を近くに置くとよいという手法があります。

人は、人物の目線をたどってその目線の先を見る習性があります。

なので、絶対見てもらいたいものがあったときは、

見過ごされないように人物画像を使用するものいいかと思います。

一番重要な情報は画面の3分の1までの場所か画面中央に置く

人は端を見ない傾向にあります。

ですので、できるだけ重要な情報は中央に置くようにしましょう。

画面内で『青と赤』、『緑と赤』を近くに配置しない

この２つの配色組み合わせは、とても刺激が強く返って見づらくなります。

できるだけ使くに配置しないよう。

分類する時は、できれば色ではなく線の太さで違いを表現する

これは、色覚異常の方への配慮となります。

色でものを分類していると、色覚異常の方にはほとんど同じ色に見えている可能性があります。

それでは分類した意味がありませんので、できれば色の前に線の太さなどで違いを表現してみるようにしましょう。

どうしても色で分類したい場合は、色覚異常に対応できる色の組み合わせを用いてみるのがいいかと思います。

フォントは読みやすいものにする

これは当たり前のことではあるのですが、読みにくいと正確に読んでもらえないだけでなく、もう一つデメリットがあるのです。

フォントが読みにくいと、人はそのうまくいかない感覚を文章の意味の方に転嫁してしまい、文章の内容自体が理解しにくいもの、実行しにくいものと捉えてしまう可能性があるのです。

実際はそんなことはないのですが、読みにくいというだけでそう感じてしまうのです。

ですので、フォントは読みやすいものを使用しましょう。

エックスハイトの大きなフォントを使用する

エックスハイトとは、小文字『x』の高さのことです。

このエックスハイトが大きいフォントは読みやすいので、細かいですがここも注意しましょう。

カテゴリなど項目に分ける時はできるだけ4つまでにする 

人が覚えられる数は４つまでという研究結果があります。

分ける場合は、できるだけ４つまでにしましょう。

現在位置がすぐにわかる仕組みを用意する

人は急に目の前のことから注意が離れて、別のまったく関係のないことに注意を向けることが多々あります。

また目の前に注意が戻った時に、今自分がどのページにいるのかわからなくなってしまうと、ユーザーは次のページへ移動できなくなり、無駄に手を動かしたり頭を使わなければならなくなってしまいます。

これはUIを低下させる原因となります。

できるだけ画面を見たらすぐに現在地が分かるようにしましょう。

続きは次の記事で。