Android
UX
UI
iOS
Hamburger

君たちはそんなにハンバーガーメニューが好きなのかね?

はじめに

本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。

まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。これから例によりハンバーガーメニューをディスりますがご了承くださいませ。

あの三本線を人はハンバーガーと呼ぶ

最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。私はハンバーガーにはチーズが入っている方が好きなのですが、残念ながらチーズは省かれてしまっていますね。

hamburg.jpg

にしても欧米人にはあれが本当にハンバーガーに見えるのでしょうか。他にもう少しマシな例えは無かったのでしょうか。東洋の文化で育った私は 日本の家紋風水の八卦 かと思いましたよ。乾(いぬい)メニュー なんてなんだか格好良くありません?

乾
https://ja.wikipedia.org/wiki/八卦

まあ違和感あれどそこに抗ってもしょうがないので、とりあえずこれはハンバーガーと呼称することにします。GUI でよく出てくる三本線はハンバーガーです。参考までにとてもわかりやすい図を上に用意しました。

目を醒ませ、ハンバーガー野郎は実はそんなにイケメンではない

iPhone でインターネットするとほぼ必ず現れる彼、とっても人気者みたいです。特に Google さんはもうアプリでも Web でもハンバーガーにぞっこんのようです。最近では 三点リーダーを縦向きにしたような、もはやハンバーガーですらないアイコン も用い始めています。
一方の Apple さんはアプリではそうでもないみたいですが、Web の一部ではハンバーガーを使っています。

chrome.jpg
Chrome

ここからは、サイトやアプリでハンバーガーメニューがどのように活用されているのか、いくつかの事例を見てみましょう。

android.com

IMG_6203.jpg IMG_6206.jpg

左からニュッとドロワーメニューが出てきました。Safari だとアプリの世界でツールバーが引っ込んだりするものですから、ドロワーの裏に敷かれている黒い幕が画面下で切れちゃっています。Web だとよくあるブラウザ依存の「崩れ」でしょう。たぶんここは Android の Chrome に最適化しているでしょうし、「iOS ではこんなこともまともにできないから Android にスイッチしようぜ」という Google さんからのメッセージなのかもしれません。

IMG_6219.jpg IMG_6220.jpg

色々触っていたらハンバーガーが右に移ってしまいました。試しに押したらよくわからない画面に飛ばされちゃいました。ブラウザ依存なのか、これらのボタンを押しても無反応なんです。こんな画面に来たいわけではありませんでした。できれば元々あったハンバーガーを返して欲しいです。

このハンバーガー君はどうも落ち着きがないみたいで、外見だけでは彼がどんな働きをしてくれるのか、なかなか判断しづらいですね。突然持ち場を離れるようなことがあったら、慌てず、冷静に、ブラウザの「戻る」を押してやり直せば大丈夫です。

apple.com

IMG_6207.jpg IMG_6208.jpg

あまりハンバーガーに乗り気では無い Apple さん、スマホ向けの Web UI に限り、二本線のハンバーガーアイコンを使っています。いや、これではハンバーグが無いからただのパンです。あるいはハンバーグとパン1枚。これ三本ではない理由はタップしてみればわかります。要はくるんと動いてバッテンマーク×に変化するわけですね。なので真ん中のハンバーグ(あるいはパン片方)が邪魔なのです。

それにしてもハンバーガーをくるんと回す意味はあるのでしょうか。

メニューの展開のされ方をみると、これはドロワーではなく上の帯が縦に拡張した領域という位置付けのようです。だからそのまま下にスクロールするとさっきまで表示していたコンテンツが覆い隠されることなくちゃんとそこにいます。黒い幕で隠されないだけまだ android.com よりはマシだと思いますね。

apple.com の最近の傾向として、画面いっぱいの大きな自社商品の写真でその魅力を最大限に伝えようとするデザインが多いです。本質とはあまり関係のないグローバルメニューなんかは極力目立たせないようにしています。スマホは画面が狭いので自社商品の写真で埋め尽くすためにも、ここでハンバーガーの出番というわけですね。

ハンバーガーメニューがダメな理由

ここからは真面目にハンバーガーメニューがダメな理由を検証してみます。

1. 何をするのかがわからないアイコン

MOARRRR Hamburgers!
https://dribbble.com/shots/1454295-MOARRRR-Hamburgers

味気ない三本線を一目見ただけでは、一体全体何をするものなのかユーザーからはよくわかりません。クリックまたはタップしてみるまでは中身を知ることができません。また、いざ開いてみたとしても、大抵は縦方向に十分に余裕があることから、無駄にメニューが充実していることが多いです(Amazon のように)。こうなるともうユーザーはハンバーガーメニューの中身をいちいち覚えていられません。とにかくいろいろなモノが詰まったアノ三本線 という曖昧な記憶を頼りに、用がある度にそれをいちいちタップすることになります。

