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

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

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

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

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

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

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

※ Source: pexels.com (free stock)

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

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

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

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

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

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

▲ Source: UXMatters

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

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

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

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

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

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