ハンバーガーメニューを閉じるには、アイコンをクリックしたときだけでなく、外側をクリックしてもいいですか？
レスポンシブウェブサイトのモバイルビューでハンバーガーメニューを使用しています http://edmdesigner.com
チームで議論が行われています：
a）開いているハンバーガーの外側をクリック/タップした場合、ハンバーガーメニューを閉じる必要がありますか？
b）または、実際の「ハンバーガーアイコン」をクリックまたはタップした場合にのみ閉じる必要がありますか？
いくつかの事実：
下の画像は記事 ユーザーは実際にモバイルデバイスをどのように保持していますか？ からのものです。ユーザーが携帯電話をどのように使用するかについては、他にもたくさんの記事をWeb上で見つけることができます。データは、何千もの携帯電話の所有者をリモートで監視することによって収集されました。
ダークオレンジ/レッド-親指だけで携帯電話を使用するユーザーの割合
紫-クレードルの位置で携帯電話を使用する人の割合
マゼンタ-両手
その他は、電話やその他の活動に従事していました（ 詳細については記事を参照してください ）。
上記の結果は、60〜70％の人が1本の親指で電話を使用していることを示しています。近年、携帯電話の大型化が進んでいます。 1本の親指の到達可能性は、主に下部と右側にあります。
次の画像は、その親指が届く領域を示しています。 
ハンバーガーメニューの場合、ユーザーが指を閉じるためにその位置に指を移動させることは、余分な労力となるでしょう。
だから、彼らがそれの外のどこかをタップしてそれを閉じることができれば、それはより良いでしょう。
もう1つのポイントは、ユーザーの期待です。最近、ほとんどのユーザーはハンバーガーメニューに精通しており、メニューの外側をタップすると（ポップアップボックスのように）ハンバーガーメニューが閉じることを期待します。
編集
コメントから提案を追加する-
スワイプして閉じる/開くオプションも強くお勧めします。
ユーザーはスワイプに慣れています。これは画面の位置とは関係なく実行できます。強くお勧めします。
シナリオを評価してみましょう
ユーザーはメニューをクリックして閉じることを期待しています
- メニューをクリックして閉じる場合=>良い
- 外をタッチして閉じるかどうかは、ボタンを使用するため、気にしないでください。さらに、ほとんどの人は、外側をクリックすると、切り替え可能なコンポーネントが開いたままであることを期待しません。誰かがこれを期待していても、アクションをやり直すことは苦痛ではなく、ブロッキング状態のように感じられません。ドロップダウン、ナビゲーションメニュー、モーダルなどは、ほとんどの場合、それらの外側に触れると閉じます。
ユーザーは外側をクリックして閉じることを期待しています
- メニューをクリックして閉じる=> OK、それは期待されている
- 外側に触れて閉じる場合=>予想通り、素晴らしい。
- もしそれが閉じない外に触れた=>ユーザーが怒っている
結論とアドバイス
したがって、ユーザーが怒る可能性を減らすには、外側をタップしてメニューを閉じます。
また、ハンバーガーが開いていて、ユーザーがハンバーガーの外側をタップしたときに実行されるアクション（リンクやボタンが押されるなど）を防止する必要があります。この期待はデスクトップと同じではない可能性が高いですが。
ハンバーガーメニューを使用する場合、他の場所をクリックまたはタップすると、メニューが折りたたまれます（デスクトップ上でも、メニューがホバー解除に応答せずに固定される場合）。また、モバイルでは、メニューをタップするときに他の要素をアクティブにしないでください。
しかし、私は正しい答えを考えて、最高のUXを提供します。これがあなたの本当の目標ですよね。それは ハンバーガーメニューを使用しないでください です。
から deep.design ：
ハンバーガーメニューが機能しない
それはすべてを誤解させる美しくエレガントなソリューションであり、次に進む時間です
ハンバーガーアイコンには 情報の香り がありません。それは大きな問題です。
ハンバーガーの「メニュー」は、UIパターンのメニュークラスに属します。そのため、メニューの動作を確認すると、ユーザーがもう一度クリックまたはタッチしたとき、またはヒット領域の外のどこかでメニューが閉じます。
同じことがハンバーガーメニューにも当てはまります。
Picnic CSS の開発者として、ずっと同じことを考えていました。外をクリックしたときに閉じることにしましたが、いずれにしてもアクションを明確にする必要があります。
わかりやすくするために、メニューを開くと、残りのコンテンツが隠されます：
これを行わない方法の注目すべき例はgithubです。携帯電話でアクセスし、メニューをクリックして閉じてみてください（同じメニュー項目をクリックする必要がありますが、外部リンクは引き続き機能します）。
ここでは全員が同意しているようです。私はそれに別の視点を追加します。
フィッツの法則 は、タップターゲットが大きいほど、小さいターゲットよりもヒットしやすいことを示します。したがって、背景全体をメニューを閉じるためのターゲットにできる場合は、それを選択してください。
あなたの現在のレイアウトとメニューに基づいて、私はハンバーガーメニューも見逃します。
文字数が少なく、かなり限られた数のオプションしかありません。メニューを1行から2行に折りたたみます。
EDMdesigner | API | APP | ECMS | JOBS | BLOG | Login ????
EDMdesigner Login ????
API | APP | ECMS | JOBS | BLOG
でも、やっぱりハンバーガーを使いたければ、必ず「外で押されたら閉店」に。ユーザーがメニューの外側を押すと、これは次の3つのうちの1つを意味します。
彼らはそれがメニューを閉じることを（同様のケースから）知っています。
彼らはあなたの側で別の要素を使いたいので、メニューはもう必要ありません。
彼らは誤って誤解します。
ほとんどのユーザーは、メニューの外側を押すとメニューが閉じることを知るために（ウィンドウズのスタートメニューなどを参照）、まだ知らない人を知るのに十分な「読み書き」ができると想定できる段階にあります。メニューの外でランダムに押すのではなく、おそらくメニューボタンをもう一度押します（ここをクリックして開いた場合は、そのように閉じる必要がありますよね？）。
したがって、過半数のグループに加えて、外側を押して期待される効果を得る少数派と、間違いを犯した少数派（タッチターゲットが十分に大きいと想定して少数派）を比較しました。少数のエラーのために、大多数のユーザビリティを犠牲にしますか？