デザイン探索2018.06.22

めせんのはなし

皆さんこんにちは。
アシスタントクリエイターの村本です。

伝わるデザインついて、瞬時に判断していくための内容を書き綴ります。
デザインや、レイアウトについて試行錯誤する際の基盤(材料)となる内容です。

今回は「Webサイトを見るときの目線の動き」について改めて考えました。

まずは自分自分が初めて訪れるサイトに対してどのような動きをしているかです。

◆自身の行動は…?
 ・まず画面左上から右下へ全体を見て、自分の欲しい情報に関する見出しがないか探す。
 ・次にナビゲーションを左から右に見て、欲しい情報がありそうなカテゴリを探す。
 ・上記の2点を確認しても欲しい情報が見当たらない、
  もしくは情報が多すぎてどれを選択してよいか分からないと探す手間を感じる。

というような流れですが、どうしてこのような動きになるのでしょうか。
以下の理由があげられます。


①目の構造
 ・人の目の視野は左右それぞれ94度、上下は上55度~下80度です。
 ・ただし、情報をつかもうと集中して見る場合の視野は極端に狭くなり、
  上下左右ともに2度程度になります。

この2度の視野で文字を追うことになるため、
目線はどうしてもライン的な動きになってしまうようです。
またこの時、集中している部分以外の内容は全て背景と化してしまいます。

②経験で見る
 ・ユーザーの情報探しは、その人これまでの経験に基づきます。
 ・何の説明がなくても、どこにどのような情報があるか、
  どこをクリックすれば欲しい情報にたどり着けるかなど、
  私たちは無意識のうちにこれまでの経験をもとに探します。
 例えば:
 ・問い合わせをする前に「よくあるご質問」のぺージが無いかを確認する。
 ・画像の横に矢印があれば、それを押してスライドさせて別の画像の情報をみる。

私もいつからこの「≡」マークがスマートフォンサイトのメニューボタンであると
認識したのでしょうか。
全く覚えていませんが、当たり前のように使っています。

-----
これらの理由を理解して、インタラクションデザインを考えることが大切ですね。

◆インタラクションデザイン
:使い方を(操作性)を自然と理解させるデザインのこと。
 ・配置されているインターフェースがどういう役割なのかを一目で理解できること。
 ・ユーザーの一連の動きに合わせたコンテンツ配置を意識すること。

優れたインタラクションデザインは、人を自然とサポートして目的まで誘導してくれます。

このブログについて

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。

デザイン探索

muramoto.yuuri