mkit lab. - はてな出張所

育児奮闘中のエンジニアブログ

ハンバーガーメニューのどこが良くないのか考えてみた

スマートフォン向けのサイトやアプリで、右上に(左上にあることもある)三本線のアイコンのメニューがあるのを見たことはありませんか?このメニューはアイコンの形から「ハンバーガーメニュー」と呼ばれています。

AndroidのMaterial Designのガイドラインにも「Navigation drawer」として定義されています。

Navigation drawer - Patterns - Google design guidelines

しかしこのメニュー、「わかりづらくないか?」「そもそもいるのか?」という議論をよく見かけます。

今回はこのハンバーガーメニューについて考えてみたいと思います。

ハンバーガーメニューは使うべきではない?

2014年のA/Bテストの結果によれば、いわゆるハンバーガーメニューは使わない方が良いという結果に。

≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)

少し前に話題になった記事です。これだけ引用するとミスリーディングを呼びそうですが、以下はこの記事で引用されていた記事の内容の一部です。

Based on this and my previous AB test, a flat hamburger icon may not be ideal on a responsive website (remember this is a website not an app). Using the word MENU (and making it look like a button) could be more helpful for visitors.

This does not mean that users do not understand the hamburger/sandwich – it could be that the word MENU draws more attention.

Mobile Menu AB Tested: Hamburger Not the Best Choice?

「ハンバーガーはベストな選択ではない?」というタイトルで、メニューアイコンはどのようなアイコンがわかりやすいのかをA/Bテストを用いて調査された結果です。

この調査では、ハンバーガーアイコンよりも「メニュー」と文字で書いたアイコンのほうが分かりやすいという結果になっています。

Hamburger menuが好きな人は居ますか?私は好きではありません。確かに便利です。ただし、インタラクションやレイアウトをあまり良く考えずに、とりあえずHamburger menuを置くことになっていませんか。そのような状況はあまり良くないでしょう。誰かが、もっとクールなメニューを見つけてくれることを期待しています。

シリコンバレーのUXトレンド10選 / UX Survival Guidesレポート — Medium

シリコンバレーのUXトレンドとしてハンバーガーメニューが紹介されていますが、「とりあえず」置くものになっているのではないかという疑問が投げかけられています。

有名サービスのアプリではあまり使われてない

有名サービスのAndroidアプリをいくつか調査してみました。

Facebook

f:id:ooze-flash:20150614215711p:plain

アイコンはハンバーガーですが、いわゆるハンバーガーメニューとは違い、タブに内包されています。

Twitter

f:id:ooze-flash:20150614215731p:plain

メニューは全てトップのアイコンに集約されています。設定などは一番右のツールチップに配置されています。

Instagram

f:id:ooze-flash:20150614215741p:plain

GoogleAndroidでは使ってくれるなと言ってるボトムメニューは使っていますが、ハンバーガーメニューは使っていません。

この他にも、Pinterest、AirBnBTumblrなどでもハンバーガーメニューは使われていませんでした。多くのアプリを調べたわけではないのですが、誰もが知っているような有名サービスのアプリではあまり使われていない印象があります。

ハンバーガーメニューのどこが悪いのか?

ハンバーガーメニューはなぜ、「わかりづらい」や「使わないほうが良い」といった議論が巻き起こるんでしょうか。

「とりあえず」で使えてしまう便利さの問題

導線の置き場所に困ったらとりあえずハンバーガーメニュー内に置けてしまうという便利さがあります。これはハンバーガーメニュー自体が悪いのではありません。要はちゃんと考えられてない時の「とりあえず」として使えてしまえるのが問題なのです。

その結果として、ハンバーガーメニューってそんなに使われる場所ではないのに色々置いちゃうよね、的なことになってしまいがちなのではないかと思います。

メニューにしか機能の導線を確保できていないのは設計ミス

(ハンバーガーに限らず)メニューからしかメイン機能の導線を確保できていない状態というのはアプリの設計として間違っていると思います。

