ハンバーガー vs. ケバブ
短い答え
3本線のボタンは、ナビゲーションを開きます。3つのドットのボタンは、近くのアイテムのその他の操作を開きます。
非表示ナビゲーションには三本線を使用し、主に小さい画面で使用します。余分なアイテム操作が収まらない場合は三点リーダーを使用し、ボタンを「その他の操作」と名付けてください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Hamburger Menu
↗ ハンバーガーメニュー
3本の線があるメニューボタンだよ。表示するスペースがないとき、サイトのメインのナビゲーションを開くよ。
狭いショップページでは、ラベル付きのメニューボタンがカテゴリ、アカウント、ヘルプを開く。ドロワーはフォーカスを内部に保持する。
- 以下の場合に使用します
- 重要な目的地を常に見えるようにした後、小さい画面で使用します。
- 以下の場合は使用しないでください
- 広い画面でナビゲーションを全部隠さないでください。アイコンにはアクセシブルな名前と展開状態も必要です。
- コードで使用する名前
button aria-controls aria-expanded + nav
Overflow Menu Button
↗ オーバーフローメニューボタン
「...」の3つのドットでできた小さなボタンは、あまり使わない操作を開きます。それらの操作が画面に入りきらない時に使います。
各プロジェクトの行は「開く」を表示します。「重複」「アーカイブ」「削除」は、そのオーバーフローメニューに残ります。
- 以下の場合に使用します
- 1つのアイテムに複数の二次的なアクションがあり、すべてのボタンを表示するとページが混雑する場合に使用します。
- 以下の場合は使用しないでください
- ラベルのないアイコンの背後に主要な操作や破壊的な結果を隠さないでください。一般的なタスクへの唯一の経路は見えるままにしてください。
- コードで使用する名前
button[aria-haspopup=menu] + role=menu
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| ハンバーガーメニューHamburger Menu | 重要な目的地を常に見えるようにした後、小さい画面で使用します。 | 広い画面でナビゲーションを全部隠さないでください。アイコンにはアクセシブルな名前と展開状態も必要です。 | button aria-controls aria-expanded + nav |
| オーバーフローメニューボタンOverflow Menu Button | 1つのアイテムに複数の二次的なアクションがあり、すべてのボタンを表示するとページが混雑する場合に使用します。 | ラベルのないアイコンの背後に主要な操作や破壊的な結果を隠さないでください。一般的なタスクへの唯一の経路は見えるままにしてください。 | button[aria-haspopup=menu] + role=menu |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをハンバーガーメニュー (Hamburger Menu)、オーバーフローメニューボタン (Overflow Menu Button)から選んでください。このルールを使用してください: 3本線のボタンは、ナビゲーションを開きます。3つのドットのボタンは、近くのアイテムのその他の操作を開きます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。