ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。
しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。
この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。
コンテンツ目次
- 1. ハンバーガーメニュー
- 2. タブメニュー
- 3. ジェスチャー型メニュー
ハンバーガーメニュー
モバイルにおけるスクリーン画面のスペースはとても貴重なため、その問題を解決するハンバーガーメニューは、もっとも人気の高いモバイル用ナビゲーションメニューのひとつです。スクリーンの左端に隠すことができる、引き出しパネル式のナビゲーションで、ユーザーがクリックした時のみ表示されます。特にユーザーの注目をメインとなるコンテンツに集めたいときに効果的なナビゲーションパターンです。
この通常の状態では、ハンバーガーメニューとすべてのコンテンツは隠された状態。
動きサンプル例
以下サンプル例では、実際のメニューはハンバーガーメニューの後ろに隠されています。
Foursquare の全バージョン。イメージクレジット: Imjabreu
メリットは？
- ナビゲーションメニューを多く設定できる。このナビゲーションメニューのメリットは、小さなスペースにかなりたくさんのナビゲーションオプションを含むことができる点でしょう。
- クリーンなデザイン。オプションでナビメニューを移動させることで、スクリーンスペースを最大化してくれます。
デメリットは?
- 隠されたナビゲーションメニューは見つけにくい。ナビゲーションが隠れているとき、ユーザーはあまりナビゲーションを利用しません。このナビゲーションパターンはスタンダードとなり、多くのモバイルユーザーが慣れてきている一方、多くの人はナビメニューを開くことを考えていません。
- プラットフォームのナビゲーションスタイルを崩してしまう。Android 携帯においてハンバーガーメニューはスタンダードとなりましたが、iOS では基本のナビメニューが崩れてしまい、やり過ぎ感が出てしまいます。
iOS アプリでハンバーガーメニューを利用しようとした様子。イメージクレジット: Imjabreu
- 開いているページが分からない。ハンバーガーメニューは一目見ただけでは、現在のロケーションが分からず、ユーザーがアイコンをクリックしたときのみ表示されます。
- ターゲットリンクへの移動に、余計な動きが必要。特定のページに移動するのに、最低でも2クリック（アイコンをクリックして、特定ページへのリンクをクリック）が必要になります。
解決方法は？
- ナビゲーションメニューの優先順位を考えよう。ナビゲーションが複雑なときは、一部を非表示にすることでモバイルフレンドリーにできるでしょう。具体的なサンプル例では、メニューオプションが表示されているほど、ユーザーの満足度が上がることを示しています。「モバイル端末で何か重要だろう？」と自分に問いかけてみましょう。その答えは、ユーザーの求めていることを理解することにあるでしょう。
- 優先順位の高いナビゲーションメニューを使うときは、タブやタブバーの利用を検討してみましょう。
YouTubeでは核となるメインコンテンツへの移動を、タップ機能で実装。機能を素早く切り替えることができます。
- コンテンツ構造を見直そう。良いサイトやアプリは、ひとつのコンセプトだけにフォーカスしています。もし複雑な機能であれば、2つのアプリに分けてシンプルな機能にしてみましょう。Facebook では、この複雑さを解決するために Messenger アプリをリリースしました。あえて機能を減らすことが、メニューオプションを減らすことにもなり、ハンバーガメニューに影響しなくなるでしょう。
タブバー
タブバー・パターンは、デスクトップから継承されたデザインです。通常、同じ重要性のページヘのリンクを含み、アプリのどこからでも直接アクセスする必要のあるページがリンクとなります。
タブバーはナビゲーションを隠さず、直接アクセスでき、関連するアイコンへのフィードバックにも◎。
実際のサンプル例
Twitter で使われているタブバーは、関連するリンクへとユーザーを直接誘導します。
iOS用の Twitter アプリ。イメージクレジット: Mashable
メリットは？
- タブバーは現在のロケーションを、簡単に伝えてくれる。アイコンやラベル、カラーなどのビジュアル・キュー（英: Visual Cue）を正しく利用することで、説明の必要がないはっきりとしたデザインに仕上げることができます。
- タブバーは常に表示されている。どのページでもナビゲーションオプションが表示されているので、ユーザーはいつでもクリックひとつで、他のページヘもアクセスできます。
デメリットは?
- ナビゲーションオプションの数が制限される。5つ以上のメニューを設定したいのであれば、タブやタブバーに配置するのが難しくなり、タッチパネル操作に最適化されたサイズを保つことも困難になるでしょう。
タブバーに5つ以上のオプションは使わないようにしましょう。
- ios と Android で異なるナビゲーションの考え方が背景に。プラットフォームごとに、UIデザインやユーザビリティーに関する、異なるルールやガイドラインを持っているため、特定のプラットフォーム用にタブバーのデザインを考えているときは、こちらも検討する必要があります。タブバーはページ上部（Android 向け）と下部（iOS 向け）に配置されます。
プラットフォームごとに適切な配置場所やデザインルールを適用することで、他のアプリとの統一性を保ち、ページを切り替えるときの混乱を避けることができます。イメージクレジット: Google
解決方法は？
- タッチターゲットを十分大きくしよう。タップまたはクリックしやすいようにターゲットを大きくしましょう。各ナビゲーションメニューの幅を計算するときは、幅を表示するメニュー数で分割しましょう。
10mm四方のターゲットだと、ほとんどのユーザーが快適にタッチすることができます。
- 利用するアイコンは、ユーザビリティーを確認しよう。つぎの5秒ルールを活用してみましょう。もし、何かのアイコンを考えるときに、5秒以上かかってしまう場合、そのアイコンはあまり効果的にメッセージを伝えることがおそらくできないでしょう。
- ラベルと一緒にアイコンはいつも使おう。文字を入力したラベルは、意味をつたえるのに必要で、あいまいさを取り除いてくれます。ユーザーがアイコンをクリックした時に、なにが起こるのか理解できるようにしましょう。
テキストラベルには、簡単で意味のある単語をナビゲーションアイコンの下に配置しましょう。
ジェスチャー型ナビゲーション
2007年6月29日、流れを一変してしまう出来事が起こります。Apple から初めてとなる、タッチスクリーン型スマートフォンが市場に公開され、今ではモバイル端末はタッチスクリーンが主流となっています。
ジェスチャー機能は、デザイナーの間ですぐに人気となり、ジェスチャーコントロールを活用してデザインされたアプリがたくさん登場しました。
今では、ジェスチャー機能がいかにうまくユーザーエクスペリエンスに導入されているかによって、モバイルアプリの成功が大きく変わってきます。
実際のサンプル例
マッチングアプリ Tiner はジェスチャー機能によって人気となったように、「左にスワイプ」、「右にスワイプ」というジェスチャーによって商品選択するようになっています。
メリットは？
- ごちゃごちゃしたUIを取り除いてくれる。デザインの核としてジェスチャー機能を利用することで、よりミニマルなインターフェースを作成でき、より価値のあるコンテンツの表示スペースを確保することができます。
- Luke Wroblewski による記事 “Natural User Interface.” では、9つの異なる国の40人のユーザーに、削除やスクロール、ズームなど28種類の異なるタスクをジェスチャーで表現するという研究が紹介されています。重要なポイントとして、異なる文化背景においても似たジェスチャーとなることです。たとえば、「削除する」ジェスチャーは、国籍に関係なくほとんどの人が、スクリーンの外にオブジェクトをドラッグしました。
デメリットは？
- ナビゲーションメニューが目に見えない。UIにおける重要なデザインルールは、目に見えている（英: Visibility）ことです。メニューなど可能な限り見えるようにすることで、見つけやすくします。見えないユーザーインターフェースは美しく魅力的ですが、同時に多くのユーザビリティーに関する問題も抱えています。ジェスチャーは常に表示されないので、はじめてのユーザーは使い方を見つける必要があります。また、ハンバーガーメニューと同様に、オプションを隠すと、ユーザーはあまり使わなくなってしまいます。
- ユーザーの操作が増える。ジェスチャーは自然な動きではでなく、覚えにくくいものがほとんです。ジェスチャー機能ナビゲーションを導入するときは、取り除くUIにいつも注意しましょう。適切なヒントなどがないことで、ユーザーはどのようにアプリを操作したらよいか迷ってしまうでしょう。
解決方法は？
インターフェースに完全に新しい方法などを実装し、ユーザーに説明する必要がないよう心がけましょう。日頃から親しんでいるユーザビリティーを大切に。ジェスチャー機能ナビゲーションをうまくデザインするには、現在モバイルで使われているジェスチャーに目を向けてみましょう。
たとえば、eメールアプリを作成する場合、多くのユーザーが慣れているジェスチャーでもある、「メール上をスワイプ」できるようにすると良いでしょう。
- アプリの使い方に関する、簡単なデモンストレーションを披露しよう。ユーザーが現在行っている行動に関する情報だけを見せるようにしましょう。たとえばゲームの進めかたを表示している様子を連想してみると分かりやすいでしょう。
Pudding Monsters ではユーザーのためにヒントを示しています。
最後に。
どのアプリにおいても、ユーザーのコンテンツへの誘導を手助けは優先事項です。ユーザーのペルソナをいつも考え、そのアプリを使うときの目標、ゴールについても考えましょう。そして、ナビゲーションメニーをうまく利用してその目標を達成しましょう。ユーザーにとって使い方が簡単なほど、より使ってもらう機会も増えるでしょう。
参照元リンク : Basic Patterns for Mobile Navigation by Nick Babich – UX Planet – Medium