メニューを頻繁に開かなければならない設計というのがそもそもイケてません。

もし、その機能への導線を(メインの機能であるにもかかわらず)メニューにしか設置できないのであれば、それは余分な機能な可能性が高いのではないかと思います。

ハンバーガーメニューが諸悪の根源というわけではない

「とりあえず」で使えてしまうハンバーガーメニューと、メニューを頻繁に開かなければならない設計の間違いというのが重なってしまい、最終的に「ハンバーガーメニューは使うべきではない」に収束してるんじゃないかと思います。

ちゃんと考えるためにハンバーガーを使わないという決断

ハンバーガーメニューがあると「とりあえず」で導線を配置してしまうという問題から抜け出すには、ハンバーガーメニューを敢えて削るという決断はありなんじゃないかと思います。

ハンバーガーメニューを絶対使うなというわけではなく、ちゃんと考えられているのであれば使っても問題ないはずです。ただ、それがあることで「とりあえず」が生まれてしまうのであれば、なくしてしまったほうがユーザーにとって最適なUIを提供できるかもしれません。

チャットコミュニケーションは記号や絵文字を積極的に使ったほうが気持ちいい

最近、コミュニケーションツールにチャットを導入している会社が多くなってきてますね。Slackとかチャットワークとか。ChatOpsなんて言葉も出てきたりして。うちの会社でもSlackを利用しています。

早速本題なんですが、チャットでコミュニケーションするときは、記号や絵文字を積極的に使ったほうが気持ちよくコミュニケーションできると思うんですよね。

テキストに感情を乗せる

テキストのコミュニケーションは、対面のコミュニケーションに比べて感情が一番伝えにくいと思うんですよ。

例えば「ありがとう」という言葉を伝える時。

f:id:ooze-flash:20150606222637p:plain

確かに感謝してる。感謝してるんだけど、なんかちょっと怒ってるようにも機嫌が悪いようにも見えちゃうんですよね。勘ぐり過ぎ?

もちろん前後の文脈で違ってくるとは思いますし、言ってる本人は別に怒ってないし、機嫌も悪くないでしょう。でも、一工夫するだけで一気に現場が明るくなる。

f:id:ooze-flash:20150606222930p:plain

圧倒的に感謝してる!私は絶対こっちで言われたい。こう言われたほうがより、やって良かったって思えません?

絵文字だとより表現豊かになる

多くのチャットサービスには絵文字が使えるようになっています。それを使えば記号よりも感情を表現豊かに伝えられます。

f:id:ooze-flash:20150607230521p:plain

絵文字を使えば、こうなる。

f:id:ooze-flash:20150607230550p:plain

どう伝わるかは、相手がどう受け取るか次第

なんでわざわざこんなことに気をつける必要があるのかというと、自分が言いたかったことが相手にきちんと伝わるかどうかって、結局相手がどう受け取るか次第なんですよね。自分は怒ってないのに、相手は怒っていると思っていたとかってこともあるわけです。それによって本当ならしなくてもよかったやり取りが発生したりとか。

だったら、送信するときに記号や絵文字を積極的に使ってそのすれ違いをできるだけ軽くしようというわけです。

というもっともらしい理由付けをしつつも、単純に記号や絵文字があったほうが読んでて気持よくない?という所が大きいです(笑)

記号が諸刃の剣になることがあるので注意

ただし、記号の使い方によっては逆効果なこともあるので少し注意が必要かなと思います。

f:id:ooze-flash:20150607231303p:plain

時と場合によっては、このメッセージを見ると「バカにされている」ように感じることもあるかもしれません。送った人は「そんんなに怒ってないよ」「ただのツッコミだよ」という気で送ったとしても、です。

気持よく仕事しよう!

ちょっとした気遣いで、皆が気持ちよく仕事ができるようになるんじゃないかなぁと思います。今日から簡単に、誰でも始められると思うので、皆で実践して気持よく仕事をしましょう!