次世代のWebナビゲーションに向けて ー ハンバーガーメニューからの卒業

Source

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

※この記事は前編「ハンバーガーメニューはゴミだ!!」の後編となります

問題の本質

ハンバーガーのアイコンが「メニューを表示する」ということが伝わらず、デザイナーは代替案を試し始めた。「戻る」矢印のような別のアイコンの案の他に、「メニュー」という文字を代わりに使ったり、「ハンバーガーアイコン」と「メニュー(文字)」の組み合わせまで作られた。

面白い結果が出揃い、多少はナビゲーションに改善は見られた。しかし、どれもが「情報の匂いの欠如」という共通の問題により、ほとんど機能していなかった。

「メニュー」という言葉は、たしかに3本線のアイコンより分かりやすいが、そのサイトで他にどのような情報があるのかが全く伝わらない。ユーザーにとってはそれをクリックする理由がないのだ。彼らは画面をざっと見回して、何か関係がありそうなものや興味を惹かれるものがあればクリックする。「メニュー」という言葉には惹かれないし、関係がありそうにも見えない。「個人情報の取り扱いについて」のボタンと同じ程度にしか見えないのだ。

「ユーザーが使い方を覚えるのを待たねばならない」と言う人もいるが、「情報の匂い」の原理を考えれば、その議論がいかに不毛か分かっていただけると思う。良いデザインのインターフェースは、一般的に認知され浸透されるのに時間はかからない。考えれば当然のことだろう?しかし、デザイナーはハンバーガーメニューに取り憑かれ、ユーザーがついていけないにも関わらず、いまだにそれが正しいものと思い込んでしまっている。

問題はユーザーがハンバーガーメニューに戸惑っているということではなく、それを画面で最初にクリックする理由が見つけられないということなのだ。

ハンバーガーが使われ続ける理由

それでもデザイナーがハンバーガーメニューをやめられない理由がある。

それはデザイナーの夢だからだ。
もし画面トップにぎこちなく水平に並ぶナビゲーションがなくなり、携帯端末画面のデザインで気にする必要がなくなったとしたら?デザイナーにとってそれは夢見る桃源郷のようなものなのだ。

デザイナーは論理よりも流行に流されてしまうことがある。
2014年に、レスポンシブデザインの優れたWebサイトがハンバーガーメニューの流行に乗り、次の大きな流れだと言われた。かっこいいデザイナーが使っているのに憧れ、誰もがそれを使い始めた(必ずしもかっこいいデザイナーである必要はないが、有名デザイナーが使っていれば、すでに検証されていると考えてしまうのだ)。彼らはそのインタラクションの論理とユーザーテストを求めるべき時に、なめらかなアニメーションまでつくりだした。

今では標準的に装備されている。
ハンバーガーメニューの出現はBootstrapFoundationといったフロントエンドフレームワークの頻用と同時に起こり、どちらも従来の水平のメニュー解決策として携帯やタブレット端末にあらかじめ設置されてしまう。それらのフレームワークのメニューオプションを使う上で、ハンバーガーメニューを避けるためには、コードをハックしてそれを除去するか、最初から新しいナビゲーションシステムを作らなければいけない。

つまらないニュースは広まらない。
PCナビゲーションメニューの携帯端末への転換問題を我々が克服したというニュースは、ゾンビウィルスのようにデザイン業界を駆け巡った。全員が一晩でそれを使い始めたようなものだ。しかし、残念なことに、ハンバーガーメニューの夢に対抗するインタラクションデザイン理論、ABテスト、メトリックスはすぐには広まらないのだ。

常に例外を考える

デザインに普遍的なルールはない、ということを覚えておくことが重要だ。常に例外はある。

例えば、看護師が一日中使う医療器具のように、使い慣れたユーザーのみが頻繁に使うアプリケーションでは、ハンバーガーメニューは有効かもしれない。「パワーユーザー」システムでは、新しいユーザーのために常に直感的である必要はなく、「情報の密度」など経験者にとっての改善を優先するために犠牲が払われなければいけないのだ。

もう一つの例外は、(先ほどのFacebookの例であげたように)副次的なナビゲーションアイテムの場合だ。ユーザーにとって本当に重要な項目が分かりやすく配置されていれば、他の重要性の低い項目はハンバーガーメニューに詰め込むことができる。

ハンバーガーメニューが絶対的に悪いデザインだと主張することは、それが絶対的に素晴らしいと主張することと同じである。考えるための近道はない。ユーザーのことを考え、計算し、何が実際に機能するかを見つけ出すのだ。

現状の解決策

もともと携帯のナビゲーションは難しいものだ。3インチのスクリーンに収まらなければいけないし、親指で押せる程度に大きくなくてはいけない。複数の目的地へと案内するためにしっかりとした構造にもなっていなければいけない。難しい注文である。

今のところ最良の解決方法はタブバーであろう。スクリーン上部でも下部でも(レスポンシブデザインのWebサイトのためには上部だろう)、主要なナビゲーションの選択肢として4-5つのアイコン+文字のボタンが置いてある。これはFacebookが新しいナビゲーション構造で使用した方法で、GameStopの携帯サイトでも見つけることができる。

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

アイコンと文字を組み合わせることの利点は、内容を要約しながらもボタンサイズを(私のような)大きい指でも押せる程度には大きくできることだ。

