『なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？』という記事を読んで思ったこと
アプリケーションでたびたび見られるこちらのアイコン
俗にいう、「ハンバーガーメニューアイコン」ですね。
徐々に浸透してきたハンバーガーメニューアイコンですが、
先日、以下のサイトを拝見しました。
このサイトを見てみると、ハンバーガメニューアイコンをUIデザインの優劣という観点から見た場合、
- 「劣っている」
- 「醜い」
- 「撲滅すべきである」
などと散々な言われ様・・。
私の抱くハンバーガーメニューアイコンへの印象としては、
- かっこいい
- webクリエイターとして作り甲斐がある
- すっきりまとめられる
- スマホでかなり重宝されている
等があったので、上の記事を拝見してその内容に納得したのと、「そういう考え方もあるのか」と新たな気付きを得られたので、この記事について思ったことを綴ろうと思います。
ハンバーガメニューについて
ハンバーガーメニューは主にサイトの端に配置され、クリック(またはタップ)するとメニューが表示される仕組みです。
その最たる特徴は、「メニューを通常は非表示の状態にする」というものでしょう。
特にスマホに言えると思うのですが、デスクトップよりも限られた画面の中でメニューを通常はボタンにすることで、スペースを確保できるだけでなく、デザイン面でも洗練されたものにできるというメリットがあります。
しかし私が読んだ記事の中では、ハンバーガーメニューに関して筋道立てて批判的意見を述べていたのでまずはどのような意見があったのか、三つ紹介します。
ハンバーガーメニューを敬遠する人達の主張
1: 不親切
サイト内でこのような記述があります。
「それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない」
そもそもハンバーガーのデザインから何が得られるのかが分からないのだから、ユーザーはクリックする動機がないはずで、これでは不親切だというわけです。
要するに、ハンバーガーメニューは普段ナビゲーションが隠されているわけだから、その隠されている状態ではどんなメニューがあるかの確認の仕様がないからこれは不親切ではないか？と言っているわけです。
この文に関しては私は今まで考えもしなかったことです。
html等を触り始めたころはハンバーガーメニューアイコンはもうとっくに私の中では当たり前の存在になっていたので「クリックする動機がない」、即ちそれがメニューかわからない。だから自然な流れでユーザーはクリックしない。その考えには至れず謎の悔しさが芽生えました。
2: 面倒
また、「クリックしなければ情報が表示されない」という、初めにユーザーの行動を要求する点についても問題だとのこと。
上の意見から来ると自然な流れですね。確かにメニュー表示までに1クッション(?)設けられているわけですから、面倒なのは確かです。
これはハンバーガーメニュー採用の「副作用」でしょうね。
更に記事は続きます。
例えば、空港までの高速道路で、空港までの距離やレーン、道路状況の表示などは、次々と視界に現れては消えていくけれど、無意識のうちにドライバーは認識できており効果的です。しかし、仮にそれらの情報をユーザーが「クリック」しなければ表示されないというシステムであれば、どれほど面倒であるかは明らかなはず。ハンバーガーはこのような面倒さを含んでいるとのこと。
ちょっと無理やりなこじ付け感がありますが言いたいことはわかりますね。
「即時性」についての言及と言えるでしょう。ここに関しては私からするとそこまで気にしなくてもいいのでは？と思ってしまいます。先ほど言ったように、これは採用するにあたっての「弊害」なわけですから目をつむれるところはつむった方が良いのかなあと。
3: "香り"がしない
「？？？」と思った人も多いでしょう。
「香り」とはいったい何なのでしょうか・・？
ユーザーがオプション(追加情報)を欲するとき、実はユーザーは何を求めているのかについて明確には理解しておらず、自分の望むものに近い"香り"のようなものを頼りに行動するとのこと。
例えば、あるサービスについて関心を強めたユーザーにとって「料金」に関する情報は無意識に欲している追加情報であり、「料金」「価格」「手数料」などの「香り」を求めて、それに関する情報を探します。
この点、ウェブサイトの隅に隠れるようにひっそりと配置されるハンバーガーは、その名に反して無味乾燥なものであるため、追加情報を求めるユーザーのワンクリックを促せるものではないとアーチャー氏は考えています。
成程。つまり、香りとは、そのサイトに訪れたユーザーが無意識に探す目標への道しるべ的なものと解釈するのがいいでしょう。
確かにあまりサイトとか見ない人にはこれがメニューに通じるボタンだ、とはわからない人も多数いるのではないかと思います。
私も幼少期の頃、とあるサイトをあさっていた時、メニューがどこだかわからずにハンバーガーアイコンに気づくまでかなりの時間かかった思い出があります。なのでここには納得しました。
実例
突然ですがこちらの画面をご覧ください。
twitterの画面なのですが、下のナブバーに注目です。
このメニューがすべてハンバーガーアイコンの中に隠されていると思った場合、どっちが見やすいですか？
twitterが以前ハンバーガーメニューを起用していたかは定かではありませんが、実際にSNSでハンバーガーから上のようなナブバーに切り替えたところ、アクセス数も増加しクレーム数も大幅に減ったそうです。
実際、ハンバーガーアイコンにこだわらず、「クリックすることで開く」トグルメニューを採用したサイトとそれを撤廃しタブメニューに切り替えたサイト、二つのエンゲージメント(ここではクリック回数)を比較するとトグルメニューを使ったサイトの方が圧倒的に少なかったというデータもあります。
どこでハンバーガーメニューアイコンは有効なのか？
ハンバーガーメニューアイコンの利点として、デザインをシンプルかつ美しくできる点、スマホの画面内においてスペースの節約ができる「省スペース性」など、デザイン面で優れていることは紛れもない事実です。
そのハンバーガーメニューアイコンがどこなら有効なのか？サイトの情報をもとに私なりに考えてみました。
1: スマホ内のサイトでメニューが5,6個に集約できない場合
先ほど画像で見せたタブバーは5つです。タブバーの中には、タップするとさらに大量の細かいメニューが出てきます。つまり沢山のメニューをジャンルごとに数個に分けているのです。しかしどうしても数個にジャンル分けできない場合もあります。その場合はハンバーガーメニューは有効と言えるでしょう。
サイトというのは確かに先述の「香り」や情報がすぐ見れるのも大事かもしれませんが、それ以前に「見やすさ」も大切です。そのバランスを考えるのが難しいんですよね‥。
2: 専業として用いられるサイトの場合
これはサイト内で言われていたことです。
例えば、医療従事者が用いるソフトウェアなど、それが専業として用いられる場合には、無駄を省くためにハンバーガーで情報を省略・集約するという手はアリ。
ハンバーガーメニューを否定する理由として、どのようなメニューがあるのかクリックしないとわからないというのを先ほど述べました。しかし社内でしか使われないものであれば見やすさなどは気にする必要は一般ユーザーを視野に入れるよりは減りますし、1につながりますが、ごちゃごちゃしすぎる場合がとりわけ多いと思うのでハンバーガーメニューはかなり有効と言えるのではないでしょうか？
まとめ
まとめると、
- ハンバーガーメニューはナビゲーション項目が多すぎる際に有効
- メニューは項目化してわかりやすく
webデザインというのは本当に奥が深いですね。
ハンバーガーメニューアイコンって今でも作り方のサイトは大量に見かけますしcssコードテンプレートも数多く出回っています。私も一時期漁ったものです。
それほど愛されているのは事実ですが、安易に頼りすぎてしまうとかえってわかりづらくしてしまうこともあるので、ユーザーが本当に求めている情報というのは何かをよく考え、優先順位をつけた上でレイアウトを整える手法も有効だと言えそうです。
Discussion