ボタンはどこに配置するべきか?

pic03.jpg 

正しい配置はあるのか

「ボタンを押しますか?」「はい/いいえ」。この時、「はい」ボタンは右に置くか、左に置くか、どちらが正しいでしょうか?

画面上にボタンを置く上で正解のポジションであるんだろうか?

レイアウトをする上で、押させたいボタンを画面の上側に配置することってまずないだろう。通常は、テキストなり画面を見て、次のアクションに移るので、重要度の高いボタンは画面の下側に配置されている。これは経験的に誰もが知ってることだが、では「はい/いいえ」「OK/キャンセル」「Yes/No」という2択のボタンがある場合、どう配置するのが正しいのだろうか。右左、左右、上下?それともただの好み?
これに関しては、どの例も存在し、一定しない。

今回はボタンの配置に関して、検証してみます。ただ正解を知るだけではなく、より深い理解から、実際にレイアウトするためのヒントになるものがあるのではないかと思います。

視線解析

二択の場合、言葉の並びでいうと、ポジティブな言葉が先に来ることがほとんどです。「No/Yes」と言ったりはしない。ということは、自然に考えると「Yes」が左で「No」が右ということになる。PCのキーボードのみで操作する場合、右側のボタンの方が一回分、手間が省ける。しかし、キーボードのみで操作するユーザーが絶対多数ではないと思われる。 

人の視線解析を行うと、人は右利き、左利きに関わらず、はじめに画面左上に目をやり、右下に向かって遷移すると言われています。「Zの法則」や「Fの法則」「逆Nの法則」と言われるものです。
pic04.jpg
そのことから画面の中で情報価値の高いのは、「左上」と「右下」ということになります。これは「初頭効果」と「終末効果(親近効果)」によるものです。検証実験では被験者に物語を聞かせ、後で話の内容をヒアリングします。それによると、物語の中間部分の記憶は曖昧で、始め結末の記憶が強く残る傾向にある(Solomon Asch:1946/Norman H. Anderson/参考資料

この「初頭効果」と「終末効果」が画面レイアウトにも影響を与えます。始めに見たものと最後に見た部分の印象を強く感じるます。そのため、決定ボタンは右下に置かれるのが有効になります。 つまり、2択のボタンの場合にも
押してもらいたいボタンを右下に置くのがよいでしょう。

正解はあるのか?

このことに関してAppleとWindowsのヒューマンインタフェースガイドラインを参照すると2社の方針は異なっている。OKなどの押されたいボタンはAppleでは右に配置するのに対し、Windowsでは左に配置するとされている。

さて、どうしたものだろうか?ここで言えることは、プラットフォームに準拠するのがひとまず正解ということになるだろうか。一人のユーザーはほとんどの場合、どちらかのプラットフォームを使うことになる。どちらが正しいということよりも、ユーザーがストレスを感じないようにすることが重要になる。統一されていないUIは最も、ユーザーに認知負荷を与えてしまう。つまり慣れているプラットフォームのルールに合わせるのが良い。たかが0.1秒と言われるかもしれないが、その0.1秒は積みかさなり、確実に離脱につながる。

ボタンの配置よりも重要なのはその「一貫性」にあると考えてよい。例えば、サービス開始後、ボタンを右にした方が良かったとなり、それを改修する場合、人によっては改悪となりうるということは留意したい。これは「レガシー問題」と言われるのだが、面白いのでまたの機会にゆずる。つまり正しいばかりが答えではないということ。なので、UIの設計段階でこの設計思想をきっちりと持っておくことが重要になる。

ボタンの押しやすさ

ボタンの配置で言われていることのもう一つにボタンの押しやすさがある。この場合、PCなのか、タブレットなのか、スマホでも片手か両手か、右手か左手かなど、様々なパターンがあり一概に言えない。スマホの場合、どちらかの手でスマホを持ち、操作を行うのだが、例えば、右利きの人は左手にスマホを持ち右手で操作を行うことが多い。あるいは、電車に乗り、片手はつり皮、そして片手でスマホを操作。この場合、つり皮は利き手で持つ確率が高い。

一概に、押しやすさのみで、どちらが正しいかを判断することはできないだろう。しかし、利き腕のいかんにかかわらず、片手で操作する場合、画面上部と、左右両極は押しづらいと言える。重要なボタンを置く場合、画面に対して上下左右、広めにマージンを取るのが良いだろう。この点は留意するべきではある。
pic02.jpg

左視野重視

脳科学では左右の脳の機能的な差異により、左側の視野と右側の視野では異なった印象を与えることがわかっています。人間以外の動物などでも左視野重視の傾向が見られるそうです。

では、重要なものは全て左側に置けばよいのかというとそうではありません。左右の脳の機能的な違いが情報の受け取り方にも影響を与えており、右と左でその価値が変化します。左側がビジュアル情報につよく反応し、右側は意味情報に反応する。

例えば、人の表情などは顔の左側に注意が注がれるようです。そして、右側では文字などの意味を持つ情報に意識が注がれる。つまり、右に置くべき情報と左に置くべき情報のタイプがあるという解釈が可能になります。このことから左側よりも右側に決定を行うボタンがある方が理解されやすいこと可能性が考えられます。Talma Hendler

経験的影響

さらに、もう一歩、考えを進めると、ユーザーは経験に強い影響を受けるというのは一つの真実である。認知心理学的には先ほど説明した視線解析でのZ、F、逆Nの法則をマーケティングに利用する配置などが通例になっています。そのため、我々はそのレイアウトを経験として知っています。利き腕に関係なく、ほとんどのユーザーの視線は左上から右下に流れます。そこに「初頭効果」「終末効果」が働く。つまり、我々は右下のボタンにおのずと誘導されるわけです。結果として、視線の流れは、右下で止まり、そこに目立ったボタンがあれば押しやすいと考えられます。

例えば「この商品を購入しますか?」という確認ダイアログが立ち上がり、ボタンが「はい/いいえ」の順番で配置された場合 、視線の滞在時間は「いいえ」の方が多くなります。無意識はそれに連動するため、おのずと「いいえ」である理由を探すことになるでしょう。一画面あたりのページの滞在時間は短く、途中の情報をショートカットすることも多いため「はい」のボタンは見過ごされてしまう傾向があるのです。これはUIにとって致命的と言える問題となりえます。

結論

総合的に考えると最も、押させたいボタンは右下に置くのがベストではないでしょうか。webや様々なアプリのサービスを調べてみましたが、右下に重要なボタンを配置するレイアウトがスマホのアプリに特に顕著に現れていると思われます。やはり右下に重要なボタンを置くのが最もスタンダードと考えてよいのではないかと思います。参考になりましたでしょうか?
関連記事
スポンサーサイト

コメント

非公開コメント