もし基本的なナビゲーションメニューを数個に絞れたら、3つか4つのテキストのみのメニューを取り除けるだろう。スペースを慎重に使わなければいけないが、機能するだろう。この解決方法は必ずしも全ての場合に適切ではないが、現在のなんでもかんでもハンバーガーに詰め込むようなデザインよりは格段に良い選択肢だろう。

もしくは、そのサイトのメインメニューをなくすことも、場合によっては正しいだろう。PC画面でさえも、ほとんどのユーザーがメニューを主要なナビゲーションとして見ないため、問題なく機能する。レスポンシブデザインへの応用を踏まえても良いアイデアだろう。この場合、全ての論理的なステップがその内容の中に含まれており、「もどる」「ホーム」といった逃げ道がはっきりと用意されていれば可能となる。通常は小さくてシンプルなサイトに向いているが、どのサイトでも1つの選択肢として考える価値があるだろう。

【追記1】
Darniel Winter氏は、私の記事を読んで、「自分と同じように他の人も腰を重くしていると考え、非常に簡単なメニューボタンのa little Bower packageを作りました。」とメッセージをくれた。動作中のDaniel氏のコードはGaumengutで見ることができる。

Screen-Shot-2015-08-13-at-3.21.30-PM

私自身はまだそのコードを試してないので、技術的な観点からは保証できないが、見る限りではよくできているし、使ってみる価値はあるように思える。

【追記2】
Chris Coyier氏に指摘された他の代替案としては、Michael Shanagl氏によって作られたPriority+のデザインパターンがある。ハンバーガーメニューの中に一瞬で全てを隠してしまう代わりに、スクリーンのサイズに応じて、メニューを端に隠していくものだ。これは重要なアイテムから優先していく際には非常によく機能する。(必ずしも論理的な手法とは限らないが、それは別の機会で考えたい)

Chris氏はこれが人々のナビゲーションの整理の仕方に応じて、いかに安定していて、比較的早い解決策であるかをPriority+の他の例一覧を作成して、見せている。

メニューが多い場合の解決策

タブバーに関して今のところ最も多かった苦情は、3~4つ程度のメニューアイテムであれば有効だが、それ以上のメニューがあるサイトには使いにくいということである。

そこで、世界で最も大きい企業の一つであり、「ハンバーガー」に特化したブランドのサイトをチェックしてみよう。

Screen

これはしっかりしたナビゲーションシステムとして機能していると思う。しかし、携帯端末でサイトを見てみるとこうなる。

IMG_4145-577x1024

彼らは最も重要の項目を抜き取り、タブバーに隠してしまった。(他の要素はページ下部のリンクから飛ぶことができる)

携帯端末でのデザインは、PCから小さい部屋に引っ越すようなものだ。それぞれに優先順位を与え、手の届く位置に何を置き、何をガレージに入れるのかを決めるということだ。そこには深い考察、検証が必要とされるが、それこそが正しいデザインのプロセスなのである。

新聞紙サイトの場合など、もし同じ程度に重要な項目を持っているように見えたとしても、優先順位をつけることは可能だ。「アメリカ、世界、政治、その他」といったような主要な項目を目立たせることもできるし、他の項目が「その他」の中に隠れていることを目立たせることもできる。しっかりした情報の匂いはハンバーガーメニューよりもずっと機能するし、シンプルな「項目」メニューよりも良く機能するだろう。

ナビゲーションを統合することは可能である。難しいことではあるが、そこに挑戦しなければ、そもそもあなたはUXデザインに取り組んでいないということになる。

(マクドナルドのWebサイトの情報に関して@dancowに感謝する)

現実との戦い

私自身の会社であるCrow FavoriteFortyのサイトは、実際ハンバーガーメニューのナビゲーションを現在使ってしまっている。残念ながら、現在のWebテクノロジーは、人間と同じように学びながら進化していくまでには至っていない。(そんな日が来るのを本能に楽しみにしているが!)

そのWebサイトの修正すべき点は、時間が許す限り確実に行うつもりだ。きっとみなさんも私が挑戦状を叩きつけたこの問題をどのように解決するか気になるだろうし、正直に言って私自身も興味がある!

ハンバーガーメニューはここ数年で最も恥ずかしいデザインの一つだ。このデザインが疑う余地のない常識と考えるのはもうやめよう。

我々のチームも確かに使ってはいる。もちろんそこには制約があり、可能な代換案について議論してきたが、約1年半にわたり、それは携帯端末のナビゲーションを扱う上での常識だったのだ。我々のクライアントはそれを求め、誰もがいかにそれが素晴らしいかを語り、他の方法への明確な答えを導くほど十分なデータもなかった。ハンバーガーメニューを使用したたくさんのサイトを作ってきた。我々の会社で出来る限りのことはしてきた。

次の時代へ

今、ようやく結果は明らかになった。ハンバーガーメニューはほとんど機能せず、次に向かって変化する時がきたのだ。今現在、新しいWebサイトを作る上でハンバーガーメニューを使うべき理由はほとんどなく、そのナビゲーションが過去のWebサイトと見比べて本当に良くなっているのか検証する価値はあるだろう。

変化は難しい。しかし、それこそがデザインの世界であり、変化し続けることを私は願う。我々は定期的に改善してきたし、現代のWebサイトのデザインは5〜20年前に作られたものよりも格段に改善されたことに疑いの余地はない。これは次の進化に向けての1つのステップに過ぎないのだ。