こんにちは、ふみやです。webクリエイターをしています。
本記事にたどり着いた人はこんなお悩みをお持ちかと思います。
・なぜその配置にするのかを詳しく知りたい
・クライアントや上司にその配置の根拠を伝えたい
今回はこんなお悩みを解決していきます。
思い当たる方は、ぜひどうぞ。
進むボタンは右に配置しよう
結論として、進むボタンは右に配置しましょう。
理由は「視線解析」という心理学から説明できます。
まず例をあげますね。
人間は嘘をつくときに右を見る
人間は嘘をつくときに右の方向を向いてしまいます。
実はこれが「進むボタンを右に配置する」理由です。
詳しく掘り下げていきます。
例えば、女性が男性に「昨日の夜は誰と何してたの？」と聞きます。
「えーと、友達のA君とご飯にいっていたよ」
このときの視線の方向は左側にあります。
逆に、いかがわしいことがある男性は、嘘をいっているので未来のことを考えます。
このときの視線の方向は右側にあります。
未来の出来事では「右方向」に視線がいくのです。
これはWebサイトの配置にも応用できるのが面白いところですね。
Webサイトでは進むときは右で戻るときは左のイメージがあります。
これは実際のGoogleブラウザの戻るボタンと進む(次へ)ボタンです。
戻るボタンが左にあり、進む(次へ)ボタンは右にあることがわかります。
人によっては深く考えたことはないかもですが、この配置で違和感はなし。
潜在的に人間には戻る場合は左、進む場合は右とプログラミングされているのです。
ここで一旦まとめます。
- 視線と心理は深く関連しあっている
- 視線が右の場合は過去、左の場合は未来を考えている
- この視線解析はwebサイトでも応用がきく
Webサイトで応用がきくデザイン一覧
この視線解析で応用できるデザインは下記の通りです。
- アクションボタン
- スライダー
- フローコンテンツ
アクションボタン
×のデザインですが、感覚的に違和感があります。
送信するつもりで右側のボタンを押したら戻るボタンだった…なんてことに繋がりユーザとしては最悪です。
戻る場合は右、送信する場合は左にして、違和感なくユーザを誘導しましょう。
スライダー
スライダーの場合も当てはまります。
左ボタンは画像が戻ってくる、右ボタンは画像が進むのが自然です。もし、進む方向を逆にした場合は違和感が起こりユーザは迷う可能性があるので気をつけましょう。
フローコンテンツ
フローコンテンツには進む方向を左から右にしましょう。
ただちょっとこれは当たり前ですね。
デザイン一覧は以上です。
- アクションボタンの進むボタンは右に配置
- スライダーは右に進むように
- フローなど時系列を表すものは左から右に
まとめ：視線解析はユーザを迷わせないために積極的に使いましょう
以上が進むボタンはどっちに配置するかでした。
- 視線と心理は深く関連しあっている
- 視線が右の場合は過去、左の場合は未来を考えている
- この視線解析はwebサイトでも応用がきく
この3点を意識してボタン以外にも積極的に活用していきましょう。
というわけで今日は以上です。
読んで頂きありがとうございます。
こんにちは、ふみやです。webクリエイターをしています。本記事にたどり着いた人はこんなお悩みをお持ちかと思います。・Webデザインを勉強したくても方法がわからない今回はこんなお悩みを解決していきま[…]