モバイルアプリにおけるメニューのベストポジションを考えてみよう

モバイルアプリのデザインを考えるとき、「見た目のよさ」だけに注力すると失敗してしまうでしょう。

もちろん見栄えの良さは考慮するべきですが、UXとエンゲージメントを高めることこそが、デザイナーの役割であるといっても過言ではありません。

特にモバイルアプリの場合は*「どこにメニューを置くべきか」*という問題があります。
小さな画面でも押しやすく、したい動作をスムーズに行えるメニューの設計を考えなければいけません。

今回は、*「モバイルアプリにおけるメニューのベストポジション」*を考え、その場所のメニューに関する具体的なTipsをご紹介します。
たかがボタンの位置だと侮ってはいけません。

操作しやすいアプリにするために、今できることを考えてみましょう。

スマートフォンにおける親指＝パソコンにおけるマウス？

※ Source: pexels.com (free stock)

まず、「モバイルアプリにおけるメニューのベストポジション」を考える際に、スマートフォンとパソコンはそもそも操作方法が違う、という当たり前にも思える前提について考えてみましょう。

パソコンであれば、例えば1260x840pxの画面の自由な場所にマウスカーソルを動かすことができるでしょう。

パソコンでモバイルアプリケーションを設計していると忘れがちになってしまうのですが、スマートフォンではそうした縦横無尽さは通用しません。
近年のスマートフォンは以前に比べても比較的大きくなりつつあります。

片手でスマートフォンを操作する際、現在主流のサイズ(特に5インチ以上のサイズ)では親指を伸ばすのに苦労してしまいます。

そのように考えると、親指の届く範囲にナビゲーションメニューを置くのがモバイルアプリケーションのベストポジションを決める上で重要だということになります。

「サミングスポット」からナビゲーションを設計しよう

▲ Source: UXMatters

この「親指の届く範囲」のことを*「サミングスポット」と呼ぶことがあります
特に左親指でも右親指でも共通して届く場所のことを「スイートスポット」*と呼ぶことがあります(※)。
このスイートスポットは、親指を無理に伸ばさなくとも届く範囲です。

※ 参考論文：
Understanding Single-Handed Mobile Device Interaction / University of Maryland

つまり、「モバイルアプリにおけるメニューのベストポジション」とは、*「スイートスポット」*に他なりません。

最も有効な場所はボトムメニューの中央位置ですが、ボトムナビゲーションであれば左右どちらの親指であっても届くので、アプリケーションにとって重要なメニューはボトム位置に設置するのが賢明です。

小さなスマートフォンであればだいたいの範囲に手が届くので、「スイートスポット」は比較的大きいスマートフォンのユーザーのUXを考えたときには考慮に入れておくべきでしょう。

また、ユーザーが大人の男性の場合には比較的親指が大きいことが想定されますが、指が小さな子どもが操作しても届きそうな範囲にナビゲーションを設置するのが重要です。

ボトムメニューの形

一言で「ボトムメニューを置く」といっても、実はいろいろな形があります。ボトムメニューの基本的な形について考えてみましょう。

1. ボトムタブ (iOS)

self-screenshot on April 3rd

iOSアプリでよく見られる形ですが、最も基本的なボトムメニューの形は*「ボトムタブ」*と呼ばれるタブ形式のメニューです。
例えば、Facebookアプリであれば「ニュースフィード」「友達リクエスト」「通知」といったさまざまなメニューをワンタップで切り替えることができます。

しかし、ボトムタブに設置できるのは、多くとも5つです。
それ以上のメニューの設置は、アイコンのサイズが小さすぎてユーザビリティの低下を招いてしまいます。
Facebookアプリのようにそのほかのメニューを開く場合に一番右にハンバーガーメニュー＋右ドロワーを設置するのも一つの方法でしょう。

2. FAB (Android)

▲ Source: Google

*「FAB(Floating Action Button)」*はAndroidにおけるマテリアルデザインパーツのことで、右下に設置された「＋」マークや「☆」マークなどの丸いボタンのことです。
その名の通り、「浮いている」アクションボタンで、親指で押しやすい位置にあるのが特徴です。

ボタンを押すことで、縦に実行可能なメニューが並びますが、あくまでも親指で押しやすい位置にあることがポイントです。
tumblrアプリのFABのように、親指の伸ばしやすい位置に弧を描くように配置しているのもユーザビリティ向上の工夫と言えるでしょう。

プロトタイピング時に気をつけておきたいこと

Adobe XDやProttなどのプロトタイピングツールはどうしてもパソコンでレイアウトを考えるので、親指での使い勝手に関しては忘れてしまいがちです。
多くのユーザーが親指をマウスがわりに使っていることを考慮すると、以下の点に気をつけておきたいものです。

1. どのボタンをどの指で操作するかを考える

ボタンを設置する際に、デザイン面やユーザーインタラクションにばかり目が行きがちですが、そのボタンの設置場所に関しても、本当にそこでいいのか、そこがベストポジションなのかを考えてみましょう。

もちろん、左手で握って、右手のあらゆる指を使って操作する場面もありますが、ほとんどの場合は親指のみの操作になっているはずです。
ですので、モバイルアプリケーションにおけるメニューは最低限サミングスポットに置いておきたいものです。

2. スクロールするとボトムタブが隠れる挙動を取り入れる

ボトムタブは、親指で押しやすい位置にあるため便利ではあるのですが、画面を占有してしまうというデメリットもあります。
特に、5インチ以下の小さいサイズ(iPhone5やiPhone SEなど)でアプリを開くと、フィードなどの閲覧したい情報を表示するエリアが狭まって見にくくなってしまいます。

FacebookアプリやSafariなどをはじめとして、多くのアプリでは、下スクロールをしてコンテンツを閲覧している最中は、ボトムタブが隠れる挙動を取り入れています。
ボトムタブを表示したい場合には、逆側に少しだけスクロールすれば、ひょっこりと現れます。

このようにすれば、小さい画面サイズのアプリでもコンテンツの閲覧に集中することができるので、結果的にUXが向上します。

3. 左上ハンバーガーメニュー＋左ドロワーは絶対に避ける

最も避けたいデザインは、左上にハンバーガーメニューボタンを置いて、それを押すと左からドロワーメニューが表示されるようなデザインです。

これはそもそも左上にハンバーガーメニューボタンがあるということは、右利きの親指を使っているユーザーに届きにくい位置にあるので、押しにくい上に、左からのドロワーメニューも扱いづらいという欠点があるからです。

ハンバーガーメニューを設置したい場合には、アプリ画面上側ではなく下側に置くほうがユーザーのためになります。
左利きのユーザーのことも考えれば、実はボトムメニューの真ん中にハンバーガーメニューを置くのがベストですが、それに違和感がある場合でも下側に置いたほうがよいでしょう。

まとめ

モバイルアプリケーションにおけるメニューに関しては、セグメントコントロールや上方タブは、親指に遠い位置にあれば「本当にユーザーにとって使いやすい位置にあるのか」を考え直したほうがよいでしょう。

もちろん、モバイルにおける画面の大きさは限られているので、上方にボタンを置かざるを得ないということもあるでしょう。
その際には、ボタンの大きさをやや大きめにするなど、親指でも押しやすい工夫をするとユーザビリティの低下を招かずに済むかもしれません。