はてなブログでハンバーガーメニュー辞める理由
スポンサードリンク
スマートフォンのメニューUIといえばハンバーガーメニューがお馴染みですね。
しかし昨今ハンバーガーメニューは毛嫌いされています。
なぜハンバーガーメニューは嫌われているのか。
問題はユーザーがハンバーガーメニューに戸惑っているということではなく、それを画面で最初にクリックする理由が見つけられないということなのだ。
引用：http://l-orem.com/the-hamburger-menu2/
味気ない三本線を一目見ただけでは、一体全体何をするものなのかユーザーからはよくわかりません。クリックまたはタップしてみるまでは中身を知ることができません。また、いざ開いてみたとしても、大抵は縦方向に十分に余裕があることから、無駄にメニューが充実していることが多いです（Amazon のように）。
例えばユーザーは検索したくなったらまずハンバーガーをタップしてメニューを開かなくてはなりません。メニューから目的の項目を見つけ出して、次にそれをタップします。
気が済んで今度は履歴を見たくなったらまたハンバーガーをタップして開きます。たった2画面間を移動するだけなのに、いちいちハンバーガーメニューを開くコストをユーザーに強いることになるのです。
引用：http://qiita.com/usagimaru/items/930de80062bdae880630
一般的に普及したハンバーガーについて、「UIデザインとして劣っているので使うべきではない」とアーチャー氏は主張しています。その理由の一つとして、「それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない」という、情報が隠されている欠点を指摘しています。
引用：http://gigazine.net/news/20150812-hamburger-menu-not-work/
このようにあちこちからハンバーガーメニューを辞めよう運動は起こっています。
理由は大きく分けて2つ
何のためのアイコンかわからない
スマホを使いなれている現代人であれば、おおよそどんな動きでどんな情報が手に入るか予測できるでしょう。しかし、お年寄りや子供など、初心者ユーザーなどはどうでしょう。
メニューにたどり着かず離脱する可能性があります。
「時間がたてばユーザーはハンバーガーの使い方を理解してくれる」というデザイナーの言い訳に対しては、「本当に良いデザインは、市民権を得るのに時間などかからない」
引用：http://gigazine.net/news/20150812-hamburger-menu-not-work/
行き来する際のアクションの多さ
別ページに移動する際、ハンバーガーメニュー内にリンクがある場合いちいちメニューを開く必要があります。1度や2度ならまだしも数が重なると大きなコストにつながるわけです。
ハンバーガーメニューを辞めた企業
ある求人検索アプリが、ハンバーガーメニューをやめてスクリーン下部のナビゲーションメニューにUIを変更したのだという。
- 月間アクティブユーザーのPVが2桁増加
- 月間アクティブユーザーの再訪が2桁近く増加
- アプリ内の重要機能の利用が2～3桁増加
- ネガティブなフィードバックがゼロに
http://web-tan.forum.impressrd.jp/e/2016/12/02/24529
詳細には書かれてませんが、確かに求人検索アプリなどナビが頻繁にクリックされページを行き来する際は、先ほどの嫌われる理由の２つは、大きく影響がありそうです。
はてなぶろぐでハンバーガーメニューを辞めました。
ブログも同じで検索でたどり着いたユーザーなど、その記事だけでなく類似記事や他の記事に興味を持ってもらうことは重要です。しかし、初めて訪れたブログのメニューアイコンををわざわざタップすることは決して多くないでしょう。それよりは、初めからメニューを表示することが有効に思えます。
そしてこのfunclurブログもハンバーガーメニューを辞めることにしたわけです。
改善策
改善策で上記のサイトに挙げられていたものは、アイコンとテキストを合わせて表示するやり方です。
http://i.gzn.jp/img/2015/08/12/hamburger-menu-not-work/a10.png
引用：http://gigazine.net/news/20150812-hamburger-menu-not-work/
これであればわかりやすいですし、回遊しやすそうです。
自分のブログの場合
以下のようにしました。
タップすると↓の画像のようにカテゴリーまでスクロールします。
①ナビゲーションというほどブログのカテゴリに特徴を持っているわけではないという自己診断の元、
- カテゴリー
- 最新記事
- 注目記事
の3つに絞りました。
②ナビゲーションをクリックするとフッター側のコンテンツに移動します。
③また、下にスムーススクロールすることを示すために下向き矢印アイコンを設置しました。
そうすることによって
- だいたいのページと読んでほしいページを網羅できる。
- 情報過多にならない
- フッター側コンテンツに常にあるため省スペース化
- スムーススクロールのため誘導がスムーズ
ということが実現できます。
行ったこと
- ナビゲーションを絞る
- 下矢印付きアイコン付きでページ上部に設置
- ページ内にスクロール
今後、ナビを増やしたい場合はアイコン+テキストも考えたいと思います。
しかしこのやり方はアイコンを作るのは自分のような人にもおすすめです。
ソースについては、現在結構汚いので綺麗にしてから実装方法など公開します。