可能であれば、三菱東京UFJ銀行の例のように、アイコンの隣にテキストを付加してあげたほうが親切でしょう。この点についてはハンバーガーアイコンに関する調査報告をされている記事がありますので、そちらも合わせて読まれると良いと思います。

≡ ←ハンバーガーメニューのデザインでクリック率は違う(2014年のA/Bテストの結果から)
Mobile Menu AB Tested: Hamburger Not the Best Choice?

これは個人的な話ですが、たとえば iPhone でまとめサイトのようなところを見ていた時にそこにハンバーガーアイコンがあったとして、私はまずそいつをタップすることはありません。なぜなら Web にはネイティブアプリほどの洗練された UI を期待していないし、そしてアイコンだけを見ても一体全体それが何をするものなのか分からないからです。Twitter などからたまたま記事に飛んできた身としては、わざわざハンバーガーアイコンを押して内容を確認するほどにそのサイトの構造には興味がないため、まず押しません。

2. 隠しておけるからより多くの情報を扱える、という思い違い

スマホの画面は狭いので、ハンバーガーメニューのようなものをどこかに常設しておくと当然邪魔になります。なので、普段はそれを隠しておき、タップされたらそのときだけ開くというアイディアが生まれました。こうすることで開いたときにメニューがモーダル状態になるので、コンテンツを意識せずともメニューの UI だけを一時的に画面いっぱいに好きに使うことができるようになりました。なので、そこにスクロールビューを仕込めばいくらでもメニューを拡張することができるという画期的なものです。

果たしてそんなことをして本当に便利になるのでしょうか。

もしグローバルナビゲーションとしての役割をそれに与えるのだとしたら、メニューの内容は極力少なくするべきです。モーダルである必要もありません。主機能・主画面を呼び出せる最低限の項目に絞り込み、できれば隠さず、いつでも手の届くところに配置するべきです。その最適な UI こそがタブバーパターンです。Android や Web はよく知りませんけど、少なくとも (ドロワーの標準コンポーネントが提供されない)iOS のアプリにおいて、タブバーを否定してまでハンバーガーを採用する理由はあるでしょうか。もちろん、Android や Web でもタブバーのような UI を採用することは十分に現実味があるはずです。

触っていればすぐに気付くはずです。「トップ」「お気に入り」「検索」「履歴」「設定」「その他」と並んだグローバルナビゲーションがハンバーガーに収められている UI があるとき、例えばユーザーは検索したくなったらまずハンバーガーをタップしてメニューを開かなくてはなりません。メニューから目的の項目を見つけ出して、次にそれをタップします。
気が済んで今度は履歴を見たくなったらまたハンバーガーをタップして開きます。たった2画面間 を移動するだけなのに、いちいちハンバーガーメニューを開くコストをユーザーに強いることになるのです。1アクション多いどころか、大抵はメニューが0.3~0.4秒くらいのアニメーションを伴って登場しますから、そこで表示し終わるまで待たなければなりません。そしてその後目的の項目を味気ないメニューから探し出すのです。これが1回や2回に限らず、毎度です。ユーザーは次第にハンバーガーが鬱陶しく感じ、疲弊してしまうことでしょう。

安易にハンバーガーメニューに頼るのではなく、取り扱いたい情報を整理した上で、ハンバーガー以外の表示方法を検討すべきです。The Hamburger Menu Doesn't Work という記事ではハンバーガーメニューのこのようなダメな点について論理的に反論しています。

The Hamburger Menu Doesn't Work
日本語訳:ハンバーガーメニューはゴミだ!!
日本語訳:次世代のWebナビゲーションに向けて ー ハンバーガーメニューからの卒業
日本語訳:なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?

3. ナビゲーションとしての欠陥

Kill The Hamburger Button
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

ハンバーガーメニューが使い終わると隠れてしまうので、グローバルナビゲーションとして採用すると使いづらいということは以前指摘しました。ここでは更に掘り下げてみます。

ハンバーガーメニューは画面をとても広く使うことができるので、スクロールビューにすれば実質的に拡張性は無限大です。ですが本当にナビゲーションは無限大になり得るでしょうか? 画面遷移の導線が10個にもなればもうごちゃごちゃした印象は拭えなくなってきます。なのでメニューがスクロールすること自体が既に非現実的と言えそうです。
Windows のスタートメニューみたいなものでしょうか。あれはすべてをプルダウン、いやポップアップメニューに押し込んだことにより、ランチャーのくせに無駄に広く深いメニューを何度も行き来しなければならない BAD UI です。Windows ユーザーはそれに慣れてしまっているからそう思わないかもしれませんが。ただ Windows の場合はクイック起動やデスクトップ上のショートカットがあるだけ救いがあります。

