Edited at

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


はじめに

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

まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。


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

最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。にしてもこのただの三本線をハンバーガーと表現するのは少し無理があるような気がします。まあ違和感あれどそこに抗っても仕方がないので、とりあえずこれはハンバーガーと呼称することにします。


ハンバーガーメニューを避けたい理由

真面目にハンバーガーメニューを考察してみます。


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

MOARRRR Hamburgers!

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

味気ない三本線を一目見ただけでは、一体何をするためのアイコンなのかよくわかりません。実際に押してみるまではユーザーはその先を知ることができません。また、いざ押してみたとしても無駄に項目の多いドロワーメニューが展開してきて萎えます。こうなるともうユーザーはハンバーガーメニューの中身をいちいち覚えていられません。とにかくいろいろなモノが詰まった三本線 という曖昧な記憶を頼りに、用がある度にそれをいちいちタップすることになります。

可能であればアイコンの隣にテキストを付加してあげたほうが親切でしょうが、そもそもアイコンのシンボルを三本線以外にするとか、ドロワーをやめるとか、いろいろ考えられる改善策がありそうです。この点についてはハンバーガーアイコンに関する調査報告をされている記事がありますので、そちらも合わせて読まれると良いと思います。


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

Mobile Menu AB Tested: Hamburger Not the Best Choice?


あくまで個人的な話ですが、たとえば iPhone でまとめサイトのようなところを見ていた時にそこにハンバーガーアイコンがあったとして、私はそれをタップすることはまずないでしょう。なぜならそのアイコンを見ても一体それが何をするものなのかが分からないし、Twitter などからたまたま記事に流入してきた身としては、わざわざハンバーガーアイコンを押して内容を確認しようとするほどにそのサイトには興味がないため、よほどでもなければ押すことはないでしょう。


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

スマホの画面は狭いので、巨大なメニューのようなものをどこかに常設しておくと邪魔になってしまいます。そのため、普段はそれを隠しておいてタップされたらそのときだけ開くというアイディアが生まれました。こうすることで開いたときにメニューがモーダル状態になるので、コンテンツを意識せずともメニューの UI だけを一時的に画面いっぱいに好きに使うことができるようになりました。そこにスクロールビューを仕込めばいくらでもメニューを拡張することができるので、ナビゲーションの設計的は難しいことを考えずに拡張性の高いメニューを得られるため、開発側としてはとても利用しやすいのです。

だがしかし、果たしてそのようなUIで本当に良いのでしょうか。

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

仮に「トップ」「お気に入り」「検索」「履歴」「設定」「その他」といった項目がハンバーガーメニューに収められていたとき、例えばユーザーは検索したくなったらまずハンバーガーをタップしてメニューを開かなくてはなりません。メニューから目的の項目を見つけ出すことも意識しなければなりません。用事が済んで履歴を見たくなったらまたハンバーガーをタップして同じような操作を行います。たった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個にもなればもうごちゃごちゃした印象は拭えなくなってきます。入り口への導線が並んだメニューがスクロールすること自体が既によろしくない方向に思えます。

グローバルナビゲーションであれば現在位置をユーザーに明示する方が良さそうですが、ハンバーガーメニューを採用してしまうと、現在位置を把握しにくい UI となってしまいます。

こうならないためにも、ナビゲーション UI には極力アクセスしやすくするようにし、ユーザーが一目見て現在位置を把握できるようにしてあげる必要があります。また、サイトやアプリの構成を見直して、ナビゲーションがわかりやすくなるように整理することを検討します。ハンバーガーメニューでいきなり実装するのではなく、例えば iOS ならばタブバー(UITabBar)を検討するようにします。タブバーは同時に表示できるタブ数は5個まで、それ以上は「その他」というメニューに自動でまとめられる仕様ですが、事前に情報の整理と優先度をうまく設定してあげれば、タブ数が無駄に多くなることも避けられるかと思います。

Twitter は割とシンプルにまとめあげていますし、Facebook が少なくともハンバーガーメニューからタブバーベースの UI に変化したことは周知の通りです。

a.jpg

Twitter iOS


No more hamburger menu

No More Hamburgers

https://dribbble.com/shots/1633262-Hamburger

画面の左上にいるハンバーガーは美味しくありません。何も考えずにとりあえずあの三本線を左上に配置し、隠れたメニューに大量の項目を押し込めるのはもうやめにしましょう。Android ではそれが推奨されているようにも見えますが、Android であってもそこに疑問を投げかけても良いと思います。iOS ではそもそもドロワー的な UI は UIKit では提供されないので、推奨されていないということを察した上で UITabBar をまずは検討しましょう。

ドロワーといえば OS X にも NSDrawer というドロワーが昔はありましたが、ほぼ使われていませんでした。そもそも API が消滅しました。要するに不便で不要なので使われなくなったのです。

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

Web の場合は悩ましい問題です。iOSなどのように統一的なUIフレームワークが存在しないこと、ページ遷移を主体とするナビゲーションであること、HTMLという文書にスタイルを被せてGUIを実現していること、ブラウザの挙動(タブバーが引っ込む等の動き)がフレームの大きさに影響を与えることなど、これらがネイティブアプリケーションとは違ってハンバーガー以外のパターンを実現しづらい要因になっているように思えます。モバイル Web ではハンバーガーメニューが現実的にならざるを得ないのかもしれません。


参考資料