流行のハンバーガーボタン・ナビゲーション、長所と短所

最近、流行っている「ハンバーガーボタン・ナビゲーション」ってご存知でしょうか?

何やら美味しそうな名前ですが、アプリやWebサイト等で使用するUIの種類なんです。

誰が名付けたのかわかりませんし、呼び名方はいまいち浸透していませんが、きっと誰もが見たことあるやつですよ!

a0960_002393

 

ハンバーガーボタンって?

まずはそこからですよね。

説明するより、見た方が早いです。

スマートフォンでGoogleを開いてみると、左上に三本の横線ボタンがあると思います。

20140728110739

そう、これがハンバーガーボタンです!

言われてみれば確かに、なんとなくハンバーガーに見え・・・なくもないですかね?

 

これをタップすると、横からにゅっ!っとメニューが出てきます。

20140728111319

こういうタイプのUIをハンバーガーボタン・ナビゲーションと呼ぶそうです。

 

ハンバーガーボタン・ナビゲーションって何がいいの?

では、なぜ流行っているのでしょう?

最大の長所は、画面のコンテンツ領域を広く使えることです。

大きな画像やデザインパーツを配置して、大胆なレイアウトを実現することも出来ます。

また、ボタン自体は小さくでき、文字も必要ないのでどんな画面デザインでも、あまり邪魔になりません。

iOS7が採用したことで話題になった、近年主流のフラットデザインとの相性も良いように思えます。

大型化しているとは言え、スマートフォンはやはりPCに比べると画面が小さいので、より広くスッキリ使えるものが流行るのは、必然だったのかと思います。

 

・・・ほんとに流行ってるの?

というわけで、サクッと自分のスマートフォン内を調べてみました。

すると、いっぱい出てきました!

2014072811355820140728111349

GooglePlayや、端末標準カレンダーも採用!

 

201407281136122014072812261420140728112251

さらに、FacebookやYoutube、Walkmanアプリも、みんなハンバーガーボタンを採用してますね!

これはだけメジャーなところがみんな採用しているなら、これは一つの主流UIコントロールと呼べるのではないでしょうか。

 

・・・ん?なんか、縦に細長いタイプも併用しているものが多いですね!

こちらのハンバーガーボタン(既にハンバーガーじゃない?)は、吹き出しのポップアップが表示されることが多いようです。

 

なんでこんなボタン?

そもそ、この三本の横線、いったいなんなんだろう?

まさか本当にハンバーガーなのだろうか?

ふと、Macにも、横からスライドインするUIがあったなと思って画面右上を見てみると、ボタンはこんなデザインでした。

スクリーンショット 2014-07-28 11.27.16

!?

そうか、この線はリストを表していたのか!

横書きの項目リストを簡略化した結果、三本の横線になり、ハンバーガーと言われてしまったのですね。

 

流行ってるし即採用・・・は危険!?

流行るUIというものは、基本的には便利です。

が、完全無欠!なんてことはありえません。

このハンバーガーボタン・ナビゲーションにも欠点があり、それを問題視している記事がありました。

 

アプリUI/UXデザイナー必見!「ハンバーガーボタン」ナビゲーションを使うとユーザーエンゲージメントが半減することが発覚

http://gori.me/apps/iphone-app-news/56721

 

実はこの記事が、今回私がこの話題を取り上げようと思った理由でもあったりします。

まとめると、ハンバーガーボタン・ナビゲーションの弱点は以下の2点です。

・シンプルすぎるが故に、発見できない。

・2ステップの操作が必要となってしまう(ボタンを押してメニューを開く、メニューを選択する)

そのためにユーザーエンゲージメントが半減してしまうとのこと。

 

ユーザーエンゲージメントとは?

ユーザーエンゲージメントとはマーケティング関連の用語で、例えばユーザーが広告等を見て「これちょっと欲しいかも」と思ったものを、実際に購入するかどうかという指標のようです。

欲しいと思っても「まだ今度でいいか」と、その場では購入しないということはよくありますよね?

つまりそれは、ユーザーエンゲージメントが低いということなのだそうです。

 

マーケティングの話は、正直ちょっと私はよくわからないのですが、実際に使いやすいかどうかということに置き換えて考えてしまっていいのかと思います。

確かに、ハンバーガーボタンがメニューを表示するボタンであるということがユーザーにわからなければ、ユーザーは困ります。

また、常時メニューが表示されている状態に比べて、いちいちメニュー表示ボタンを押すのは手間な場合もあります。

ハンバーガーボタンは広まりつつあるので、そういったアプリやサイトをよく利用している者にとっては、わかりやすいと言えます。

一方で、そういったものに不慣れな私の親(60代)もスマートフォンを使うようになり、アプリの使い方を尋ねられたりします。

UIデザインは、使う人を考えること、そして間違えないように導くことが重要ですね。

 

Yohei



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム