モバイルナビゲーション、タブバーに関する3つの創造的なアイデア

著者：　Nick Babich
Editor-in-chief of UX Planet (https://uxplanet.org). http://babich.biz
こちらは、UX Planetから許可をいただいて翻訳・掲載している記事・画像です。3 Creative Concepts of Mobile Tab Bar Navigation

トップ画像：　タブバーvs.ドロワーメニュー（ハンバーガーメニュー）　画像：Google

 
主なモバイルナビゲーションパターンを選択する場合、プロダクトデザイナーが選択するのは、通常ドロワーメニュー（ハンバーガーメニューとも呼ばれる）か、またはタブバーになります。これらのナビゲーションパターンにはそれぞれ長所と短所があります。
 
このコラムではタブバーについて取り上げます。まずはタブバーの長所からご紹介していきましょう。

• ユーザーの現在地を可視化する：タブバーがあれば、自分が今、アプリケーションのどこにいるのかを知るためにハンバーガーメニューをタップするなど必要ありません。一目瞭然だからです。
• 発見が容易：ユーザーは開始直後から、すべての上位ナビゲーションを参照できます。
• 親指に優しい：タブバーは親指が簡単に届く範囲にあります（スクリーン下部）。そのため、特定のオプションをタッチするために親指を伸ばす必要がありません。

 
一方で、タブバーには短所もいくつか存在します。

• ナビゲーションオプション数が限定される：タッチする部分が小さくなりすぎないようにするため、設置可能なタブバー上のナビゲーションオプションは5～７つと限定されています。
• タブバーが画面の一部を占有：優れたナビゲーション機能をもつタブバーは、常に表示されています。よって、貴重な画面の一部を占有している状態となります。

 
このコラムでは、タブバーナビゲーションに関する3つの興味深いアイデアを紹介します。また、皆さんがご自分のプロジェクトでこれらのコンセプトを活用できるよう、ソースコードへのリンクも提供しています。
 

1.ネスト化されたナビゲーションオプション

すでに述べたように、タブバーが持つ非常に不都合な点は、表示できるオプション数が限定されることが挙げられます。モバイル上では、最大7つの上位ナビゲーションを設置することが可能です。ナビゲーションオプション数の制限はほとんどのモバイルアプリでは問題になりませんが、アプリによっては、さらに多くのオプション表示を必要とする場合もあります。
 
以下をご覧ください。これはオプション数の制限問題を解決するためのアイデアです。ユーザーがフォルダアイコンをタップすると、同じスペースにいくつかのオプションが追加表示されます。フォルダアイコン（他3つのオプションの親としての役割）は他よりサイズが大きいため、他のオプションとは異なることが分かります。
 
長所：同じスペースでより多くのオプション表示が可能。
短所：

• アニメーション効果にはさらに開発時間が必要となる可能性がある。
• 高いインタラクションコスト。ネスト化されたオプションを選択するためには、さらにタップが必要。

 

画像提供：Hoang Nguyen
 

2.タブバーとアクティブなタブボタンを分離する

タブバーには通常、使用頻度の高いのビゲーションオプションが表示されています。そこから各オプションがそれぞれ別のデスティネーションへとユーザーを導く役割を担っているのです。以下に示すアイデアは、ユーザーが選択したオプションとタブバーを視覚的に分離して示すようにしたものです。
 
Ketan（アニメーションの作者）はアニメ化されたバーのソースコードを提供しています（React Native Tabbar Interaction）。また、このようなバーの作成方法についても自身のコラムFAB Tabbar - Concept to Realityで詳しく説明しています。

• 長所：視覚的な変化により、ソースとデスティネーションが明確に区別される。
• 短所：アニメーションがやや遅く感じられる。アプリを利用するため複数のタブを繰り返し切り替える必要がある場合には、ユーザーに苛立ちを与えてしまう。

 

画像提供：Ketan
 

3.タップ時のアニメーション効果

第一印象でユーザーの心をつかむことは、モバイル開発者が目指す最重要課題です。平均的なアプリはインストール直後に80%のユーザーを失うという事実があります。この割合を軽減するには、「いかに第一印象をよくするか」が効果的です。
 
ユーザーを失わないためには、「記憶に残る体験を生み出すこと」が一つの方法として存在します。私たちはデジタルプロダクトを扱う際、インタラクションのプロセスすべてを記憶するのではなく、特定の細部のみを記憶します。細部とは、ユーモラスなキャラクターや鮮烈な色、あるいはよくできたアニメーションのようにシンプルなものです。よって、多くのデザイナーが次のことを強調しています。
“細部は細部ではない。細部こそがデザインを形作る（Charles Eames）”
 
以下のアイデアで使用されているスムーズなアニメーション効果は、記憶に残るファーストタイム・エクスペリエンスを生み出します。また、Ramotion（このアイデアの作者）はアニメーションのソースコードも提供しています。

• 長所：アニメーション効果によって、ユーザーによい第一印象を与える。
• 短所：使用頻度の高いユーザーにとっては、アニメーション効果が煩わしく感じることがある。アプリを操作するたびに、同じ効果を目にするユーザーの感情を考慮する必要がある。

 

画像提供：Ramotion
 
 
＿＿＿＿＿＿＿＿＿＿＿＿