見出し画像

スマホのメニューボタン、上に置くか?下に置くか?

時代と共にスマホが縦長になっていく昨今。それに伴い画面上部にあるメニューボタンが、タップでよく使う親指から遠のいていきます。
この状況について言及している記事があります。

画面の上端は、親指がもっとも届きにくい領域です。メニューを上部に置くと、ユーザーはインターフェイスの操作が困難になります。ユーザーはメニューをきわめて頻繁に使用します。そのため、親指の届く範囲にメニューを設置することは不可欠です。
(引用:モバイルではメニューを画面下に表示すべき理由)

私の場合、親指でタップするのでメニューボタンが下にあると便利だと思いました。しかし下記2点のように感じる人もいるのか気になりました。

・アプリで下にメニューボタンがあることは見慣れているが、WEBでは見慣れない
・アプリのように下にアイコンが並んでいたら認識しやすいが、ハンバーガーアイコンのみは見慣れない

冒頭で引用させていただいた記事の転載元は海外ということもあり、日本でも同様の考えでいいかどうか迷っていました。
この時、私はちょうど自社サイトのスマホページを作っていましたので「ついでだしプロトタイプ作って周りの人に聞いてみよう」と思い、社内で調査することにしました。


調査方法
調査したUIパターン:
2パターンのUIを操作してもらいました。

・Aパターン
メニューボタンが「上」にあるUI

・ Bパターン
メニューボタンが「下」にあるUI

画像1


(今回の記事用に作成したラフのイメージ図です)

聞いた人数:
女性6名(20代3名/ 30代2名 / 40代1名 )
男性5名(20代1名/ 30代4名)
計11名

聞いた人の職業:
IT関係(デザイナー、エンジニア、など)

お願いしたタスク:
・一旦、適当にスクロールしてもらう(普段通りの気分に少しでも近づくように)
・メニューボタンをタップしてもらう
・メニューボタンを閉じてもらう

結論

A派→5名
<内訳>
女性4名(20代1名/ 30代2名 / 40代1名 )
男性1名 (20代1名 )

B派→ 6名
<内訳>
女性2名(20代1名/ 30代1名 )
男性4名 (20代1名 / 30代3名 )

聞いた人の意見
A派の意見:
・左手でスマホを持って、右手人差し指で押すからAでいい。上にメニューある方が見慣れてるし。
・Bは見慣れないから少し戸惑った。アプリのようにアイコンで並んでくれたら分かりやすかったかも。

B派の意見:
・ 親指近くて押しやすい。
・ アプリなどは下にメニューがあるから見慣れている。


男性と女性で反応が違った理由を考える

手の大きさが女性と男性で違うからではないかと考えました。

男性は手が大きいので、ほとんどの方がスマホを片手で持っていました。そのため親指とメニューボタン近いためメリットが大きいです。

女性の場合、男性より手が小さいため今のスマホは結構大きいようです。 そのためほとんどの方が左手でスマホを持ち、右手の人差し指でタップしていました。その場合、 メニューボタンが下にあるメリットが小さいようです。

冒頭で紹介した記事内では「ユーザーは親指でタップする」前提で述べられていました。しかし調査の結果、人差し指でタップするユーザーも結構いるかもしれないと思いました。
このようなデータもあります↓

10・20代:49.2%が「片手で操作」
30代:38.3%が「片手で操作」
40代:30.7%が「片手で操作」
50代:23.8%が「片手で操作」
(引用:【ユーザー調査】スマホの操作、10代20代の●●%が「片手」)

両手で操作している人が多い=人差し指でタップしている人も多い。と考えると、メニューボタンは別に下に置かなくてもいいのでは、という考えもあります。
しかし「メニューボタンが下にあるUIがWEBでも一般化されて見慣れてしまえば、親指タップ派と人差し指タップ派、どちらにも押しやすいのでは」とも考えられます。より多くの人に使いやすいUIの方が理想的といえるでしょう。


実際に、WEBでメニューボタンを下に設置しているサイトはあるか

ありました。

株式会社アイレップ
https://www.irep.co.jp/

私が作ったプロトタイプ(Bパターン)のメニューボタンの位置とはやや違いますが、こちらの方が押しやすいと感じました。


まとめ

調査した人がたった11名であり、そのうえ同業種の人たちなので偏った調査かもしれません。ですが気付きの多い調査でした。「ターゲットはスマホを両手or片手、どちらで操作するか」という判断軸でメニューボタンの位置を決めるのもいいかもしれません。


※恥ずかしながら弊社ではユーザーテストの文化がまだ無いので、参考記事を読んで見よう見まねで行いました。なので調査方法に間違いやお気づきの点がありましたらご指摘いただけますと嬉しいです!

この記事が気に入ったらサポートをしてみませんか?