web-dev-qa-db-ja.com

トップナビゲーションはモバイルデバイスで使用できるパターンですか?

下部のナビゲーションバーは、情報階層の違反であるため、通常の慣例では最悪のUI規則の1つであることが常にわかりました。もちろん、ハンバーガーのメニューも普遍的に嫌われているので、私はそうしたくありません。

モバイルデバイスのトップナビゲーションバーはどの程度テストおよび確立されていますか?明らかに、これはデスクトップエクスペリエンスのゴールドスタンダードですが、現時点では特に電話向けに設計しています。

Types of navigation

5
JClaussFTW

ボトムナビの良し悪し

Appleが最初に登場したとき、下部ナビゲーションは素晴らしいアイデアでした。スティーブは片手での操作性にレーザー焦点を当てました。下部ナビゲーションは、モバイルが使用する場所での高速で便利なビュー切り替えに対応するように設計されましたケースはそれを要求するようでした。

Steve with the iPhone 1

残念ながら、アプリの主要な情報アーキテクチャに使用する場合、ボトムナビゲーションは階層の悪夢です。 iOSに主に精通している製品デザイナーは、与えられたものとしてより低い位置を取り始め、そこにすべてを置き始めました。 Webアプリが実行可能なモバイルソリューションになり、トップナビゲーションがシンプルなレスポンシブレイアウトの一部として引き継がれるようになると、新しいパターンが形成され始めました。

Googleのエクスペリエンス中心の組織への段階的な移行を開始します...

トップナビゲーションは理にかなっています

マテリアルデザインガイドライン を参照して、トップナビゲーションに関する十分に開発された視点を確認してください。彼らは最近、頻繁な切り替えシナリオにボトムナビゲーションを追加しましたが、MDでは少し異なります。

Android app with top tabs

Android app with top icon tabs

MDのトップナビゲーションソリューションの背後にある論理の一部は、明らかな情報階層の勝利に加えて、アクションがアプリのビューを案内するという事実です。ユーザーに強制的にタブをタップしてワークフローを手動で移動させる必要はありません。

Android intent system flow

さらに、Googleはアクティビティ中心の機能モデルを提唱しています。ビューに関係なく、またはアプリ「意図」ユーザーに必要なアプリコンポーネントを提供します

MDに最近追加された下部タブは、世界中のiOS志向の製品デザイナーに対応しただけではありません。下部のタブの使用は、手動の迅速なビューの切り替えが必要な場合に使用できます。これは、左/右スワイプ動作のガイドポストを提供するジェスチャーベースのビューで特に優れているようです(ただし、トップナビゲーションでも同じことができます)。

Material Design bottom tabs

皮肉なサイドバー

物理的なユーザビリティに関する下のナビゲーションの視点には問題があります。ユーザーは、それが大したことではないと決心しました。最近、ホットテクノロジーリストを作成している4インチフォンの数。残りの小型フォーマットフォンは、ほとんどが低予算のデバイスです。では、片手電話を使用しているユーザーは何人ですか。

片手で使用するiPhone 6以降のユーザーの場合、左下のナビゲーションを開発する必要がありますか? ????

iPhone 6+ average thumb reach

これはおそらくより現実的です...

Big iPhone being used with 2 hands

6
plainclothes

下のナビゲーションを再検討する必要があると思います。

  • 下部ナビゲーションは、モバイルアプリでは上部ナビゲーションよりもはるかに確立されており、これには十分な理由があります。
  • ほとんどの場合、私は誤った情報階層についてのあなたの主張に同意しません-コンテンツはインターフェースの主要な視覚的位置を占め、ナビゲーションはユーザーが望むコンテンツを見つけるための単なるツールです。それが配置される場所は、問題のデバイスのユーザビリティの制約によって管理されるべきです。ハンドヘルドタッチスクリーンデバイスでの主要なユーザビリティの問題の1つは、タッチして操作している間、画面を手で覆い/覆い隠すことです。下部のナビゲーションはこの問題を回避し、対話中に画面全体を表示して、与えられた即時フィードバックを確認します。また、距離があるため、電話を握っている手の親指が上のメニューよりも下のメニューにアクセスしやすくなります。
  • トップバーには確立された従来の使用法があり、これは「戻る」アクション、いくつかのコアアプリケーション機能(たとえば、Twitterで新しいツイートを作成する)、検索機能へのアクセス、またはモーダルウィンドウでの閉じるアクションなどのためのものです。
  • 多くの人がハンバーガーアイコンを嫌っていますが、一般に、ナビゲーションを表示するこの方法はモバイルでは効果的ではありません。ナビゲーションを隠すべきではないと主張する人もいますが、これはユースケースとナビゲーションのサイズによって異なります。キャンバス以外のサイドパネルにナビゲーションメニューを非表示にして、ハンバーガーアイコンの代わりに、Wordの「メニュー」などのメニューボタンを表示することができます。それはまたあなたの市場に依存します-ハンバーガーアイコンに非常に精通している市場が確かにあり、その使用はユーザビリティの問題ではありません。
  • 他のすべてのオプションには、独自のより重要な問題があります。スワイプのようなあまり確立されていないキャンバス外のメニュー操作を使用すると、その存在(その発見可能性)を示す際に問題が発生します。
4

これに対する1行の答えは、その位置を選択するユーザビリティです。

携帯電話を手に持ったとき、親指はすぐに動き、下の位置は上よりも簡単にアクセスできます。大画面デバイスの時代では、携帯電話を手に持って、上部に配置されたナビゲーションにアクセスすることは困難です。 AppleがiPhone 6+デバイスの音量ボタンの位置を変更して片手でアクセスできるようにしたのはこのためです。

それにはもっと多くの理由があるかもしれませんが、これが一番だと思います。下部のナビゲーションは上部よりも便利です。

1
DPS