ハンバーガーメニューがUXには致命的である理由


この記事はuxdesign.ccのハンバーガーメニューに関する記事を許可のもと翻訳したものです。

翻訳元記事:Death by Hamburger Why three little lines are hurting your UX (2016/11/22)

 著者:Fiona Foster サンフランシスコのUXアーキテクト

ああ、ハンバーガーメニュー

最近のことです。別のデザイナーと一緒にモバイルアプリの再レビューをしていたとき、彼が「どうしてハンバーガーメニューをメインのナビゲーションに使わなかったのか」と聞いてきました。

不意を突かれた質問に、私は一瞬固まって自分自身に「どうして私はしなかったんだろう?」と問いかけました。それはまるで何かのトリックのように。そして「ハンバーガーメニューはナビゲーションを不明瞭にし、ユーザーが探しているものを見つけにくするからです。」と簡単に説明しました。私が取り組んでいたアプリは、ハンバーガーメニューを必要とするほど複雑ではありませんでした。

この会話の後、私はずっと考えてしまいました。私は間違っていたのでしょうか?私の仕事のレビューをしてくれたデザイナーは私よりも経験豊富だけど、ハンバーガーメニューは間違った方法だと私は感じていたからです。

ハンバーガーメニューの長所と短所

ハンバーガーメニューは、スクリーンのスペースを大幅に節約できるため、シンプルですっきりしたデザインが可能です。一方で、ユーザーはアプリのセクションを移動するためにたくさんの作業を行う必要があり、ユーザーの負担が増えます。

ハンバーガーメニューはデザインを視覚的に簡素化することができます。しかし、情報があるであろう気配を小さな3本の線の後ろに隠してしまうため、かえってアプリの構造を複雑にしてしまいます。

どんなプロジェクトであろうと、ユーザーに対する深い理解を持って、デザインの選択肢を提示すべきです。彼らは、3本の水平な線がメニューを意味することを知っていますか?以前にハンバーガーメニューを使ったことがあり、その意味をすぐ理解できるほど豊富な経験がありますか?

ハンバーガーメニューは、デザイナーがあまり疑問を持たないもののひとつです。デザイナーは、ただ何の気なしにそれを使っているのです。ユーザーの背景や経験に沿っているかどうかを考慮せずに実装されるのはとても危険で、特に、主要なナビゲーションに適用されている場合には注意が必要です。

そこで、ほかの大手企業がハンバーガーメニューをモバイルアプリで使っているかどうかを調べてみましたが、結果皆さんが思っているほど多くはありませんでした。

【事例】ハンバーガーメニューが有効な場合と、そうでない場合

それでは、モバイルナビゲーションのためのいくつかの解決法や各デザインの長所・短所を詳しく見ていきましょう。

FitBit

FitBitは複雑なデータを大量に採用し、すばらしい設計によって簡単に理解できるようになっています。ハンバーガーメニューはありません。ユーザーの身近にあるのが、画面下部にある「Add(追加)」ボタンです。このボタンで、ユーザーがどんな種類の情報を追加できるかを表示してくれます。これがとても使えます!使い勝手が良く、大事な情報を隠すことがありません。主要な操作となる「Add(追加)」は常に明確に連動し、メインナビゲーションから簡単にアクセスすることができます。

Twitter

Twitterにはたくさんの機能がありますが、1つのタップですべての機能にアクセスすることができます。カテゴリー別に人気のあるツイートが表示されている画面でも、スクロール可能なメニューを使用して、複数のコンテンツカテゴリを効果的に表示できます。ナビゲーションが今後さらに改善されるとは思いますが、現在の設計でもハンバーガーメニューや「More」といったオプションを使わずに、多くの機能を実装しています。

Uber,Lyft

UberとLyftは、メインナビゲーションやプロフィール写真欄にハンバーガーメニューを使用しています。しかし、これらのアプリはハンバーガーメニューを使わなくても機能します。なぜなら、アプリケーションの主な目的は、メイン画面からすぐにアクセスできる乗り物を予約することだからです。ハンバーガーメニューの背後にある追加アイテムは、乗車履歴や支払いなどの二次的なものです。これらの機能は、ユーザーがアプリを開くたびに使用する可能性は低いものです。

