web-dev-qa-db-ja.com

モバイルデバイス用のマルチレベルナビゲーションメニュー

5レベルのナビゲーションメニューがあり、モバイルデバイスに組み込む必要があります。これには、ユーザーが5番目のレベルのメニューを表示するためのマルチクリックが不要です。

これに関するユーザビリティのアプローチを共有してください。

6
Vivek Kanna

Webサイト全体の構造を取得して、電話インターフェイスに詰め込もうとしているようです。これは、注意深く処理する必要がある困難な作業です。まず、コンテンツの構造を分析することをお勧めします。 5レベルの深いナビゲーション階層が本当に必要ですか?または、コンテンツを別の方法で整理できますか?タグまたはフィルターを使用できますか?モバイルで利用できるすべてのコンテンツが必要ですか?これらの種類の質問は、最初に重要です。

しかし、それをすべて行っても、5レベルの深いナビゲーションが私たち(ユーザーの場合と同様)に必要なものであるという結論に達した場合は、次のことをお勧めします。

個人的には、Spotifyが使用する古典的な横向きツリービューナビゲーション要素を使用します。あなたはあなたがどこにいるのか、どこに行くことができるのか、どこから来たのかを見ることができます。

Spotify navigation

5つのレベルは次のとおりです。

  1. ナビゲーション開始ボタン(3本の横線)
  2. レベル3のタイトルであるプレイリスト(赤い丸)を選択するナビゲーションメニュー
  3. レベル4のタイトルであるSynth&Technoフォルダー(青い円)を選択したプレイリスト
  4. レベル5のタイトルであるDepeche Mode-Delta Machine(緑の円)を選択するSynth&Techno
  5. レベル5の曲-それぞれ選択可能。

スクリーンショット2-4で、左の先のとがったエッジのボタンで表される、階層の上位レベルへのナビゲーションに注意してください。

5
Benny Skogberg

ネストされたメニューを横からスライドインして、ナビゲーション専用に必要なページ数を減らすことができます。

https://iTunes.Apple.com/us/app/remember-the-milk/id293561396?mt=8&ign-mpt=uo%3D4

最初の画像をご覧ください。1枚のスライドに2層のメニューがあります。類似の2層メニューを実行する他のいくつかのアプリを見たことがありますが、さらに3に(または4に?)伸ばすこともできますが、階層を減らすにはナビゲーションを再考する必要があると思います。

スクリーンショットを提供していないので誤解があるかもしれませんが、もう少しコンテキストを提供したり、アプリを構築しているドメインを教えたりできますか?

1
rk.