ハンバーガーメニューを使用する最適のタイミングとは

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

When To Use a Hamburger Menu (2017-07-21)

ハンバーガーメニューとは、メニューを表示するために使われる3本線のアイコンです。アイコンをクリックまたはタップすると、ナビゲーションが表示されます。

デザイナーが書いたハンバーガーメニューに関する記事はたくさんあり、その多くはハンバーガーメニューに反対するものです。読んだことがない場合は、NNGroupのHidden Navigation Hurt UX Metricsを読んでみてください。簡単に言えば、アイコンそのものについてではなく、アイコンの背後にナビゲーションを隠してしまっていることについて議論しています。

しかし、場合によってはハンバーガーメニューが良い選択になりえるでしょう。

第2のナビゲーションとしてのハンバーガーメニュー

ハンバーガーメニューの主な欠点は、見つけるのが難しいためメインのナビゲーションメニューとして使用することは推奨できないということです。しかし、第2のナビゲーションオプションを設計する場合は、ハンバーガーメニューが適切な解決策になる可能性があります。主要なナビゲーションオプションが画面上のCTAボタンやその他の形式で利用できる場合、ハンバーガーメニューは第2のナビゲーションに適しているでしょう。

下のUberのメイン画面を見てください。

マップと検索(Uber画面の2つの重要なナビゲーション要素)は、つねに表示されます。


メイン画面全体は車をリクエストするために設計されているため、履歴や設定など第2のオプションはハンバーガーメニューの背後に隠すことができます。履歴や設定などの機能は、アプリを開いたとき毎回使用されることはありません。そのため、ハンバーガーアイコンはユーザーの気をタスクから逸らすことなく、そのまま第2の機能にアクセスさせます。

このような特定の場合は、以下のことが言えます。

ナビゲーション要素を少なくすることは、アプリの使用中にユーザーの注意を逸らす回数を減らすことを意味します。ナビゲーションの最小化は、ユーザーをタスクの完了に集中させます。

80%ルール

一般的には、ハンバーガーメニューを選択するかどうかは「80%ルール」を検討してください。ハンバーガーアイコンの背後に隠れてしまうナビゲーションオプションの通常使用率は80%を下回りますか? もし下回るのであれば、そのナビゲーションオプションをハンバーガーメニューに組み込んでも問題ないでしょう。

まとめ

隠れたナビゲーションは、多くの場合ユーザーのためになりません。しかしデザイン決定上は、アプリの目標の状況をつねによく考えて判断する必要があります。つまり、「良い」パターンや「悪い」パターンはありません。状況がもっとも重要なことなのです。

・・・


イベント

2018/02/27(火)
UX JAM 24