スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。
また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。
親指はマウスの代わり
デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。
しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。この領域は、スマートフォンの画面のサイズと、左右どちらの手で持つのかによって変わるでしょう。
（平均的な手の大きさと握り方に準じています）
メニューを届きにくいエリアに配置すると、親指を近くに移動させるためにスマートフォンを握りなおす必要が生じます。あるいは、もう片方の手を使って操作しなくてはなりません。こういった無駄な動作のせいで、ナビゲーションが操作しにくくなり、タスクが遅れるのです。
画面の大きい携帯か、画面の小さい携帯か
大きい画面のスマートフォンを選ぶユーザーが増えるにつれて、画面の上部はますます指が届きにくい場所になっています。
５インチ以上ある画面の大きいスマートフォンは、それ以下の小さいものに比べ、画面上部に指が届きにくいです。
（平均的な手の大きさと握り方に準じています）
加えて、大きい画面のスマートフォンは、親指と逆の端にも指が届きにくいです。ユーザーがどちらの手で握るかによって、届かない領域が左端なのか右端なのかは変わります。
左手でスマートフォンを持てば、親指は右下に届きにくくなります。同様に、右手でスマートフォンを持てば、左下に親指が届きにくくなるでしょう。
一方、画面の小さいスマートフォンであれば画面下部の端にも十分親指が届きます。
親指の届きやすさの法則
デザイナーは、ユーザーにスマートフォンの握り方を変えさせることはできません。しかし、ナビゲーションメニューの配置場所であれば変えることができます。ほとんどのデザイナーはナビゲーションメニューを画面上に置きます。デスクトップではそれが通例ですが、モバイルではこの慣習をそのまま適用することはできません。
画面の上端は、親指がもっとも届きにくい領域です。メニューを上部に置くと、ユーザーはインターフェイスの操作が困難になります。ユーザーはメニューをきわめて頻繁に使用します。そのため、親指の届く範囲にメニューを設置することは不可欠です。そうすれば、ユーザーはタスクを速く完了することができるでしょう。
調査によれば、「メニューが親指が簡単に届く場所にあると、操作が速く、快適に感じる」そうです。つまり、ターゲットが親指に近ければ近いほど、タッチするまでの時間は短くなるのです。親指が一番届きやすいエリアは、画面の下端です。よって、モバイルのメニューは画面下に設置しなければなりません。
メニューを下部に置くことで、ユーザーがハンバーガーアイコンをタップし、選択肢を選ぶ時間が速くなります。一方でメニューを上部に置くと、ユーザーは携帯を握りなおすか、もう片方の手を使わなければなりません。そのためには身体を動かす必要があり、結果的にタスクの完了時間が遅くなってしまいます。
下部のハンバーガーアイコンをタップすると、メニューは画面の下側から出現します。このとき、メニューの下部にある選択肢は親指から届きやすいですが、上部の選択肢は親指の届く範囲外にあります。
従来のメニューでは、優先度の高い選択肢は画面の上部に配置していました。しかし、下部のメニューでは、優先されるべき選択肢は画面の下に置きましょう。それによってユーザーは、重要な選択肢を瞬時にタップすることができます。新しいメニューでは、もっとも優先順位の低いものが画面の上端に置かれ、もっとも高いものが下端に置かれるようになります。
親指にとってのスイートスポット
ユーザーが携帯を握る手は好みによって異なります。では、メニューボタンをどちらの側に置くべきでしょうか？ 前出の調査では、「ほとんど親指の第二間接を動かすだけでタップできるスイートスポット」が見つかりました。言い換えれば、スイートスポットは、ユーザーが親指を伸ばしたり曲げたりすることなく届く場所です。
メニューを設置すべき理想の場所は、スマートフォンの下端の中心です。この場所は、スマートフォンの大小にかかわらず、どちらの指でも一番届きやすい領域です。
このスイートスポットは、特に大きい画面のスマートフォンを利用するユーザーに効果的でしょう。画面が小さい場合、ユーザーは画面のどちらの端にも指が届くからです。それでも、端をタップするためには、ユーザーは親指を伸ばしたり曲げたりする必要があるかもしれません。
大きい画面の携帯が流行している中、親指のスイートスポットを考慮に入れることはより大切になります。理想的には、ユーザーが親指をなるべく動かさずにインターネットを操作できるべきです。このような力学的に効率が良いデザインは、ユーザーがタスクを達成するのを早めるでしょう。
よくある批判に対する答え
従来の習慣から外れた新しい提案は、つねに批判されるものです。モバイルメニューを画面下に表示するのは標準的ではありません。しかし、ユーザーがモバイルデバイスを使う方法として理想的な基準です。
画面上のモバイルメニューが使いにくいのは明らかです。では、この新しい提案に従うことに、欠点や不利益は存在するのでしょうか？ 考えられる批判に答えてみましょう。
メニューを見落とす
モバイルメニューが下にあると、ナビゲーションが上にあることに慣れたユーザーは、メニューを見落としてしまう
確かにユーザーは、ナビゲーションバーが上部にあることに慣れています。しかしユーザーは、メニューが下部に配置されたモバイルアプリやデバイスも、今までに見たことがあるはずです。モバイルユーザーにとって、下部のナビゲーションは決して異常ではありません。
一方で、デスクトップインターフェイスでは、画面下のナビゲーションは異常です。スクリーンのサイズがはるかに大きいデスクトップでは、画面下のナビゲーションは見落とされやすくなります。デスクトップでは、画面を一度にすべて見ることは難しいでしょう。
モバイルは画面が小さいため、下部ナビゲーションを簡単に見つけられます。画面全体を視界に収めることができ、ユーザーがナビゲーションバーを探し当てやすいのです。
操作の邪魔になる
画面下のナビゲーションは、同じく下部にあるブラウザコントロールの邪魔になってしまう。ユーザーが間違えてメニューボタンではなくブラウザボタンを押しかねない
ネイティブアプリのナビゲーションが、画面下にあるブラウザコントロールの邪魔になることはありません。とは言え、私が提案したWebアプリのナビゲーションの下に、ブラウザコントロールが表示されているのは事実です。
ユーザーが誤ってブラウザボタンを押してしまう可能性はあるでしょう。しかしそれは、押したいボタンの隣にあるボタンを間違えて押してしまうことと何の変わりもありません。
２つのボタンが隣接していると、ユーザーエラーの可能性はつねにあります。だからといって、ボタンを隣り合わせに置くデザインを避けなければならないわけではありません。そのようなミスを防ぐために、ボタンの間に余白を取ればいいのです。
画面下のナビゲーションバーについても同じことが言えます。分離されているのが視覚的にわかりやすいよう、メニューアイコンとブラウザバーの間に余白を取りましょう。これによって押し間違いを防ぐことができます。
スクロールの邪魔になる
ユーザーは下から上にスワイプするため、スクロールの邪魔になる。また、コンテンツを見ているユーザーの気が散ってしまう
ユーザーが親指を使ってスクロールするとき、彼らの親指は画面下に近づきます。よって、ページを下から上にスクロールする際に、ナビゲーションバーを押してしまうかもしれません。また、バーがコンテンツを見ているユーザーの気を散らす可能性もあります。
この問題は２つとも、スクロールアップバーを使うことで解決できます。スクロールアップバーとは、ユーザーがスクロールダウンするときにはナビゲーションバーが隠れるものです。バーは、ユーザーがスクロールアップするときにだけ現れます。この技術は、モバイルアプリやブラウザですでに広く取り入れられています。
CTAの邪魔になる
ナビゲーションバーより優先順位の高い、ランディングページのCTAボタンの邪魔になってしまう。
重要なCTAも親指の届く範囲に置かれるべきです。しかし、ナビゲーションバーかCTAかという二択を選ぶ必要はありません。スクロールアップバーを使えば、どちらも問題なく画面下に置くことができます。
スクロールアップバーを使用しないのであれば、達成したい目標を検討しましょう。エンゲージメントを高めることが目標であれば、メニューを親指の届く範囲に置くべきです。他方、ランディングページでの会話を増やすことが目標であれば、CTAボタンを親指の届く範囲に置いてください。
親指の動きに合ったメニューの形
画面下のメニューは、見慣れた画面上のメニューと比べると、異例に見えるかもしれません。しかし、画面上のメニューは、モバイルデバイスを操作するユーザーの親指の動きを無視しています。
親指は、モバイルデバイスを操作する際にもっとも使用される指です。よってメニューフォームは、親指の動きに合わせる必要があります。この原理をないがしろにすると、使いづらいメニューをデザインすることになるでしょう。使いづらいメニューは、ユーザーのエンゲージメントと満足度を低下させます。
UXデザイナーの目標は、モバイルナビゲーションを可能な限り素早くスムーズなものにすることです。親指の届きやすさの法則に従うことで、ユーザーはタスクを素早く簡単に達成できるようになります。このように単純なデザインの変更によって、親指が届きにくいという障害を取り除きましょう。
