モバイル用のハンバーガーメニューの代わりに細い左サイドバー
ユーザーが結果を絞り込むことができるモバイルフレンドリーな検索結果ページのデザインに興味があります。ハンバーガーアイコンの背後にあるオプションを非表示にする代わりに、左側のサイドバーと このDribbbleプロジェクト （下の画像）のようなフィルタリングオプションを使用することを考えています。
このタイプのナビゲーションがモバイルデバイスであまり一般的ではないのに、使いやすさの理由はありますか？デスクトップビューに同じようなメニューが常に表示されます。アイコンが付いたサイドバーは、クリックするとメニューが表示されるように展開されます。
モバイル画面の不動産は貴重です。それほど多くはありません。
「ハンバーガー」メニューの人気は、コンテンツのために可能な限り多くの不動産を保存するためです。すべてのナビゲーションは単一のアイコンに隠れています。
サイドバーのアイデアが機能しないと言っているわけではありませんが、徹底的にテストしたい問題がいくつかあります。
- コンテンツ領域の幅が恒久的に減少し、コンテンツが読みにくくなるか、表示できるコンテンツの量が減少する可能性があります。 （スクリーンショットでもかなり混雑しているように見えますが、それほど長くない名前がいくつか表示されています...）
- ナビゲーションはアイコンのみである必要があります。ラベルを貼る余地はありません。ミステリーミートナビゲーションのリスクが高い。
- 横長モードに切り替えたときに起こりうる問題-これは、画面の幅を狭くしていることを前提としています。横向きモードで画面の高さに収まらないほど多くのナビゲーションアイコンがある場合は、ナビゲーションをコンテンツと一緒にスクロールさせるか、それ自体を独立したスクロールパネルにする必要があります（これは非常に手間がかかります） ）、またはハンバーガーメニューまたは同等のものにフォールバックします。
- ユーザーが画面をスクロールしたり、コンテンツを操作したりするときに、誤ってナビゲーションリンクをクリックするのは簡単です。これは一部のユーザーに他のユーザーよりも影響を及ぼします ユーザーのデバイスの持ち方によって異なります 。したがって、さまざまなユーザーでこれをテストする必要があります。
投稿に2つの質問があるようです。
1。なぜハンバーガーアイコンがそれほど一般的であるのですか？
- 画面領域をあまり取りません
- 「ここを押してメニューを表示する」という意味で広く理解されています
- @Rosianaが言ったように、それらはグローバルナビゲーションへのリンクです（現在の画面のコンテキストには依存しません）。
2。常時表示されるサイドバーがあまり一般的ではないのはなぜですか？
- 多くの画面スペースを占めるため
- メニュー項目のアイコンがある場合、それらが何を意味するかは必ずしも明白ではありません。
- 特定のタスクのコンテキストにいる場合（ここでも@Rosianaが言っていたように）、別のタスクへのリンクに気を取られたくありません。
ハンバーガーアイコンを介してアクセスするナビゲーションバーまたはメニューには、それほど頻繁には必要ではないものの、そこにある必要があるものを含める必要があります（アプリの設定など）。
ユーザーが大量に必要とするもの（検索、チャットなど）は常に利用可能である必要がありますが、大量の画面スペースを占有しないでください。
タスクにワークフローが含まれている場合（人を見つける、チャットを開くなど）、ユーザーはメニューを参照するのではなく、画面のメイン部分のボタンからそのワークフローを実行できる必要があります。
私が目にする主な問題は、アイコンと意味を関連付けるのが難しいことです。これは、ユーザーコンテキストとアプリコンテキストに大きく依存します。そのためテキストを強調するためにアイコンを使用することをお勧めします。
アプリがアイコンのみに依存している場合、ユーザーがアイコンを認識せず、アイコンが何に関連付けられているかを知るために盲目的にクリックする必要があります。
マテリアルデザイン では、これはナビゲーションドロワーの「ミニバリアント」として表示されます。 2つの画像を例にとると、画像の意味プロファイル以外に、アイコンが何を指しているのかを知るのは難しいです。英語以外のネイティブとしてテキストだけが表示される場合、「スター付き」の意味はわかりませんが、星のアイコンが表示されているのは、お気に入りまたは同様のものだと思います。
だから私のポイントは次のようにすることです：
- テキスト
- テキスト+アイコン