Start Menu
スタートメニューとクイック起動の例:http://lifehacker.com/5955089/how-to-bring-back-the-start-menu-in-windows-8

グローバルナビゲーションであれば現在位置をユーザーに明示する必要があります。これは Web サイトの UI では古くからの常識です。アプリでも同様でしょう。しかしハンバーガーメニューを採用してしまうことでこの常識を破ることになります。サイト、あるいはアプリにおいて現在位置がわかりにくいナビゲーション UI は欠陥と言えるでしょう。

こうならないためにも、ナビゲーション UI には極力アクセスしやすくするようにし、ユーザーが一目見て現在位置を把握できるようにしてあげる必要があります。また、サイトやアプリの構成を見直して、画面遷移がわかりやすくなるように整理します。ハンバーガーメニューのような複雑なナビゲーションに依存する必要がないよう、極力シンプルにするということが最も良い解決策と言えそうです。
iOS のタブバー(UITabBar)では同時に表示できるタブ数は5個まで、それ以上は「その他」というメニューに自動でまとめられる仕様ですが、これを採用するとき、事前に情報の整理と優先度の設定をうまくしてあげれば、5個以内に納めるということも不可能ではないでしょう。Twitter はその点シンプルにまとめあげています。また、Facebook アプリが少なくともハンバーガーメニューだった UI からタブバーベースの UI に変化したことは周知の通りです。

a.jpg
Twitter iOS

4. 過剰装飾

Material Design 以前からハンバーガーアイコンを派手に動かして演出する例はありました。しかし Material Design (Android 5系) が登場してからは、世界中の Dribbbler たちはこぞってクールなダンシング・ハンバーガーを制作し始めました。これらが実際にアプリに実装されている例はほとんど見かけない気がしますけど如何でしょうか。Material Design には取り入れられましたけれど、その他の多くは “Dribbble UI” のひとつとして流れて行ってしまったのではないでしょうか。

Material Design
https://www.pinterest.com/pin/538180224194366158/

Hamburger Menu Animation
https://dribbble.com/shots/2280087-Hamburger-Menu-Animation

hamburger menu
https://dribbble.com/shots/2265620-hamburger-menu

Icon Transition Kit
https://dribbble.com/shots/2148679-Icon-Transition-Kit

こういったものは本質からは程遠いため、無意味にハンバーガーを踊らせるのはやめて、少なくともメニューを使いやすくしてから必要最低限のアニメーションに留めましょう。

Your UI isn’t a Disney Movie(君たちの UI はディズニー映画じゃないんだよ)

No More Hamburger Menu – ハンバーガーから卒業しよう

No More Hamburgers
https://dribbble.com/shots/1633262-Hamburger

ハンバーガーがまずいということがよくわかりました。何も考えずにとりあえずあの三本線 を左上に配置し、隠れたメニューに大量の機能を押し込めるのはもうやめましょう。Android ではそれが推奨されているようにも見えますが、Android であってもそこに疑問を投げかけても良いと思います。iOS ではそもそもドロワー UI は UIKit では提供されないので、推奨されていないというのを察した上で UITabBar をまずは検討しましょう。常設タブが邪魔になるというのであれば、合わせてタブを隠すオプションを利用しましょう。

ドロワーといえば、OS X にも NSDrawer というドロワーが昔からありますが、ほぼ使われているのは見たことがありません。昔の2chブラウザで板一覧のサイドメニュー部分に使われていましたけど、批判が多かったのでスプリットビューで置き換わりました。要するに不便なので使われなくなったのです。

もしあなたがこれから iOS アプリのデザインをやるというのであれば、Apple の純正アプリを観察すると良いかもしれません。まずハンバーガーメニューは使われておらず、大抵はタブバーかその他のパターンで実現されています。Human Interface Guidelines を読んでもハンバーガーメニューに関する記載は見られないので、そもそも推奨していないのでしょう。

Web ではより深刻です。HTML や JavaScript を用いたインタラクティブな UI というものがなかなか実装しづらい上、ブラウザごとの「個性」によりそれがまともに動作する見込みが薄いです(例:android.com)。これはハンバーガーに限った話ではありませんが、JavaScript 等で複雑な挙動を実装するリスクをとるよりも無難にアイコンを横並びに配置しておく方がシンプルだし、ナビゲーションという目的であればその方が良い結果が得られるかもしれません。ネイティブ UI には敵わないということを自覚し、よく検討しましょう。

その結果、やっぱりハンバーガーメニューが優れていると思ったら採用してみる、そのぐらいの構えで UI デザインを行ってみては如何でしょうか。

参考資料


UI Design Advent Calendar 2015 明日9日目は usagimaru さんの 闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう です。お楽しみに。