ハンバーガーメニューはゴミだ!!

Source

UXデザインファーム Forty の創業者。Croud Favoriteではチーフクリエイティブオフィサーを務める。

hamburger

これが、問題の「ハンバーガーメニュー」と呼ばれるモバイル端末上のアイコンだ。3本の線がパンに挟まれたハンバーグのように見えることから、そう呼ばれている。(3本のホットドックと言う人もいるが、それだけユーザーに理解されていないアイコンということだ)

このハンバーガーメニューは、それまでのサイトで常識だった、画面に常に表示されているナビゲーションメニューを小さく隠して、必要なときだけ見れるようにするために考え出された。

スマートフォンやタブレット端末の小さな画面の中で、スペースを節約するというデザイン面での大きな目的は達成され、「progressive disclosure」の記事で述べられた、段階的に情報を与えるWebデザインの手法には叶っている。

素晴らしい解決策に思えるだろう?
ハンバーガーメニューは急速に広まり、デジタルデザイナーに愛されていて、もはやこの流れを変えることはできないかもしれない。主要なフロントエンドフレームワークや最近のワードプレスのテーマには標準で設置され、ここ数年で作られたほとんどのWebサイトには備え付けられている。

しかし、これは最悪な事態なのだ。

他のデザイナーにこのハンバーガーメニューがいかにひどいアイデアかと説明しようとすると、変人扱いされてしまう。彼らは、これが小さな画面の中でナビゲートするための「唯一にして正しい選択」だと思い込んでいるのだ。

全ての人を説得することはできないが、この記事の読者にはこれから私の主張を分かってもらいたいと思う。

道案内としてのインターフェース

mystery meat navigation」という言葉は、17年前にVincent Flanders氏の書いた「Web Pages that Suck」という記事で使われた。90年代後半のWebデザイン黎明期のサイトナビゲーションが、ユーザーにとって目的地にたどり着けず、全く役に立っていないという問題を指摘したのである。

例えばこういった例だ。

スクリーンショット 2015-08-18 17.12.58

当時、デザイナーの間で「使いにくいナビゲーション」と「楽しいインターフェース」が混合されてしまっていた。分かりにくいナビゲーションでも、かっこいいアニメーションのついたサイトであれば、ユーザーは我慢して使うだろうと思われていたのだ。その過ちが正されるのには長い時間がかかった。

Webナビゲーションは、本質的には現実の世界での案内標識と同じようなものだ。明確性、可視性、自明性が左右する。例えば高速道路を運転していると、距離、出口車線、速度制限、カーブ、危険の可能性についてなど、たくさんの標識に気づくだろう。

これらはほぼ無意識状態で運転している時でさえ、認識されて間違いを起こしにくくしている。

仮に空港に向かっているとする。運転中に注意を逸らされるようなことがあっても、全ての標識や案内を見過ごすようなことはないだろう。脳の一部が運転中にサインを認識し、意識するしないに関わらず、矢印に従って空港に辿りつけるるのだ。

さて、これらの標識が通常は隠れていて、車の中でボタンを押さなければ見えなかったとしよう。

あなたは事前に職場で起きたことなどに気を取られて標識を見過ごし、空港にたどりつける確率がぐんと下がってしまうだろう。標識が隠れているため、何を見過ごしているのかにも気づくことができない。

ハンバーガーメニューは機能としては単純だ。ユーザーがメニューを見たいと思ったら、ただそこをクリックすればいい。しかし、突き詰めて考えると、ユーザーは自分だけでは何を探しているか分からず、メニューに選択肢が表示されていることで案内されているのだ。

情報の匂い

デザイナーがWebサイト制作に没頭すると、ユーザーがそのサイトの構造については無知であるということを忘れてしまう。これは一見悪意のない次のような会話の中で見られる。

クライアント: もしユーザーが「価格」を調べたいと思ったらどうすればいい?
デザイナー: 簡単です!ただメニューアイコンを押してから、「価格」をクリックすればいいだけなんです!

合理的に聞こえるが、このデザイナーはユーザーがメニューアイコンの中身を知っていて、それを探そうとすると(愚かにも)思ってしまっている。

しかし、実際のユーザーは違う。

ユーザーは「情報の匂い」を嗅ぎ取って進む。動物が餌を求めて匂いを嗅ぎまわるように、彼らは探しているものに最も近い所まで行けそうな選択肢を選ぶのだ。

ユーザーが価格を調べるとき、「代金、価格、料金、費用」といった言葉を探してページをスクロールしていく。見つからなければ、価格とセットで使われるような「登録、商品詳細、もっと詳しく」といった言葉を次に探すのだ。探しているものが見つかるまで言葉の範囲を広くしていくか、途中で完全にあきらめてしまう。

探しているものに近いとすら思わないものが何かお分かりになるだろうか?隅に浮かぶ小さな3本の横線のアイコンだ。そこには「情報の匂い」は全くしない。他の全ての言葉をクリックして探し回ったとしても、あの3本の棒線に隠れているとは夢にも思わない。普通はそこをクリックしてみようとは思わないのだ。

ハンバーガーメニューの失敗例、改善例

Facebookアプリでは、このハンバーガーメニューの典型的な使われ方がされており、このアイコンに関して「まぁ、Facebookで使われているから大丈夫だろう、、、」と思われてしまう。

しかし、Facebookは主要なナビゲーションとしてはハンバーガーメニューはもう使っていない。採用したが、失敗したのだ。代わりにタブバーへと移行した。

B82vXQ2CcAAUOnH

(ハンバーガースタイルの「その他」のアイコンを右下に配置しているが、重要なメニューは独立して、見やすく目立っているというのがポイントだ)

Obvious Always Wins」という記事の中で、GoogleのプロダクトディレクターであるLuke Wroblewski氏は、ハンバーガーメニューを使用して失敗した例と、改善して成功した事例をたくさん紹介している。

(全ての画像はLukeWから転載)

Bk8y16lCYAEGORy

B82rmd_CMAAm4Iz

B82uUMQCcAE4Eoh

おそらく、もっとも有名なハンバーガーメニューの失敗はNBCニュースだろう。彼らはこの先進的なナビゲーションスタイルに夢中になるあまり、あたかもモバイルファーストの勝利宣言であるかのようにPCサイトのデザインにも反映してしまっている。

Screen-Shot-2014-03-03-at-8.03.18-PM-1024x565

これがきっかけとなって、ハンバーガーメニューがいかに未来のニュースサイトのデザインであり、他のWebサイトが今後どのように真似していくかという論調が流れ出した。

しかし、他とおなじように、ここでもハンバーガーメニューは全く機能しなかった。

そこでNBCニュースは説明画面を表示して、使い方を説明することにした。

screen-shot-2014-02-12-at-10-18-05-am

それでもユーザーはクリックしなかったので、最後には黄色で目立たせることにした。

nbcnewshomepage

結局、写真の中のトップ下部にあるように、ハンバーガーをあきらめ、ナビゲーションを従来の水平配置のメニュースタイルにデザインし直した。これは機能し、今日まで同じデザインが使用されている。

Screen-Shot-2015-07-31-at-3.36.30-PM

かっこよくはないし、魅力的でもないし、ハイテクですらない。しかし、適切な「情報の匂い」を与えることにより、このデザインは機能しているのだ。ユーザーはそのメニューを見渡し、「科学」など気になる言葉があればクリックできるからだ。

これがナビゲーションがいかに現実世界で機能するか、ということである。


後編に続く