Amazon

Amazonはハンバーガーメニューを使っています。Amazonはご存知の通りすべてのものを販売しているため例外なのです。タブバーやスクロール可能な水平メニューから4~5つのメニュー項目を検索していくのはユーザーを夢中にさせます。ここでのハンバーガーメニューは、インターフェイスを簡素化するための賢い選択と言えます。Amazonは、ハンバーガーメニューを良しとする、素晴らしいデザインを作りました。

アプリでは、完全に拡張された検索バーを使用しています。メインの検索バーは、ユーザーが欲しいものを正確に入力するのを迅速かつ容易にします。調査によると、特に外出先ではユーザーが思っているよりもさらに高度な検索性があるようです。

eBay

eBayは、Amazonと同じように膨大な数の商品を扱っています。モバイルアプリではハンバーガーメニューを採用していましたが、最近ではそれをやめタブバーが使われています。私には、この変化を引き起こした分析やユーザーの洞察、そこから比較して現在のデザインにどうやって行き着いたかに、とても興味があります。

Luke Wroblewskiのこちらの記事にはハンバーガーメニューの使用例がたくさん紹介されています。

結論

ハンバーガーメニューを採用する前に考えましょう。ナビゲーションはユーザビリティの重要な部分であり、慎重な考察と配慮を必要とします。隠されたナビゲーションは、ユーザーにとって時折とても迷惑なことがありますが、アプリの目的とエンドユーザーを視野に入れた全体感を持ってデザインを考える必要があります。ハンバーガーメニューは、トレンドだからといって何も考えずに選ぶとか、「みんながやっていることだから」という考え方を見直す必要があるでしょう。

最後に、私が好きなデザインの話をして終わりましょう。

「しかし、AやBやCのような大企業はそれをやってるぞ。」

だから何ですか?大企業の設計チームは、あなたや私のような人間で構成されており、技術上の制約やビジネス目標、そして最終的な判断をする幹部の下で働いています。人間は間違いを犯します。彼らも私たちと同じように、それを理解しています。

こうした問いを投げかけることが、あなた自身の道を開くのです。

参考文献

Hamburger Menus and Hidden Navigation Hurt UX Metrics
「ハンバーガーメニューと隠されたナビゲーションはUXメトリックスを駄目にする」Kara Pernice and Raluca Budiu

Hamburger Menu Alternatives for Mobile Navigation
「モバイルナビゲーションのためのハンバーガーメニュー代替案」 Zoltan Kollin

The Hamburger Menu Doesn’t Work
「ハンバーガーメニューは機能しない」 James Archer

Getting Started with Data Driven Design
「データドリブンデザイン入門」 Jon MacDonald

Material Design is Different, Not Better
「マテリアルデザインは異なるもので、良くするものではない」 Meng To

翻訳元記事

Death by Hamburger Why three little lines are hurting your UX (2016/11/22)

画像は翻訳元記事より引用


The following two tabs change content below.
ポップくん

ポップくん

株式会社ポップインサイトの公式キャラクター、ポップくんです。ユーザビリティやユーザテストをはじめとして、Webマーケティング全般にわたり、皆様に役立つ情報を発信してまいります。


グロースハック・アイデアが満載!ユーザインサイト事例60選

3,500件以上のユーザテスト実績から、様々な業界におけるユーザインサイトや、良いサイト・悪いサイトの事例をご紹介!あなたのサイトを改善するヒントが詰まっています。
ダウンロード(無料)

【動画教材付き】今日からできる!ユーザテスト入門

500回以上のユーザテスト経験を踏まえて、現場で実際にできる「簡易ユーザテスト」について、準備の方法、当日の進行のコツ、レポート作成のパターンなどを余すところなくご紹介!実際のテスト様子の動画教材もあるので、習得しやすい!
ダウンロード(無料)